Header isn't displaying correctly in Internet Explorer???

**cturner01** · Jul 30, 2008, 15:37

In Internet Explorer the website which I am working on, doesn't display header correctly. However in Firefox it displays the header perfectly. Where the buttons are, at the bottom it isn't in line with the others. I have attached the both views in both browsers, for you to see what I am talking about. Please help me solve this problem asap. My css is here:

Code CSS:

.twoColFixLtHdr #container {
	width: 780px;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
} 
.twoColFixLtHdr #header { 
 
} 
.twoColFixLtHdr #greenSquare {
	float: left;
	background-color: #b2c62f;
	height: 174px;
   	/* width: 255px; */
}
.twoColFixLtHdr #greenSquaretxt {
	font-size: 30px;
	font-weight: bold;
	padding: 30px;
	text-align: center;
}
.twoColFixLtHdr #btns {
	/* width: 265px; */
	padding-bottom: 2px;
	float: left;
	background-color: #82c5f8;
}
.twoColFixLtHdr #rightheader {
	/* width: 280px; */
	float: right;
}

Here is how I have put the css into the web page:

Code HTML4Strict:

<div id="container">
<div id="header">
<span id="greenSquare"><div id="greenSquaretxt">SME
<br />Accounting</div></span>
<span id="btns">
<img src="images/homebtn.gif" width="262" height="43" alt="" border="0" /><br />
<a href=""><img src="images/servicesbtn.gif" width="262" height="43" alt="" border="0" /></a><br />
<a href=""><img src="images/staffprofilesbtn.gif" width="262" height="43" alt="" border="0" /></a><br />
<a href=""><img src="images/contactbtn.gif" width="262" height="43" alt="" border="0" /></a>
</span>
<span id="rightheader"><img src="images/photo.jpg" width="270" height="184" alt="" border="0" /></span>
</div>
</div>

Thanks in advance.

**tictike** · Jul 30, 2008, 19:18

I looked at both thumbnail screenshots. I don't see a difference. Do you have a link?

**Paul O'B** · Jul 31, 2008, 02:07

Hi,

I'm guessing that its the breaks between the images and the fact that the images are linline is giving you extra space.

Set the images to display:block and remove the breaks after those images.

e.g.

Code:

#btns img{display:block}

However your code is invalid and you can't nest spans around divs. The code is not very semantic either and makes no logical sense. If the SME Accounting is your main heading then use an H1 (or a suitable heading tag if its not the main heading tag).

The four links should be in a list as they are a list if links.

Only use divs when there is no suitable (semantic) html elements. Divs are logical dividers of sections and not just containers for everything, Most content has semantic meaning and there already exists an html element to convey that meaning so use it when you can.

As a rogh guide I would structure your section like this.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
a img{border:none}
#container {
    width: 780px;
    margin: 0 auto;
    text-align: left;
    overflow: hidden;
}
h1#greenSquare {
    float: left;
    background-color: #b2c62f;
    height: 114px;
    font-size: 30px;
    font-weight: bold;
    padding: 30px;
    text-align: center;
        margin:0;
}
* html h1#greenSquare{height:174px;he\ight:114px}

#btns {
    float: left;
  background-color: #82c5f8;
    margin:0;
    padding:0;
    list-style:none;
    height:174px;
    width:262px;
}
#btns li{float:left;clear:left}
#rightheader {
    float:left;
        margin:0;
}
#btns img{display:block}

</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1 id="greenSquare">SME <br />Accounting</h1>
        <ul id="btns">
            <li><img src="images/homebtn.gif" width="262" height="43" alt=""  /></li>
            <li><a href=""><img src="images/servicesbtn.gif" width="262" height="43" alt="" /></a></li>
            <li><a href=""><img src="images/staffprofilesbtn.gif" width="262" height="43" alt="" /></a></li>
            <li><a href=""><img src="images/contactbtn.gif" width="262" height="43" alt="" /></a></li>
        </ul>
        <p id="rightheader"><img src="images/photo.jpg" width="270" height="184" alt="" /></p>
    </div>
</div>
</body>
</html>

Of course the header is redundant but I guess you had something else going on there so I left in in place. Also I'm not sure the heights are correct as your last image height doesn't match the heights you gave for the other elements so I guess there's something else in there that you midded out.

Don't use ids for everything. Use ids for the main containers but for the inner elements you would mostly use classes and then the styles can be re-used if needed. Ids are mainly used to provide a logical structure to your page but if you use ids for everything then that structure is lost.

Hope that helps

The SitePoint Forums have moved.

User Tag List

Thread: Header isn't displaying correctly in Internet Explorer???

Thread Tools

Display

Header isn't displaying correctly in Internet Explorer???

Bookmarks

Bookmarks

Posting Permissions