...

View Full Version : 2nd/middle column in 3 column layout overlaps nav / footer divs in Firefox. Displays



jwhittlestone
07-08-2008, 03:56 PM
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


<!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


@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}
}

jcdevelopment
07-08-2008, 03:59 PM
this should work



#bottomnav {font-size:smaller; clear:both;}


You should make a habit of clearing the floats on your footer.

jwhittlestone
07-08-2008, 04:05 PM
oh brilliant, i cant see how i missed that one out,

thanks a lot JC!

jon

jcdevelopment
07-08-2008, 04:10 PM
no problem man, i know you may not be done, but just a friendly reminder that you have a few validation errors (http://validator.w3.org/check?verbose=1&uri=http&#37;3A%2F%2Fwww.barbaryonline.com%2Fjw%2Fmirror_rss%2Fhelp.php)

jerry62704
07-08-2008, 05:17 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum