Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Firefox vs. Safari letter-spacing and line height

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #24649

    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

    #56572
    TheDoc
    Member

    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…

    #56573
    apostrophe
    Participant

    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.

    #56576

    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

    #56579

    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]

    #56580
    TheDoc
    Member
    "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.

    #56581

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

    #56582
    TheDoc
    Member

    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
    #56583
    apostrophe
    Participant

    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;
    }
    #56594

    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.

    #56595

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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.