#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    3
    Rep Power
    0

    CSS issue in safari


    My site displays correctly in Firefox and IE (which was hassle enough) but when I view it in Safari on my Macbook, the last nav menu item is pushed down below the rest of the menu instead of in line with the rest of the menu. I just got my macbook, and I'm not very in touch with al of Safari's quirks yet, but I was under the impression that it was more reliable than FF or IE. Does anyone have any idea what's causing this, and how I can fix it?

    http://www.wwu.edu/~swing
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1) In my opinion Safari 2.0 is almost as good as Firefox 1.5. Opera 9 is about as good as both of those. I haven't been testing in iCab as long but its close to them too. All of those are far superior to IE7/Win and IE5/Mac.

    2) Your doctype has a typo in it.
    Code:
    <!DOCTYPE html PUBLIC "-//W#C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    I suggest you use this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    3) If fixing the doctype doesn't help, then try decreasing the left padding on the "#nav a" by 1px.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2006
    Posts
    3
    Rep Power
    0
    the problem seems to be that safari either has some different kind of box model or renders pixels differently, because the padding of each anchor fills the space perfectly in IE and Firefox, but overfills it in Safari. I played around with it and in Safari the menu as a whole is 3 px larger. Is this maybe because of a difference in how they render text size? It doesn't look like there's anything I can do about it except know that almost everyone will be using IE or FF, but if anyone knows why the discreptancy is there or if I can actually fix it, please let me know. Thank's.

    Oh and thank's for catching the Doctype error. That might be why I was getting one really strange validation error. I guess I must have been holding shift when I typed W3C, so I got W#C. Oops.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Hmm... You may be right. You didn't specify widths on those, so a slight difference in the width of the font would do it.

    I suggest you float the <li>s and give them a fixed width.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo