SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    footbag #content .inner h2 border problem in IE6

    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
    Last edited by samfromoz; May 23, 2007 at 00:30.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Can you please post the HTML that goes along with this?

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sure thing,

    have edited top post and added it there

    thanks

    Sam


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •