melzee
05-22-2008, 08:56 AM
Hi,
Hoping someone here can help me...
I have a 3 column layout that is working fine in all major browsers - pc / mac with the exception of (drumroll) ie 6/7. For some reason ie is adding in heaps of vertical space above the content and a few px below.
You can see the results here:
http://browsershots.org/screenshots/bf87fc52503db7775b86e57a4ff2374e/
The css looks like this:@charset "UTF-8";
html,body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#828282;
margin: 0;
padding: 0;
text-align: center;
}
.thrColFix #container {
width: 1000px;
margin: 0 auto;
text-align: left;
position:relative;
padding:0px;
background:#FFFFFF;
}
.thrColFix #sidebar1 {
float: left;
width: 300px;
padding: 0px 0px 0px 0px;
}
.thrColFix #sidebar2 {
float: right;
width: 335px;
padding:0px;
}
.thrColFix #mainContent {
margin: 0 330px;
padding: 0 10px;
background-color:#ffffff;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
.nav{
padding-right:20px;
position:absolute;
top:166px;
padding:0px;
left:165px;
text-align:right;
color:#8c8c8c;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height:20px;
}
.nav #current{
color:#ee402d;
}
.thrColFix #firstthing {
position:absolute;
top:166px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #products {
position:absolute;
top:209px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #ordering {
position:absolute;
top:250px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
height:200px;
}
.thrColFix #benefits01 {
position:absolute;
top:230px;
left: 304px;
bottom:600px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
height: 270px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #benefits {
position:absolute;
top:225px;
left: 304px;
bottom:600px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
height: 270px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #benefits p {
line-height:13px;
}
.thrColFix #howitworks {
position:absolute;
top:189px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #contact {
position:absolute;
top:270px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #heading{
color:#3f3f3f;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
}
.nav a:hover{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
.nav a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
.nav a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ee402d;}
a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ee402d;}
#contact a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#contact a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#benefits01 a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#benefits01 a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}and 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>first thing - breakfast cereal</title>
<link href="firstthing.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body class="thrColFix">
<br /><br />
<div id="container">
<div id="sidebar1">
<img src="images/logo.gif" alt="first thing" />
<div class="nav">
<a href="index.html">first things first</a><br />
<a href="howitworks.html">how it works</a><br />
<a href="products.html">products</a><br />
<a href="benefits.html">benefits</a><br />
<a href="ordering.html">ordering</a><br />
<span id="current">contact</span><br />
</div>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<img src="images/right.jpg" width="335" height="500" />
<!-- end #sidebar2 --></div>
<div id="mainContent">
<div id="contact">
<a href="mailto:xxxx-xxxx.com.au">info@xxx-xxxxx.com.au</a><br />
first thing breakfast cereal<br />
xx xxx xxxx<br />
Brighton VIC 3186<br />
t. xx3 9xxx xxxx<br />
f.03 xxxx xxxx/div>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>
If anyone can shed some light on the matter it would save me a few grey hairs.
Thanks in advance!
Melissa
Hoping someone here can help me...
I have a 3 column layout that is working fine in all major browsers - pc / mac with the exception of (drumroll) ie 6/7. For some reason ie is adding in heaps of vertical space above the content and a few px below.
You can see the results here:
http://browsershots.org/screenshots/bf87fc52503db7775b86e57a4ff2374e/
The css looks like this:@charset "UTF-8";
html,body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#828282;
margin: 0;
padding: 0;
text-align: center;
}
.thrColFix #container {
width: 1000px;
margin: 0 auto;
text-align: left;
position:relative;
padding:0px;
background:#FFFFFF;
}
.thrColFix #sidebar1 {
float: left;
width: 300px;
padding: 0px 0px 0px 0px;
}
.thrColFix #sidebar2 {
float: right;
width: 335px;
padding:0px;
}
.thrColFix #mainContent {
margin: 0 330px;
padding: 0 10px;
background-color:#ffffff;
}
.fltrt {
float: right;
margin-left: 8px;
}
.fltlft {
float: left;
margin-right: 8px;
}
.clearfloat {
clear:both;
height:0px;
font-size: 1px;
line-height: 0px;
}
.nav{
padding-right:20px;
position:absolute;
top:166px;
padding:0px;
left:165px;
text-align:right;
color:#8c8c8c;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;
line-height:20px;
}
.nav #current{
color:#ee402d;
}
.thrColFix #firstthing {
position:absolute;
top:166px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #products {
position:absolute;
top:209px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #ordering {
position:absolute;
top:250px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
height:200px;
}
.thrColFix #benefits01 {
position:absolute;
top:230px;
left: 304px;
bottom:600px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
height: 270px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #benefits {
position:absolute;
top:225px;
left: 304px;
bottom:600px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
height: 270px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #benefits p {
line-height:13px;
}
.thrColFix #howitworks {
position:absolute;
top:189px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #contact {
position:absolute;
top:270px;
left: 304px;
width: 327px;
padding-right:30px;
color:#8c8c8c;
font-size:12px;
padding-top:0px;
font-family:Arial, Helvetica, sans-serif;
}
.thrColFix #heading{
color:#3f3f3f;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
}
.nav a:hover{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
.nav a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
.nav a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:18px; color:#8c8c8c;}
a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ee402d;}
a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ee402d;}
#contact a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#contact a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#benefits01 a:link{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}
#benefits01 a:visited{text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#8c8c8c;}and 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>first thing - breakfast cereal</title>
<link href="firstthing.css" rel="stylesheet" type="text/css" />
</style>
</head>
<body class="thrColFix">
<br /><br />
<div id="container">
<div id="sidebar1">
<img src="images/logo.gif" alt="first thing" />
<div class="nav">
<a href="index.html">first things first</a><br />
<a href="howitworks.html">how it works</a><br />
<a href="products.html">products</a><br />
<a href="benefits.html">benefits</a><br />
<a href="ordering.html">ordering</a><br />
<span id="current">contact</span><br />
</div>
<!-- end #sidebar1 --></div>
<div id="sidebar2">
<img src="images/right.jpg" width="335" height="500" />
<!-- end #sidebar2 --></div>
<div id="mainContent">
<div id="contact">
<a href="mailto:xxxx-xxxx.com.au">info@xxx-xxxxx.com.au</a><br />
first thing breakfast cereal<br />
xx xxx xxxx<br />
Brighton VIC 3186<br />
t. xx3 9xxx xxxx<br />
f.03 xxxx xxxx/div>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- end #container --></div>
</body>
</html>
If anyone can shed some light on the matter it would save me a few grey hairs.
Thanks in advance!
Melissa