Grow your CSS skills. Land your dream job.

Firefox vs. Safari letter-spacing and line height

  • # April 20, 2009 at 12:57 pm

    I am very happy with the way my navigation text (on the bottom and in the grey box) looks in Firefox, but Safari does not seem to read the line height and letter-spacing off my style sheet in the same way. Is there something I can do to get Safari to look like Firefox with out compromising the way it looks in Foxfire.
    This page offers the best example:
    http://www.bilanko.com/inprogress/row3_col1.html

    Second Question:
    In the grey nav box you will see the word zoom. In Firefox, the cursor has no problem aiming on the word to click and link.
    In Safari, the pixel space to click doesn’t seem to span the whole word.
    I tried to increase the line height to make it take up more physical space, I noticed this worked on Firefox but Safari did not recognize the change.

    Thanks,
    Lauren

    # April 20, 2009 at 1:21 pm

    1. They look identical to me in FF3 and Safari 4.

    2. The Zoom link is an odd one. It could have something to do with the fact that the page has 23 errors on it. Clean those up first:
    http://validator.w3.org/check?uri=http% … omatically)&doctype=Inline&group=0

    3. Why, oh why, is your main body text (throughout the entire site!) a big image? I pray that this is just a place holder until a later date…

    # April 20, 2009 at 1:30 pm

    It may also have something to do with the fact you have used a paragraph instead of a list and javascript in place of good ole CSS.

    # April 20, 2009 at 2:23 pm

    I was on Safari 3.2.1
    I am installing 4 now and I will fix the syntax errors… I should have done that first :)

    The main content is an image. The client wants to be able to create slides in Keynote and upload replacements himself so that is why the navigation is floating over the image.

    The javascript is for the rollovers, I was not aware I could do that with CSS…
    Is that why I should use a list? I have never used list before, when and why should I be using it?

    Thanks so much,
    Lauren

    # April 20, 2009 at 2:51 pm

    I just loaded safari 4 and the problem is the same:

    On Firefox the text does not run into the image on the right like it does in safari.

    [img]http://www.bilanko.com/inprogress/examples/firefox_botnav.png[/img]

    see "first run" runs into the image…

    [img]http://www.bilanko.com/inprogress/examples/safari_botnav.png[/img]

    this is the foxfire version. Zoom is in the right place

    [img]http://www.bilanko.com/inprogress/examples/firefox_boxnav.png[/img]

    on Safari Zoom is much closer to the square on its left…

    [img]http://www.bilanko.com/inprogress/examples/safari_boxnav.png[/img]

    # April 20, 2009 at 2:52 pm
    "Lauren Bilanko" wrote:
    I just loaded safari 4 and the problem is the same:

    On Firefox the text does not run into the image on the right like it does in safari.

    There is nothing you can do to stop this. Fonts will render differently in every single browser.

    # April 20, 2009 at 3:05 pm

    Thanks! A compromise will have to be in order :(

    # April 20, 2009 at 3:06 pm

    Also, I assume you’ve let the client know that having a website with all content in images will result in essentially ZERO hits through any search engine? Almost every client I’ve ever had says that being able to be searched through Google is their top priority, I couldn’t imagine a client saying they don’t care about that.

    Couple notes:

    1. You have horizontal scrolling occurring (FF3)

    2. A white square box doesn’t say "Home" to me

    3. I think the idea of the site is interesting, but I think the end result is confusing. The navigation isn’t intuitive.

    4. Lists are used for… well… any time you are listing items. So your nav would become:

    Code:
    • Link 1
    • Link 2
    • Link 3
    • Link 4
    • Link 5
    # April 20, 2009 at 3:28 pm

    And the rollovers would be something like this

    Code:
    ul {
    list-style: none;
    }
    ul li a {
    color:#DDDDDD;
    font-family:Georgia,”Times New Roman”,Times,serif;
    font-size:12px;
    text-decoration: none;
    }
    ul li a:hover {
    color:#8AC293;
    }
    # April 20, 2009 at 3:53 pm

    so I would use list for the vertical navigation (in the grey box), but probably stick with paragraph for the horizontal navigation (text across the bottom) ?

    still the javascript rollovers are for the image files, not the text nav…

    there is a lot of redundant navigation in this site.
    I had nothing to do with the design and all points were made. This is what they want.

    # April 20, 2009 at 3:54 pm

    Thank you so much for the list info. I will play :)

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".