CODEWITHSUNDEEP
htmlcssinternet-explorer
Orestes72
Orestes72

Reputation: 105

CSS div width in IE8

I'm very new to html and css so feel free to critique any bad practices you see in the code below...

I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. When view this page in chrome or firefox it looks great. When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file.

CSS:

body {
    font-family: Arial;
    font-size: small;
    background-color: #FFFFFF;
    background-image: url(../images/victorianBackground.jpg);
    background-position: top;
    background-repeat: repeat;
    color: #000000;
}
#container {
    margin: -10 auto;
    background-color: #D3CDBA;
    text-align: left;

}

html>body #container {
    width: 800px;
    min-height:800px;
    padding: 0 0px;
}

#banner {
    width:800px;
}

#banner img {   
    width:800px;    
    padding:45 0px;
}

#content {
    width:500px;
    padding: 15px;
    background-color: transparent;
}

/* Navigation */
#navigation ul {
    list-style-type: none;
    width: 800px;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;    
    background-color: #D3CDBA;
}
#navigation li:hover {
    float: left;    
    color: #4676A4;
    background-color: #D3CDBA;
}
#navigation a {
    font-weight: bold;
    text-decoration: none;
    color: #000000;
    display: block;
    padding: 5px;
}
#navigation a:hover {
    font-weight: bold;
    text-decoration: none;  
    color: #992332;
}

#content a {    
    color:teal;
}

HTML:

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Park Avenue Neighborhood Association</title>
        <meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
        <link rel="stylesheet" type="text/css" href="../styles/style1.css">
    </head>

    <body>

<div id="container">

        <div id="banner">
            <img src="../images/banner.jpg" id="banner">
            <br/>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="History.html">History</a></li>
                <li><a href="Houses.html">Houses</a></li>
                <li><a href="LocalBusiness.html">Local Business</a></li>
                <li><a href="events.html">Events</a></li>
                <li><a href="Contacts.html">Contacts</a></li>
            </ul>
        </div>

<div id="content">

<h2>Content Header 1 </h2>

<p>Awesome Content </p>

<h2>Content Header 2 </h2>

<p>Awesome Content </p>

</div>

    </body>
</div>
</html>

Upvotes: 2

Views: 12539

Answers (3)

thedz
thedz

Reputation: 5572

There are multiple issues I see with your source. Non-exhaustive list:

1) You need a doctype. Otherwise, browsers will render items in a non-standard way.

Example:

 <!DOCTYPE HTML PUBLIC 
 "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

2) You have a <div> ending after the </body> tag. This is invalid.

Fix:

 <p>Awesome Content </p>
 </div>
 </div>
 </body>     
 </html>

3) You don't need the extra <br> in <div id="banner">.

Fix:

 <div id="banner">
      <img src="../images/banner.jpg" id="banner">
 </div>

4) Now, if you want <div id="container"> to be centered and have a width of 800px, try the following.

Centering code that goes in your css (replaces existing):

 body { text-align: center; }

 #container { 
      text-align: left; 
      width: 800px; 
      margin: auto;
 }

5) For your font-size declaration, you're using small. This will behave unpredictably. Instead, consider using either em or px for font size.

Font size with em:

 body { font-size: 100%; line-height: 1.125em; }
 #container { font-size: 0.875em; }

Font size with px:

 body { font-size: 16px; line-height: 1.125em; }
 #container { font-size: 12px; }

Upvotes: 8

vector
vector

Reputation: 7566

In regard to centering the banner, try adding the following:

in body selector:

text-align: center;

in banner:

margin-right: auto; margin-left: auto;

In regard to font size try using em or % sizing.

Other than that just tackle the problems one at a time, fine tune the details incrementally. Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you.

Upvotes: 2

Jason Berry
Jason Berry

Reputation: 2469

First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

Upvotes: 3

Related Questions