CSS issues that I dont understand
Take a look at http://keramed.com in IE and FireFox.
In FireFox, it looks how I would expect. In IE, the main block is much further down and I don't see it.
Here is the CSS:
div#BoxHouse {
margin-left: 0px; /* 72 */
margin-right: 25px;
}
div.FloatingBox {
text-align: center;
float: left;
width: 205px;
border: 1px solid #6C5C3B;
padding: 0px 0px 5px 0px;
background-image: url(transwhite.png);
margin-left: 0.5em;
margin-bottom: 30px;
}
div.FloatingContent {
text-align: center;
float: left;
width: 90%;
border: 0px solid #6C5C3B;
padding: 0px;
background-image: url(transwhite.png);
margin-left: 0.5em;
}
#content {
width: 90%;
height: auto;
background: url(transwhite.png);
border: 1px solid #3F4933;
margin-left: 35px; /* 72 */
margin-right: 20px;
margin-top: 8px;
margin-bottom:20px;
padding: 5px 0px 5px 0px;
z-index: 1;
overflow:auto;
top: 5em;
padding-top: 5px;
}
#leftnavigation {
position : fixed;
height : auto;
top : 10%;
left : 0;
width : 30%; /* 40 */
margin : 0px 0px 0px 1px;
color : #000000;
padding : 0px;
overflow : auto;
}
#columncontent {
position : fixed;
top : 10%;
bottom : 100px;
margin : 40px 0px 0px 220px;
width : 80%;
height : auto;
padding-left : 5px;
padding-right : 12px;
color : #000000;
border-left : 1px solid #6C5C3B;
overflow : auto;
}
The code is:
<div id="leftnavigation">
<开发者_高级运维;div id="BoxHouse">
<br /><br /><br /><br /><br />
<div id="Box1" class="FloatingBox">
<span class="legend"><a name="announcements">Announcements</a></span>
<?php include 'announcements.inc'; ?>
</div>
<br /><br /><br /><br /><br /><br />
<div id="Box2" class="FloatingBox">
<span class="legend"><a name="news">News</a></span>
<?php include 'othernews.inc'; ?>
</div>
<br /><br />
</div>
</div>
<div id="columncontent">
<br />
<div class="FloatingContent">
<div id="container">
<!-- Main tabs across the top -->
<ul>
<li><a href="#Home"><span>Home</span></a></li>
<li><a href="#Products"><span>Products</span></a></li>
<?php
if ($_SESSION['ALLOWORDERING'] == "TRUE")
{ ?>
<li><a href="#Ordering"><span>Ordering</span></a></li>
<?php } ?>
<li><a href="#AboutMain"><span>About KeraMed</span></a></li>
<li><a href="#MyKeramed"><span>My KeraMed</span></a></li>
</ul>
</div>
</div>
</div>
I don't know why this is the case!
You have no Doctype, this triggers Quirks Mode, which causes browsers to behave inconsistently. It is considerably harder to deal with layout issues between browsers in Quirks mode.
Add a Doctype that triggers Standards (AKA Strict) Mode and validate your HTML. This might not resolve all your issues, but (as Pekka says) it is the most sensible starting point for doing so.
I'd recommend:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
It would also be wise to ditch the layout tables, abuse of multiple <br> elements as margins, and other presentational markup.
加载中,请稍侯......
精彩评论