Forums

Lauren Bilanko

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

TheDoc

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...

apostrophe

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.

Lauren Bilanko

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

Lauren Bilanko

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.

http://www.bilanko.com/inprogress/examples/firefox_botnav.png

see "first run" runs into the image...

http://www.bilanko.com/inprogress/examples/safari_botnav.png

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

http://www.bilanko.com/inprogress/examples/firefox_boxnav.png

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

http://www.bilanko.com/inprogress/examples/safari_boxnav.png

TheDoc

"Lauren Bilanko" said:
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.

Lauren Bilanko

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

TheDoc

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:

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
</ul>

apostrophe

And the rollovers would be something like this


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

Lauren Bilanko

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.

Lauren Bilanko

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

treehouse : what would you like to learn today?

Forums

Firefox vs. Safari letter-spacing and line height