IE Divs not lining up.

Forum Moderators: not2easy

Message Too Old, No Replies

IE Divs not lining up.

highenergy

8:39 pm on Apr 21, 2012 (gmt 0)

I have a simple 3 Colum CSS that is used to position simple graphic elements. E.g. Header.jpg, colleft.jpg, colright.jpg with a content area in the middle and footer. In IE the header does not line up correctly with the left and right columns. IT works fine in FF and Chrome.

I have tried these hacks. Any suggestion would be much appreciated.

display:block;
.imgContainer {font-size:0;}

rainborick

4:10 am on Apr 22, 2012 (gmt 0)

You haven't given enough information to really help, but there are some simple things. First, do you have a complete <!DOCTYPE> statement so that browsers are set to Standards Compliance Mode? Second, set all of the affected elements to margin:0; padding:0; to override the default settings in the different browsers. If that doesn't help show where the problem lies, post the code. Good luck!

highenergy

8:52 am on Apr 22, 2012 (gmt 0)

Thanks for the help. Code is below:

CSS

#container
{
margin: 0 auto;
width: 918px;
background: #fff;
}
#header
{
padding: 0px;
line-height: 0px;
}
#content-container
{
background-color:#FFFFFF;
float: left;
width: 918px;
padding: 0px;
}
#section-navigation
{
float: left;
width: 103px;
padding: 0px;
}
#content
{
float: left;
width: 600px;
padding: 0px 0;
margin: 0 0 0 30px;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 106px;
padding: 0px;
}
#aside h3 { margin: 0; }
#footer
{
}
.img{
display:block;
}
.imgContainer {font-size:0;
}
.imgformat {
padding-top:0px;
padding-bottom:20px;
padding-right:20px;
padding-left:0px;
}
p{font-family:"Arial", Arial, serif;
font-size:14px;
}

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">/*
<body background="images/bg.jpg">
<div id="container">
<div id="header">
<div class="imgContainer">
<img class=”img” src="images/top.jpg" />
</div>
</div>
<div id="content-container">
<div id="section-navigation">
<div class="imgContainer">
<img class=”img” src="images/right_bor.jpg" />
</div>
</div>
<div id="content">
<img src="images/pic_1.jpg"><br /><br />
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/w_top.jpg" width="653" height="8" alt=""></td>
</tr>
<tr>
<td bgcolor="#88002b" width="645" height="25" style="text-align:center; color:#FFFFFF; font-size:19px;"><font size="4"><font face="Arial, Tahoma, Times New Roman">Example</font></font></td>
</tr>
<tr>
<td><img src="images/w_bottom.jpg" width="653" height="8" alt=""></td>
</tr>
</table>
<br />
<img class="imgformat" src="images/gch.jpg" align="left">
<p>Welcome</p><p>
Based in example place. I look forward to working with you.</p><div align="center"><a href="http://example.com/g/g.php?a=s&i=g25-39769-37"><img alt="Guestbook" border=0 src="http://example.com/b/gb_80x40.gif" width="80" height="40"></a></div><br /><br />
<table width="0" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/example.jpg" width="146" height="129"></td>
<td width="25"></td>
<td valign="top" style="padding-top:12px;"><font size="3"><font face="Arial, Tahoma, Times New Roman">Welcome.<br /><br />Based in example place.</font></font>
</tr>
</table>
<div align="center"><h3><u>Example</u></h3></div>
<p>Example text.</p>
<div align="center"><h3><u>Treatments</u></h3></div>
<p>Treatments facilitate healing.</p>
</p>
<img src="images/line.jpg" width="400" height="1" alt="" />
</div>
<div id="aside">
<div class="imgContainer">
<img class=”img” src="images/left_bor.jpg" />
</div>
</div>
<div id="footer">
<div class="imgContainer">
<img class=”img” src="images/fotter_bor.jpg" />
</div>
</div>
</div>
</div>
</body>

[edited by: alt131 at 9:01 pm (utc) on Apr 26, 2012]
[edit reason] Thread Tidy - Examplifying [/edit]