CODEWITHSUNDEEP
htmlinternet-explorercss
Mahesha999
Mahesha999

Reputation: 24721

doctype html breaks layout

I am trying to replicate layout of html5doctor.com. I have IE8 installed here. I am able to produce following output:

enter image description here

HTML

<html>
<head>
    <link type="text/css" rel="stylesheet"  href="style.css" />
</head>
<body>
    <div id="header">
    </div>
    <div id="nav">
        <div id="navmenus">
            <ul id="navmenulist">                   
                <li class="menu" id="id1">
                    <a href="#">Home</a>
                <li class="menu">
                    <a href="#">Products</a>
                <li class="menu">
                    <a href="#">About Us</a>
            </ul>
        </div>
    </div>
    <div id="content" >
        <div id="article"></div>
        <div id="sidebar"></div>    
    </div>      
    <div id="footer"></div>
</body>
</html>

CSS

/*I have added CSS Reset from http://meyerweb.com/eric/tools/css/reset/ 
       Just deleted it for simplicity 
*/

body
{
    margin:0px;
    padding:0px;    
    background-color:#E8E8E8;
    text-align:center;
}

#header
{
    background-color:#1F7ADB;
    width:100%;
    height:150px;
}

#nav
{
    background-color:#1F7ADB;
    width:100%;
    text-align:center;  
}

#navmenus
{
    background-color:#14B3F7;
    width:900px;
    text-align:left;    
}

li.menu
{
    list-style:none;
    display:inline;     
    height:35px;
    padding:12px;   
}

li.menu:hover
{
    background-color:yellow;        
}

li.menu a
{   
    text-decoration:none;
    font-family:Arial;
    font-size:18px; 
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;

}

Notice li.menu:hover in above CSS. It is not working in IE8. So I added <!DOCTYPE html> as suggested at this thread.

It made hover work but now it broke the layout as follows:

enter image description here

I will like to get result that will work on IE8 first and then will like to learn work around that will work consistently in major (may not be in IE6) browser. And will glad to stick to CSS and HTML (no script). And above all will like to learn whats exactly wrong here.

Upvotes: 3

Views: 1253

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195992

Remove the text-align:center; from the body and use margin:auto for the block elements you want centered in the page..

The elements that require it are #navmenus and #content, so

#navmenus
{
    background-color:#14B3F7;
    width:900px;
    margin:0 auto;   
}

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin:0 auto;
}

Upvotes: 3

Fenton
Fenton

Reputation: 250922

I would update the CSS for the content area to this:

#content
{
    width:900px;
    background-color:#ffffff;
    height:1300px;
    margin: 0 auto;
}

Using the margin will center this element, rather than trying to use text-align on the parent element.

Upvotes: 0

Related Questions