2 Navigation Bars On Nearly Identical Pages, Yet Different Results and Can't Control UL LI Padding and Margins


Recently I created a new horizontal navigation for my 2 sites but on one site it looks good, yet on another I am having trouble controlling the positioning.

For example, If you review the horizontal navigation links at the bottom of the header image here: http://classifieds.your-adrenaline-fix.com/ you'll likely agree that it looks good but if you click any of the horizontal links these will take you to the main site where you will see the same horizontal navigation but the problem is I can't gain control of the positioning nor can I seem to figure out why the 2 are different with nearly identical HTML and CSS.

If anyone wouldn't mind taking a look at the link I provided above you'll see what I'm talking about and if anyone wouldn't mind showing me what Im missing, I'd be most appreciative and I thank each of you in advance.

PS; I've been trying for hours...

Problem courtesy of: Stuart Y


On the page that looks correct, your <ul> has the following styles defined in form-css.css around line 70

list-style-type: none;
padding: 0px;
margin: 0px;

The main page does not have this styling. The important parts being the padding and the margin. Default styling on a list usually gives some pad and margin to a ul, which is what we are seeing in the main page.

Solution courtesy of: Lee Quarella


I compared the CSS for the two pages using chrome developer tools. As you said they are almost identical in HTML and CSS but I did find a difference.

This page: http://classifieds.your-adrenaline-fix.com/

**The ul tag has some css properties applied to it which are not present in the other page( the page which is messed up) namely:

ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;

This css clip I found in the form-css.css page.

Removing this css part, messes up the page where the horizontal navigation is looking fine as well.

By adding these CSS properties to your ul tag for the horizontal page links for the other page(http://www.your-adrenaline-fix.com/) should fix it.

Discussion courtesy of: Gloria

This recipe can be found in it's original form on Stack Over Flow.