Check out this page in FF and IE:
<!-- m --><a class="postlink" href="http://www.hermitshut.com/OutdoorUnderground/">http://www.hermitshut.com/OutdoorUnderground/</a><!-- m -->
See the difference? It looks as if that top title container is not properly "clearing" to the right.
Here's the CSS:
div.titlecontainer
{
position: relative;
float: left;
clear: right;
left: 0px;
top: 15px;
width: 60%;
}
.mainbox
{
position: relative;
float: left;
clear: right;
width: 70%;
background-color: #CCCCCC;
border-bottom: 5px solid #666666;
border-right: 5px solid #666666;
}
and the html...
<html>
<head>
<title>Hermit's Hut | Outdoor Underground</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"oumainstyle.txt" />
</head>
<body>
<div class="bodywrap">
<div class="pageinfo">
<i class="header">Site Info</i>
<br>
Page Created: 01/21/06
<br>
Last Updated: 01/27/06
<br>
Author: <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]?subject=RE: Outdoor Underground">Anthony Corbelli</a>
<br>
Tech: CSS, HTML, PHP
<br>
</div>
<div class="titlecontainer">
<div class="titlebar">
Outdoor Underground
</div>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
</div>
<div class="linkbox">
<div class="title">Quick Links</div>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a>
</div>
<div class="mainbox">
<div class="title">News and Other Things</div>
<div class="sub">
<p>This is an area for us to write notes and things on what is going on. We can put a lot of information in here, so keep checking back.</p>
<p>These are paragraphs.</p>
</div>
<div class="sub">
<p>Here is another sub-container within the original.</p>
</div>
</div>
</div>
</body>
</html>
Any ideas? Anything I'm doing that has a better idea?Have you tried it with a valid doctype?Yep. It's even got the validator link on there now.
<!-- m --><a class="postlink" href="http://www.hermitshut.com/OutdoorUnderground/Wrap">http://www.hermitshut.com/OutdoorUnderground/Wrap</a><!-- m --> a <div style="clear:both"> around linkbox and mainbox.
Change the css:
body
{
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top right;
font-size: 12pt;
font-style: normal;
font-family: sans-serif;
}
div.bodywrap
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
div.pageinfo
{
float: left;
clear: left;
left: 0px;
top: 15px;
width: 20%;
border-bottom: 3px solid #333333;
border-right: 3px solid #333333;
margin: 0px 15px 35px 5px;
background-color: #CCCCCC;
text-align: center;
font-size: 9pt;
font-weight: bold;
}
div.titlecontainer
{
float: left;
clear: right;
left: 0px;
top: 15px;
width: 60%;
}
div.titlebar
{
float: none;
clear: both;
border: 3px solid #333333;
background-color: #CCCCCC;
text-align: center;
font-size: 22pt;
font-weight: bold;
color: #FFFFFF;
}
a.toptab
{
float: left;
top: 0px;
left: 0px;
background-color: #CCCCCC;
border-bottom: 3px solid #666666;
border-right: 3px solid #666666;
border-top: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
margin-right: 3px;
color: #660000;
font-weight: bold;
font-size: 10px;
}
a.toptab:hover
{
border: 3px solid #666666;
}
.header
{
color: #660000;
}
div.linkbox
{
float: left;
width: 25%;
margin-right: 15px;
background-color: #CCCCCC;
border-bottom: 3px solid #333333;
border-right: 3px solid #333333;
}
div div.title
{
float: none;
width: 100%;
clear: both;
color: #660000;
text-align: center;
border-bottom: 1px solid #000000;
font-weight: bold;
font-style: italic;
}
div.mainbox div.title
{
font-size: 14pt;
}
div.linkbox a
{
color: #660000;
font-weight: bold;
font-size: 10pt;
clear: both;
float: left;
}
.mainbox
{
float: left;
width: 70%;
background-color: #CCCCCC;
border-bottom: 5px solid #666666;
border-right: 5px solid #666666;
}
div.mainbox div.sub
{
float: left;
width: 90%;
left: 5%;
background-color: #FFFFFF;
border-bottom: 2px dashed #666666;
border-right: 2px dashed #666666;
margin: 5px;
-moz-opacity: 0.75;
filter: alpha(75);
}
div.sub p
{
text-indent: 4px;
}
.valid
{
float: none;
clear: both;
}
All those position:relative declarations are unnecessary.Hmm, that would work. And so would appending a br after the titlecontainer. Grr.
position:relative is unnecessary but I was under the impression it was good to declare? Then again, so is background-color but I only do that in parents. Good idea, thanks Fang.
Anyone know why IE renders this so strangely? It's almost as if it doesn;t display floating containers in the proper order.Anyone know why IE renders this so strangely? (<!-- m --><a class="postlink" href="http://www.howtocreate.co.uk/wrongWithIE/">http://www.howtocreate.co.uk/wrongWithIE/</a><!-- m -->)I know that IE renders things improperly compared to standards, I was curious as to why. Y'know, how it handles floating elements and their placement order. Something more about how the engine works so next time I can design with this in mind and not have to introduce an interesting "hack" to get it to work.On having layout (<!-- m --><a class="postlink" href="http://www.satzansatz.de/cssd/onhavinglayout.html">http://www.satzansatz.de/cssd/onhavinglayout.html</a><!-- m -->)
<!-- m --><a class="postlink" href="http://www.hermitshut.com/OutdoorUnderground/">http://www.hermitshut.com/OutdoorUnderground/</a><!-- m -->
See the difference? It looks as if that top title container is not properly "clearing" to the right.
Here's the CSS:
div.titlecontainer
{
position: relative;
float: left;
clear: right;
left: 0px;
top: 15px;
width: 60%;
}
.mainbox
{
position: relative;
float: left;
clear: right;
width: 70%;
background-color: #CCCCCC;
border-bottom: 5px solid #666666;
border-right: 5px solid #666666;
}
and the html...
<html>
<head>
<title>Hermit's Hut | Outdoor Underground</title>
<link rel="stylesheet" type="text/css" href=http://www.webdeveloper.com/forum/archive/index.php/"oumainstyle.txt" />
</head>
<body>
<div class="bodywrap">
<div class="pageinfo">
<i class="header">Site Info</i>
<br>
Page Created: 01/21/06
<br>
Last Updated: 01/27/06
<br>
Author: <a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]?subject=RE: Outdoor Underground">Anthony Corbelli</a>
<br>
Tech: CSS, HTML, PHP
<br>
</div>
<div class="titlecontainer">
<div class="titlebar">
Outdoor Underground
</div>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
<a class="toptab" href=http://www.webdeveloper.com/forum/archive/index.php/"#">On-Site Link</a>
</div>
<div class="linkbox">
<div class="title">Quick Links</div>
<br>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 1</a>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link 2</a>
</div>
<div class="mainbox">
<div class="title">News and Other Things</div>
<div class="sub">
<p>This is an area for us to write notes and things on what is going on. We can put a lot of information in here, so keep checking back.</p>
<p>These are paragraphs.</p>
</div>
<div class="sub">
<p>Here is another sub-container within the original.</p>
</div>
</div>
</div>
</body>
</html>
Any ideas? Anything I'm doing that has a better idea?Have you tried it with a valid doctype?Yep. It's even got the validator link on there now.
<!-- m --><a class="postlink" href="http://www.hermitshut.com/OutdoorUnderground/Wrap">http://www.hermitshut.com/OutdoorUnderground/Wrap</a><!-- m --> a <div style="clear:both"> around linkbox and mainbox.
Change the css:
body
{
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: top right;
font-size: 12pt;
font-style: normal;
font-family: sans-serif;
}
div.bodywrap
{
background-color: #FFFFFF;
width: 100%;
height: 100%;
}
div.pageinfo
{
float: left;
clear: left;
left: 0px;
top: 15px;
width: 20%;
border-bottom: 3px solid #333333;
border-right: 3px solid #333333;
margin: 0px 15px 35px 5px;
background-color: #CCCCCC;
text-align: center;
font-size: 9pt;
font-weight: bold;
}
div.titlecontainer
{
float: left;
clear: right;
left: 0px;
top: 15px;
width: 60%;
}
div.titlebar
{
float: none;
clear: both;
border: 3px solid #333333;
background-color: #CCCCCC;
text-align: center;
font-size: 22pt;
font-weight: bold;
color: #FFFFFF;
}
a.toptab
{
float: left;
top: 0px;
left: 0px;
background-color: #CCCCCC;
border-bottom: 3px solid #666666;
border-right: 3px solid #666666;
border-top: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
margin-right: 3px;
color: #660000;
font-weight: bold;
font-size: 10px;
}
a.toptab:hover
{
border: 3px solid #666666;
}
.header
{
color: #660000;
}
div.linkbox
{
float: left;
width: 25%;
margin-right: 15px;
background-color: #CCCCCC;
border-bottom: 3px solid #333333;
border-right: 3px solid #333333;
}
div div.title
{
float: none;
width: 100%;
clear: both;
color: #660000;
text-align: center;
border-bottom: 1px solid #000000;
font-weight: bold;
font-style: italic;
}
div.mainbox div.title
{
font-size: 14pt;
}
div.linkbox a
{
color: #660000;
font-weight: bold;
font-size: 10pt;
clear: both;
float: left;
}
.mainbox
{
float: left;
width: 70%;
background-color: #CCCCCC;
border-bottom: 5px solid #666666;
border-right: 5px solid #666666;
}
div.mainbox div.sub
{
float: left;
width: 90%;
left: 5%;
background-color: #FFFFFF;
border-bottom: 2px dashed #666666;
border-right: 2px dashed #666666;
margin: 5px;
-moz-opacity: 0.75;
filter: alpha(75);
}
div.sub p
{
text-indent: 4px;
}
.valid
{
float: none;
clear: both;
}
All those position:relative declarations are unnecessary.Hmm, that would work. And so would appending a br after the titlecontainer. Grr.
position:relative is unnecessary but I was under the impression it was good to declare? Then again, so is background-color but I only do that in parents. Good idea, thanks Fang.
Anyone know why IE renders this so strangely? It's almost as if it doesn;t display floating containers in the proper order.Anyone know why IE renders this so strangely? (<!-- m --><a class="postlink" href="http://www.howtocreate.co.uk/wrongWithIE/">http://www.howtocreate.co.uk/wrongWithIE/</a><!-- m -->)I know that IE renders things improperly compared to standards, I was curious as to why. Y'know, how it handles floating elements and their placement order. Something more about how the engine works so next time I can design with this in mind and not have to introduce an interesting "hack" to get it to work.On having layout (<!-- m --><a class="postlink" href="http://www.satzansatz.de/cssd/onhavinglayout.html">http://www.satzansatz.de/cssd/onhavinglayout.html</a><!-- m -->)