[Solved] Navigation li cross browser compatibility

[hoolyon]

Again I need help with this,

http://juliangaviria.net/partybox/

Looks perfectly aligned in firefox (mac) but when opened with safari and chrome the text runs off the box. What’s the proper way of fixing this? I tried searching through old posts but no luck.

Thanks and I apologize for my ignorence.

[cybershot]

well, I don’t have those browsers on my laptop and since I am away from home where they are, I can’t tell you. But what I can tell you is that you need to pull all the css out of your page and put it in an external style sheet. That is the whole point to css. This will make your page much much better and easier to diagnose. the next thing you need to do is get firebug for firefox. this will allow you to highlight your elements and can show you what element might be pushing things out of the way. Google firebug tutorials to see how it works. It can be a huge life savor. Try these things first

[hoolyon]

I did try firebug and it showed nothing wrong with the coding, A grade. I use an external style sheet after I’m done coding the home page; I don’t see how that would effect the spacing though in other browsers.

[cybershot]

Its all about good practices from the very start. Doing it your way is sloppy. You should have all your styles in an external style sheet because that is how css is suppose to work. It wouldn’t necessarily change mess things up, its just good practice. The reason why your nav is messed up is because of your padding in your nav that pushes the text. each one pushes the next one a little further to the right.
My advice would be this. First, take all the css out of the page and put it in an external style sheet. Follow a pattern and comment your code like this

/* this is the header section*/
#header {

}

/*this is the nav sections*/
#nav {

}

#content {

}

#footer{

}

after you put all your css into an external style sheet, make sure you link it to every file in your site and then add a css reset to the very top of that file.

http://meyerweb.com/eric/tools/css/reset/

The reset will make every browser behave the same. Each browser has different margin and padding rules, that is why other browsers are pushing the text further. After the reset which should set margin: 0; padding: 0; on most elements, things will line up better. Try that.

[Historical Forums User]

Where the heck did you get an "A" grade from?

And it’s not so much that there is a problem with the form of your code, as much as there is a conflict. Self-contained style sheets are useful for both fixing and diagnosing these problems, as all conflicting styles are in one place.

You have several different style sources on your page, which make it way harder to diagnose.

[virtual]

The spaces where you want your navigation to appear are all the same size, so you shouldn’t be styling each individual li tag with inline styling. There are also no a tags.

To fix the problem you can remove the div #nav and give the ul element that id and give it a width that is divisible by 9 (the number of li tags), then give your li tags that width. You will need to add a margin-left to the ul to get your li tags to line up exactly over the background image. You can check this with Firebug.

[hoolyon]

Virtual you hit the spot. Problem fixed thanks.

Cybershot thanks for your time and help as well, yes I will follow your advice and hopefully I will catch on to the better coding habits.

[Author]

Posts