CODEWITHSUNDEEP
htmlcssalignment
Michiel
Michiel

Reputation: 8083

Horizontal align doesn't work in IE

I'm trying to align a div horizontally, but for some reason it's not working in IE... What am I doing wrong?

HTML 

<body>
    <div id="container">
        <div id="header">
            <img src="logo.png">
        </div>

        <div id="top-nav">
            <ul class="menu">
                <li class="first leaf menu-mlid-471"><a href="">Home</a></li>
            </ul>
        </div>
    </div>
</body>

CSS 

body{
   background-color: #fff;
   margin: 0;
   padding: 0;
 }
ul.menu{
   width: 500px;
   margin: auto;
 }
 #header{
   height: 150px;
 }

For Firefox, Chrome, Safari,... no problem. It all comes exactly in the middle. But IE refuses to align it properly...

Upvotes: 0

Views: 1786

Answers (4)

huzzah
huzzah

Reputation: 1805

Actually, if you place a border around your menu div, you will see in IE that the DIV is aligned in the center, however, your ul content is not. Please pop this into your CSS and see what results you get:

ul.menu{
width: 500px;
margin: auto;
border:solid black thin;
text-align:center;
}

Should work in IE.

Upvotes: 1

Ajay
Ajay

Reputation: 100

Try this .ie ul.menu{ width: 500px; margin-left: auto; margin-right:auto; display:block;}

Upvotes: 1

dangerChihuahua007
dangerChihuahua007

Reputation: 20895

Do you have a doctype? Without it, IE reverts to Quirks Mode, which does not support margin: auto; centering.

Also, IE < 6 does not support margin: auto; centering at all (in case ancient IE browser compliance is particularly important you).

Upvotes: 1

Ajay
Ajay

Reputation: 100

Use below CSS

.ie ul.menu{
           width: 500px;
           margin: auto;
           display:block;
 }

Upvotes: 1

Related Questions