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

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.