Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question 2nd/middle column in 3 column layout overlaps nav / footer divs in Firefox. Displays

    Hi All.

    Having a real problem with my CSS layout in that the middle column of the following is overlapping the divs below in Firefox

    http://www.barbaryonline.com/jw/mirror_rss/help.php

    If you look at this in IE, you will see it renders ok, but in Firefox, the main content area in the middle (2nd column) extends over the nav.

    Does anyone have any idea as to why this is happening, I'm completely bewildered!

    The CSS validates fine. I attach the css and html code below.

    thanks in advance!

    jon

    HTML
    Code:
    <!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" xml:lang="en" lang="en">
    <head>
    <title><?php print $page_title; ?></title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <!-- add your meta tags here -->
    
    <link href="css/my_layout.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <link href="css/patch_my_layout.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <div id="wrapper">
    
    <div id="page_margins">
    <a href="http://www.thinkbingocosy.com"> <img src="images/cosyhomepage/tbc_logo_h.jpg" alt="Think Bingo Cosy. Make yourself at home" style="float:left"/></a>
    <form id="mainForm" method="post" action="members.php" name="mainForm">
    <input id="form_action" type="hidden" value="LOGIN" name="form_action" />
    <div id="login">
    
    <div id="loginfields">
    <span>Username</span>
    <input class="textfield" type="text" name="Alias" tabindex="1" value="" />
    <span>Password</span>&nbsp;
    <input class="textfield" type="text" name="Password" tabindex="1" value="" />
    </div>
    <input id="submit" type="image" src="images/cosyhomepage/tbc_btn_go.gif" alt="Login" value="Submit" name="frm_login-submit"/>
    <div id="forgotten"><a href="">Forgotten Password?</a></div>
    </div>
    </form>
    <br style="clear:both" />
    
    <div id="topnav" class="nav">
    <div style="float:right"><img src="images/cosyhomepage/tbc_nav_right.gif" align="absmiddle" /></div>
    <div style="float:left"><img src="images/cosyhomepage/tbc_nav_left.gif" align="absmiddle"/></div>
    <ul>
    <li><a href="">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="" target="blank">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/specials.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/loyalty.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/winners.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/refer.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/help.php">Menu Item</a></li>
    </ul>
    </div>
    <!-- start: skip link navigation -->
    <a class="skip" title="skip link" href="#navigation">Skip to the navigation</a>
    <a class="skip" title="skip link" href="#content">Skip to the content</a>
    <!-- end: skip link navigation -->
    <div id="main">
    <div id="col1">
    <div id="col1_content" class="clearfix">
    <img src="images/cosyhomepage/tbc_phr_playnow_h.gif" />
    <div id="meet_cms" style="background-image:url(images/cosyhomepage/tbc_bg_meetcms_h.jpg)">
    
    </div>
    </div>
    </div>
    <div id="col2">
    <div id="col2_content" class="clearfix">
    <div id="centre_pink">
    <div id="centre_head">
    <h2>This is heading two</h2>
    <h3>This is header three</h3>
    
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi in metus at sapien ultricies tempus. Sed pulvinar. Cras ut nulla sit amet nunc blandit faucibus. Donec at odio. Duis pharetra consequat libero. Aenean erat mauris, facilisis a, consectetuer eget, molestie id, justo. Aliquam et leo id ligula auctor porta. Aliquam vitae elit. Integer tortor sem, tempor nec, gravida in, varius vel, nisl. Donec consequat neque quis nibh. </p>
    <p>Phasellus ut augue in augue vehicula ullamcorper. Pellentesque dictum. Vivamus blandit sapien sed metus. Pellentesque vel quam. Proin tincidunt enim ut justo. Etiam cursus, magna eget mollis tristique, eros erat ornare sem, vitae vestibulum orci neque vel dui. Nullam fringilla justo. Vivamus vitae metus. Maecenas lacinia interdum odio. Donec egestas quam eu quam. Donec imperdiet auctor justo. </p>
    
    <ol>
    <li>list item in an ordered list</li>
    <li>list item in an ordered list</li>
    <li>list item in an ordered list</li>
    </ol>
    
    <ul>
    <li>list item in an unordered list</li>
    <li>list item in an unordered list</li>
    <li>list item in an unordered list</li>
    </ul>
    
    <table id="Table1" width="100%" cellspacing="0" cellpadding="3" border="0" align="center">
    <tr>
    <th width="50%"> Points</th>
    <th>Reward</th>
    </tr>
    <tr>
    <td>1,000 PP's</td>
    <td>£1 added to your account</td>
    </tr>
    <tr>
    <td>1,000 PP's</td>
    <td>£1 added to your account</td>
    </tr>
    </table>
    </div>
    </div>
    <img src="images/cosyhomepage/tbc_main_footer.gif" />
    <!-- <div id="family">
    <img src="images/cosyhomepage/tbc_hdg_thinkfamily.gif" alt="Also part of the Think Family" style="margin-bottom:11px" />
    <img src="images/cosyhomepage/tbc_thinklogo.gif" alt="Think Bingo" style="float:left; margin-left:12px" />
    <img src="images/cosyhomepage/tbc_scotlandlogo.gif" alt="Bingo Scotland" style="float:right; margin-right:12px" />
    <br style="clear:both" />
    </div>-->
    
    </div>
    </div>
    <div id="col3">
    <div id="col3_content" class="clearfix">
    <img src="images/cosyhomepage/tbc_bg_testimonials_h.jpg" />
    <div id="forum" style="background-image:url(images/cosyhomepage/tbc_phr_forum_h.jpg)">
    
    </div>
    </div>
    <!-- IE Column Clearing -->
    <div id="ie_clearing"> * </div>
    </div>
    </div>
    <div id="bottomnav" class="nav">
    <div style="float:right"><img src="images/cosyhomepage/tbc_nav_right.gif" align="absmiddle" /></div>
    <div style="float:left"><img src="images/cosyhomepage/tbc_nav_left.gif" align="absmiddle"/></div>
    <ul>
    <li><a href="/skin/contact.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/terms.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/aboutus.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/affilate.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/privacy.php">Menu Item</a></li><img src="images/cosyhomepage/tbc_nav_divider.jpg" class="pipe" align="absmiddle"/>
    <li><a href="/skin/links.php">Menu Item</a></li>
    
    </ul>
    </div>
    
    </div>
    </div>
    </div>
    </body>
    </html>
    CSS
    Code:
    @charset "UTF-8";
    /**
    * "Yet Another Multicolumn Layout" - (X)HTML/CSS framework
    * (en) stylesheet for screen layout
    * (de) Stylesheet für das Bildschirm-Layout
    *
    * @creator YAML Builder V1.0.1 (http://builder.yaml.de)
    * @file basemod.css
    */
    
    @media screen, projection
    {
    /*-------------------------------------------------------------------------*/
    
    /* (en) Marginal areas & page background */
    /* (de) Randbereiche & Seitenhintergrund */
    a img {border:0px}
    body { background: #ff7da9 url("../images/cosyhomepage/tbc_pinkbg.jpg") repeat-x;margin:0px 0px;font-family:Arial,Helvetica,sans-serif;}
    body, input, textarea, select {font-family:Verdana,Arial,Helvetica,sans-serif;}
    #wrapper {margin:0 auto; width:946px; background:url(../images/cosyhomepage/tbc_bg_clouds.jpg) no-repeat; min-height:435px;}
    /* Layout Alignment | Layout-Ausrichtung */
    #page_margins { margin: 0 auto; }
    
    /* Layout Properties | Layout-Eigenschaften */
    #page_margins { width: 780px; margin:0 auto }
    #main { padding-top:15px }
    #footer { padding: 10px 20px; color:#666; background: #f9f9f9; border-top: 5px #efefef solid; }
    
    /*-------------------------------------------------------------------------*/
    
    /**
    * (en) Formatting content container
    * (de) Formatierung der Inhalts-Container
    *
    */
    
    #col1 { float: left; width: 173px; margin:0 }
    #col2 { float: left; width: 435px; margin:0 }
    #col3 { width: auto; margin: 0 0 0 608px}
    #col1_content { }
    #col2_content { }
    #col3_content { padding-left:15px }
    
    /*-------------------------------------------------------------------------*/
    .skip {display:none}
    
    /* login */
    #login {float:right; margin-left:220px; margin-bottom:20px; background:url(../images/cosyhomepage/tbc_bg_login.jpg) no-repeat; width:150px; height:140px;color:#FFF; font-size:11px}
    #submit {margin:2px 0px;float:right; margin-right:12px}
    #loginfields {padding-left:5px; margin-top:40px }
    #login .textfield {border-top:1px solid #333333;font-size:0.9em;height:13px;padding:1px;width:63px;}
    #loginfields .textfield, #loginfields span {margin:2px 0px}
    #forgotten {clear:both; padding-left:5px}
    #forgotten a{font-size:smaller; text-decoration:none; color:#FFF}
    #forgotten a:hover {text-decoration:underline}
    /* nav */
    .nav {text-align:center; height:29px; background:url(../images/cosyhomepage/tbc_nav_slice.jpg) repeat-x; width:766px; margin-left:7px}
    .nav ul li {display:inline}
    .nav img.pipe {padding:0pt 8px 0pt 12px;}
    .nav ul {padding:4px 0px 0px 4px}
    .nav ul li a {color:#FFFFFF;font-family:Verdana,Arial,sans-serif;font-size:0.9em;font-weight:bold;text-decoration:none;}
    .nav ul li a:hover {border-bottom:#FFF 1px dotted}
    #topnav img.pipe {padding:0pt 10px 0pt 14px;}
    #bottomnav .nav ul {font-size:smaller; padding:8px 0px 0px 4px}
    #bottomnav {font-size:smaller;}
    
    
    /*left */
    #meet_cms {background:url(../images/cosyhomepage/tbc_bg_meetcms.jpg) no-repeat; min-height:210px; margin:15px 0px 0px 7px}
    
    /* middle */
    #centre_pink {width:435px; background:url(../images/cosyhomepage/tbc_main_slice.jpg) repeat-y; }
    #centre_head {background:url(../images/cosyhomepage/tbc_bg_main.gif) no-repeat; }
    
    #family {text-align:center; width:302px; margin:13px auto 0 auto}
    
    /* right */
    #forum {background:url(../images/cosyhomepage/tbc_phr_forum.jpg) no-repeat; margin-top:15px; min-height:210px}
    
    /* footer */
    #cards {margin-top:8px}
    #seo_footer {width:474px; color:#f5436d; margin:18px auto 22px auto
    ; font-size:0.8em; font-weight:bold; text-align:center}
    #seo_footer h3, #seo_footer p {font-size:0.9em; font-weight:bold; text-align:center}
    }

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    this should work

    Code:
      #bottomnav {font-size:smaller; clear:both;}
    You should make a habit of clearing the floats on your footer.

  • Users who have thanked jcdevelopment for this post:

    jwhittlestone (07-08-2008)

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh brilliant, i cant see how i missed that one out,

    thanks a lot JC!

    jon

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    no problem man, i know you may not be done, but just a friendly reminder that you have a few validation errors

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I clear the footer, but it floats to the middle of the navigation.

    container
    header
    navigation
    content
    footer

    Navigation is float left, content is float left to be besides it. Footer has a clear both to go below both navigation and content. When content is very small, footer goes under it and appears inside of navigation.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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