Navigation Issue

[kitster79]

I am trying to fix my navigation and am having problems doing so. It looks different in firefox to Safari to IE. Each time I think I have fixed it in one browser, it screws it up in another. The li buttons just dont seem to line up and center correctly even though all my CSS indicates (to me) that it should look just fine. You can view the site here...

 

http://vojodesign.com/proofs/valuedWealthAdvisors

 

Can anyone help me figure out how to adjust my CSS so that the navigation looks nice across all browsers?

 

Thanks

 

Kit

[virtual]

They all look very similar to me on a Mac in Opera 9.64, Firefox 3.0.11 and Safari 3.2.1. Just a very slight run over to the right of the menu in Firefox, but nothing that an untrained eye would notice.

 

Maybe our PC friends and Internet Exploder are showing different problems...

[Wickham]

I agree that there's very little difference, but in all browsers the words for the links don't fit the background image which has vertical divisions

http://vojodesign.com/proofs/valuedWealthAdvisors/images/navBG.jpg

 

so you may have adjust the image, or not use vertical divisions in the image but code them as borders or small images in between the links.

[virtual]

Oops, I didn't even notice the divisions in the background, maybe I need new glasses.

[PicnicTutorials]

Yep, place those spacer images on the li's or anchors (didn't look), that way they'll keep in track with the text. Either that, or also make the text an image (then do image replacement of course).

Edited June 25, 2009 by Eric

[kitster79]

Thanks for your help guys, but I'm an absolute perfectionist and I need the nav to be perfect. There must be something to fix this problem.

 

Also, I did remove the main background image and put a left positioned background image on each li tag. However, this puts one on the far right (after the "contact" link) which I obviously don't want as the is not one on the far left (before the "home" link). In addition, this also makes the entire navigation look even more lob sided to the right.

 

Take a look...

 

http://vojodesign.com/proofs/valuedWealthAdvisors

[Wickham]

To get rid of the vertical separator on the far right you will have to give that li tag a class with background-image: none:-

 

.no-image { background-image: none; }

 

Contact

 

As far as precise positioning is concerned, it can be difficult because different browsers have slightly different sizes for the same font-size px so you just have to set a class for one of them, perhaps the left one, with a different width or padding, perhaps negative padding, and if that is wanted for IE then put it in a conditional comment to affect only IE.

[kitster79]

Thanks Wickham, I made your suggested adjustment but it dosnt seem to be working...take a look...

 

http://vojodesign.com/proofs/valuedWealthAdvisors

[Terratuner]

I've found and downloaded your stylesheet (h tt p:// vojodes ign.c om/proofs/valuedWealthAdvisors/css/styles.css)

 

But where is the stylesheet for the .home, .investments, .about and so forth located?? I thought I could give it a try for debugging.

Edited June 26, 2009 by Terratuner

[PicnicTutorials]

Putting #navInner .contactNoBG {yada:yada;} should do the trick...

Edited June 25, 2009 by Eric

[kitster79]

Perfect. Thanks Eric.

[Wickham]

I notice that your online version still has the separator to the right of the Contact link.

 

Your stylesheet has

.contactNoBG {

background-image: none;

}

whereas Eric said to use

 

#navInner .contactNoBG {...}

 

In fact my solution is the same principle as Eric's but I showed

.no-image { background-image: none; }

whereas it needs to repeat the style which has the background-image which has #navInner in front like

#navInner .no-image { background-image: none; }

 

So either use mine or Eric's provided you have #navInner in front of the class style.

[kitster79]

Yes I know, I just haven't uploaded my latest files to the server. Thanks