CODEWITHSUNDEEP
csshtmlhtml-lists
Stifler
Stifler

Reputation: 13

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

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

Upvotes: 1

Views: 1075

Answers (3)

doogle
doogle

Reputation: 3406

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.

Upvotes: 0

henryaaron
henryaaron

Reputation: 6192

You forgot to close the div identified as header in your CSS

Upvotes: 1

Scott
Scott

Reputation: 21892

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

Upvotes: 2

Related Questions