Jump to content
Stef's Coding Community
kitster79

Navigation Issue

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Eric

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

    Share this post


    Link to post
    Share on other sites

    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 by Terratuner

    Share this post


    Link to post
    Share on other sites

    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.

    Share this post


    Link to post
    Share on other sites

    Join the conversation

    You can post now and register later. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest
    Reply to this topic...

    ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

    Loading...

    ×
    ×
    • Create New...