kitster79 Posted June 23, 2009 Report Share Posted June 23, 2009 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 Quote Link to comment Share on other sites More sharing options...
virtual Posted June 25, 2009 Report Share Posted June 25, 2009 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... Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 25, 2009 Report Share Posted June 25, 2009 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. Quote Link to comment Share on other sites More sharing options...
virtual Posted June 25, 2009 Report Share Posted June 25, 2009 Oops, I didn't even notice the divisions in the background, maybe I need new glasses. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 25, 2009 Report Share Posted June 25, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
kitster79 Posted June 25, 2009 Author Report Share Posted June 25, 2009 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 Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 25, 2009 Report Share Posted June 25, 2009 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. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted June 25, 2009 Author Report Share Posted June 25, 2009 Thanks Wickham, I made your suggested adjustment but it dosnt seem to be working...take a look... http://vojodesign.com/proofs/valuedWealthAdvisors Quote Link to comment Share on other sites More sharing options...
Terratuner Posted June 25, 2009 Report Share Posted June 25, 2009 (edited) 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted June 25, 2009 Report Share Posted June 25, 2009 (edited) Putting #navInner .contactNoBG {yada:yada;} should do the trick... Edited June 25, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
kitster79 Posted June 25, 2009 Author Report Share Posted June 25, 2009 Perfect. Thanks Eric. Quote Link to comment Share on other sites More sharing options...
Wickham Posted June 26, 2009 Report Share Posted June 26, 2009 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. Quote Link to comment Share on other sites More sharing options...
kitster79 Posted June 26, 2009 Author Report Share Posted June 26, 2009 Yes I know, I just haven't uploaded my latest files to the server. Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.