PDA

Click to See Complete Forum and Search --> : IE kept render weird page while file validated against XHTML strict mode successfully

sirpelidor
04-27-2008, 02:47 AM
Hi, I've been pulling my hair on this and can't figure out what i did wrong, please help.

the following layout works in FF, but in IE it'll show a extra div tag which I have no idea where that came from.

I even validate both xhtml and css against w3c and it said there's no errors. I hope I don't need IE hack for such a simple layout.

Thank you


<!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" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
select, textarea {
font-size: 100%;
}
div#outter {
margin: auto;
width: 1245px;
height: 100%;
}
div#leftColumn{
margin-top: 30px;
width: 200px;
float: left;
margin-right: 15px;
}
div#centerColumn{
margin-top: 30px;
float: left;
width: 815px;
}
div#rightColumn{
margin-top: 30px;
float: left;
width: 200px;
margin-left: 15px;
}
div.panels{
border-style: solid;
border-width: 0.5pt;
border-color: red;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="outter">
<div id="leftColumn">
<div class="panels"><p>panel: left one</p></div>
<div class="panels"><p>panel: left two</p></div>
<div class="panels"><p>search left three</p></div>
<div class="panels"><p>panel: left four</p></div>
</div><!-- end leftColumne -->

<div id="centerColumn">
<div class="panels"><p>panel: center one</p></div>
<div class="panels"><p>panel: center two</p></div>
<div class="panels"><p>panel: center three</p></div>
<div class="panels"><p>panel: center four</p></div>
<div class="panels"><p>panel: center five</p></div>
<div class="panels"><p>panel: center six</p></div>
</div><!-- end centerColumne -->

<div id="rightColumn">
<div class="panels" id="pnl_AboutYou"><p>panel: right one</p></div>
</div><!-- end rightColumne -->

</div><!-- end outter -->
</body>
</html>
mlim
04-27-2008, 07:48 AM
Try this,

<div id="rightColumn">
<div class="panels" id="pnl_AboutYou"><p>panel: right one</p></div>
<div></div>
</div><!-- end rightColumne -->
Centauri
04-27-2008, 08:30 AM
IE sometimes has problems when the total width of floated columns and margins exactly equals the container width. Instead of floating the right column left against the others, float it right without the margin - that way the total widths don't need to add up : div#rightColumn{
margin-top: 30px;
float: right;
width: 200px;
}