<ul> <li> tags inside divs? works fine in IE but not in Firefox/chrome

Question

http://www.sc.x10.bz/test/awesome-menu.html

CSS

* { margin: 0; padding: 0; } /* Reset stuff */
ul#subheader {

width: 920px; 
margin: 250px auto; 
list-style: none;
}

ul#subheader li { 
display: inline; 
}

ul#subheader li a {

display: block; 
float: left; 
height: 45px;

background-image: url(images/subheader.png); 
text-indent: -9999px;
}


ul#subheader li a.who {
        width: 306px; background-position: 0 0; 
    }

ul#subheader li a.what {
        width: 306px; background-position: -306px 0;    
    }

ul#subheader li a.why {
        width: 306px; background-position: -612px 0;    
    }


a { outline: none; }

`

this works fine...

but as soon as i move this menu, inside my actual index page.. it doesnt show up correctly.. have a look here: http://www.simplecreations.co.uk/

please help

Answer 1

Check your CSS there are errors.

div#header {
width:100%;
height:auto;
margin:0px auto;
text-align:center;
text-align: center;
background: url(images/header2.png) no-repeat;
background-position: left;

/* subheader */
{ margin: 0; padding: 0; } /* Reset stuff */

header CSS has no closing bracket.

subheader css has no selector

Answer 2

您忘记关闭CSS中标识为标题的div

Answer 3

Change:

div#header {
    width:100%;
    height:auto;
    margin:0px auto;
    text-align:center;
    text-align: center;
    background: url(images/header2.png) no-repeat;
    background-position: left;

To:

div#header {
    width:100%;
    height:auto;
    margin:0px auto;
    text-align:center;
    text-align: center;
    background: url(images/header2.png) no-repeat;
    background-position: left;
}

Also, you might want to remove the HTML/XML(<!-- -->) comment markers from your CSS script.