footbag #content .inner h2 border problem in IE6

**samfromoz** · May 22, 2007 22:44

Hi

firstly sorry if this has been covered, please point me to the thread if it has.

I have just completed the two column layout and the border below recent features has gone.

If i remove the 100% width from #main it comes back.

Both the page and the style sheet are valid and I have added the peekaboo fixes to #mainfeature and #header-bottom.

Am I missing something here?

here is my stylesheet:

Code:

body {
margin: 0;
padding: 0;
background-color: #050845;
color: white;
background-image: url(img/bg.jpg);
background-repeat: repeat-x;
font: small Arial, Helvetica, Verdana, sans-serif;
}
#wrapper {
background-color: #fdf8f2;
color: black;
margin: 30px 40px 30px 40px;
padding: 10px;
}
#header-bottom {
border-top: 1px solid #b9d2e3;
border-bottom: 1px solid #b9d2e3;
height: 1%;
}
#header-bottom ul {
margin: 0;
padding: 0;
padding: 0 30px 0 0;
text-align: right;
}
#header-bottom li {
display: inline;
background-color: #fdf8f2;
color: #050845;
}
#header-bottom a:link, #header-bottom a:visited {
text-decoration: none;
background-color: #fdf8f2;
color: #050845;
}
#tagline {
font-weight: bold;
background-color: #fdf8f2;
color: #050845;
font-style: italic;
margin: 0;
padding: 0 0 0 20px;
width: 300px;
float: left;
}
#ball {
position: absolute;
top: 110px;
right: 55px;
}
#main {
position: relative;
top: 0;
left: 0;
width: 100%;
margin-top: 10px;
}
#content {
margin: 0 240px 0 0;
border: 1px solid #b9d2e3;
background-color: white;
color: black;
}
#mainfeature {
background-image: url(img/mainimg.jpg);
background-repeat: no-repeat;
background-color: #112236;
color: white;
padding: 2em 2em 1em 200px;
height: 1%;
}
#mainfeature h2 {
margin: 0;
font-weight: normal;
font-size: 140%;
}
#mainfeature p {
font-size: 110%;
}
#mainfeature p.more {
margin-top: 0;
text-align: right;
}
#mainfeature p.more a:link, #mainfeature p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}
#content .inner{
margin: 10px 20px 10px 40px;
}
#content .inner h2 {
color: #245185;
padding-bottom: 0.2em;
border-bottom: 1px solid #b9d2e3;
font-size: 110%;
}
#content .inner ul.features {
margin: 0;
padding: 0;
list-style: none;
}
#content .inner h3 {
font-size: 130%;
}
#content .inner h3 a:link, #content .inner h3 a:visited {
color: #245185;
}
#content .inner p {
color: #666666;
font-size: 90%;
} 
#content .inner .features li img {
float: left;
margin: 0 5px 5px 0;
}
#content .inner p.author {
font-weight: bold;
}
#content .inner p.more{
margin-top: 0;
text-align: right;
}
#content .inner p.more a:link, #content .inner p.more a:visited{
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
font-size: 90%;
color: #1e4c82;
}
#sidebar {
position: absolute;
top: 0;
right: 0;
width: 220px;
background-color: #256290;
color: white;
margin: 0;
padding: 0;
}
#sidebar h3 {
font-size: 100%;
background-image: url(img/sidebar-header-bg.jpg);
background-repeat: no-repeat;
margin: 0;
padding: 0.2em 0 0.2em 10px;
font-weight: normal;
}
#sidebar .inner {
padding: 10px;
}
#sidebar ul {
list-style-image: url(img/more-bullet.gif);
margin-left: 0;
padding-left: 20px;
}
#sidebar p, #sidebar li {
font-size: 90%;
padding-left: 1.4em;
}
#sidebar ul a:link, #sidebar ul a:visited {
color: white;
}
#sidebar .date{
font-weight: bold;
}
#searchform .text {
width: 196px;
border: 1px solid #45bac0;
}
#searchform .searchbutton {
text-align: right;
margin-top: 4px;
}
#searchform .btn {
border: 1px solid #45bac0;
background-color: #256290;
color: white;
}
#sidebar .motm-image {
float: right;
margin: 0 30px 0 20px;
}
#sidebar p.more {
clear: right;
margin: 0 30px 0 0;
text-align: right;
}
#sidebar p.more a:link, #sidebar p.more a:visited {
color: white;
background-image: url(img/more-bullet.gif);
background-repeat: no-repeat;
background-position: center left;
padding-left: 14px;
}

and the html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Footbag Freaks</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="img/logo.gif" alt="Footbag Freaks" height="77" width="203" />
<div id="header-bottom">
<p id="tagline">Home of the Hack</p>
<ul>
<li><a href="">Contact Us</a> | </li>
<li><a href="">About Us</a> | </li>
<li><a href="">Privacy Policy | </a></li>
<li><a href="">Site Map</a></li>
</ul>
<img src="img/header-ball.gif" height="24" width="20" alt="" id="ball" />
</div> <!-- header-bottom -->
</div> <!-- header -->
<div id="main">
<div id="content">
<div id="mainfeature">
<h2>Simon Says</h2>
<p>Simon Mackie tells us how a change of shoes has given him new moves and a new outlook as the season apporaches.</p>
<p class="more"><a href="">Read More</a></p>
</div><!-- main feature -->

<div class="inner">
<h2>Recent Features</h2>
<ul class="features">
<li>
<h3><a href="">Head for the Hills: Is Altitude Training the Answer?</a></h3>
<img src="img/lachlan.jpg" alt="Lachlan Donald" height="48" width="35" />
<p class="author">Lachlan "Super Toe' Donald</p>
<p>ffsdfsds fdsfdsfd afsd sdfafsdsdfa sfdafsd fsda dfa sd.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">Hack up the Place: Freestylin' Super Tips</a></h3>
<img src="img/jules.jpg" alt="Jules Szemere" height="48" width="35" />
<p class="author">Jules 'Pony King' Szemere</p>
<p>sdasdfa fdssdf fsd fsdsfd fdsfsd sdfsdf dsf fsdfs afsd ffsda fsd.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">The Complete Black Hat Hacker's Survival Guide</a></h3>
<img src="img/mark.jpg" alt="Mark Harbottle" height="48" width="35" />
<p class="author">Mark 'Steel Tip' Harbottle</p>
<p>sdasdfa fdssdf fsd fsdsfd fdsfsd sdfsdf dsf fsdfs afsd ffsda fsd.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
<li>
<h3><a href="">Five Tricks You Didn't Even know You Knew</a></h3>
<img src="img/simon.jpg" alt="Simon Mackie" height="48" width="35" />
<p class="author">Simon 'Mack Daddy' Mackie</p>
<p>sdasdfa fdssdf fsd fsdsfd fdsfsd sdfsdf dsf fsdfs afsd ffsda fsd.</p>
<p class="more"><a href="">Full Story</a></p>
</li>
</ul>
</div> <!-- inner -->
</div> <!-- content -->
<div id="sidebar">
<div class="inner">
<h3>Site Search</h3>
<form method="post" action="" id="searchform">
<div>
<label for="keywords">Keywords</label>: 
<input type="text" name="Keywords" id="keywords" class="text"/>
</div>
<div class="searchbutton">
<input type="submit" name="btnSearch" id="btnSearch" class="btn" />
</div>
</form>
</div> <!-- inner -->
<div class="inner">
<h3>Coming Events</h3>
<ul>
<li><span class="date">10 Apr 06</span> -<br /><a href="">Seatlle Zone Qualifier</a></li>
<li><span class="date">13 Apr 06</span> -<br /><a href="">World Cup - Round 8</a></li>
<li><span class="date">21 Apr 06</span> -<br /><a href="">Footbag00M 05 -NY</a></li>
<li><span class="date">28 Apr 06</span> -<br /><a href="">WEPA AGM - Hong Kong</a></li>
<li><span class="date">3 May 06</span> -<br /><a href="">World Cup - Round 9</a></li>
</ul>
</div> <!-- inner -->
<div class="inner">
<h3>Move of the Month</h3>
<h4>The Outer Stall</h4>
<img src="img/sidebar-player.gif" alt="player demonstrating the outer stall move" height="110" width="60" class="motm-image" />
<p>fdssfd sdffsd fsdfsd sdf sdf sdffsd fsd.</p>
<p class="more"><a href="">more</a></p>
</div><!-- inner -->
</div><!-- Sidebar -->
</div> <!-- Main -->
</div> <!-- Wrapper -->
</body>
</html>

Thanks in advance

Sam