CSS

3 Comments

(Note: This will be a fairly technical entry, tied to specific details of CSS usage. Feel free to skim or skip if uninterested.)

Anyone out there a CSS expert?

I'm running into trouble doing a couple of things with CSS-positioning, and none of the online resources I've looked at provide answers.

(By the way, if you're ever creating an online tutorial for a new technology, please put the date of publication and/or most recent update somewhere near the top of the page. It's really frustrating to read through CSS tutorials without a clear idea of whether they were written in 1998 (when NS4 was the biggest browser-compatibility issue and there don't seem to have been any browsers that did a really good job with CSS) or, say, 2003.)

So here are my issues:

  • Creating a horizontal navigation bar. For the purposes of my question, think of it as a horizontal row of four rectangular images, with no space between them. I can do that much; the hard part is preventing the line of images from wrapping like text if the visitor makes the browser window narrower. If you were creating such a thing with a table, you'd just use four table cells, set appropriate table attributes to get rid of cell borders and such, and put one image in each cell. For CSS, though, I'm not seeing how to do it. I tried min-width, but that doesn't seem to help, at least not in IE5/Mac or Safari v73.
  • Creating little pop-up boxes that appear next to a link that's in a paragraph of text. Yes, I'm trying to re-implement my footnotes concept using better CSS. In IE5/Mac, that page works exactly as intended: you point the mouse pointer at a footnote number, and a little box appears containing the footnote text. In Safari, though, the box appears at the left margin of the window and a little down from where the footnote number is. I suspect that IE5 is exhibiting nonstandard behavior here, but it's the behavior I want. I can't seem to find a combination of visibility (or display) and positioning that provides the desired effect.

Suggestions, pointers, and tips welcome.

3 Responses to “CSS”

  1. naomi_traveller

    I have a suspicion that the footnote thing is non-standard in IE. However, if you want to play with graphics you could probably do a workaround using the img alt tag.

    E.g. for a footnote labeled “1”, create a small .gif with the number 1 in a helpful colour and then insert it as <img src=one.gif alt=”footnote text here bla bla bla”>

    A bit of a kludge, but in theory it ought to give you a footnote when you mouseover.

    reply

  2. David D. Levine

    If you want to do the above in the “correct” way, use TITLE rather than ALT. See this DevEdge article for details. See Bugzilla entry 25537 for a lengthy, sometimes passionate discussion of Gecko’s behavior in this regard.

    reply

  3. Nao

    As well as using TITLE for the footnote text rather than ALT (if using an image of text), you should further include the text that is the picture as the ALT text.

    Hence, if you have a picture of a numeral 1, the ALT text would be “1”, and the TITLE text would be your footnote.

    Alternatively, try this kludge: surround your footnote number with <a title=”footnote text goes here”>[1]</a>. BBEdit’s syntax checker likes it. The one snag I can see is that the link doesn’t get underlined or colored, presumably because it lacks an HREF. But you could get around *that* by assigning a CSS class to it. I don’t know if this would really work in every browser. I only tried it in Mozilla.

    I do think that there must be a better way; I shall have to ask Stephen, who is passionate about CSS and may not have seen this post yet. I know that he was working at one point on a way of doing sidenotes in CSS (so that they would float off in the margin, as in many textbooks). Which isn’t what you were asking for, but hey…

    My personal solution has been to use internal linking in a page, so that the footnote number [1] has a link to <a href=”#1″> at the bottom of the page (where there’s an <a name=”1″>, and then there’s a link that takes the reader back to the footnote number. Also a kludge. But another kind of kludge, at any rate. 😉

    (I hope those HTML entities work… If they don’t, I’ll figure something out.)

    reply

Join the Conversation