container div not containing in FF

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

container div not containing in FF

Post by malcolmboston »

example: http://www.beingdyslexic.co.uk/example.php

css:

Code: Select all

#L2FAQWrap /* Total Width 278 */
 {
 float:left;
 position:relative;
 width:278px;
 padding: 0px;
 } 
#L2FAQ ul /* Total Width 278 */
 { 
 list-style: none;
 padding: 0px 0px 0px 0px; 
 margin: 0; 
 white-space: nowrap; 
 background: transparent;
 float: left; 
 width: 278px;
 }
  
#L2FAQ li /* Total Width 278 */
 {
 margin: 0; /*removes indent IE and Opera*/
 padding: 0; /*removes indent Mozilla and NN7*/
 list-style-type: none; /*turns off display of bullet*/
 width: 260px;
 padding: 4px 0px 4px 18px;
 background: url(images/bullet.gif) no-repeat 4px 7px ;
 border-bottom: 1px #FFF solid;
 text-align: left;
 } 

#L2FAQ a
 {
 width: 260px;
 text-decoration:none;
 color: #0033CC;
 } 

#L2FAQ a:hover
 { 
 color:#666; 
 } 
 
 .grey-box-300
 {
 position:relative;
 width:278px;
 padding: 10px;
 border: 1px solid #D3D3D3;
 margin-bottom: 10px;
 }
html:

Code: Select all

<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="example.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="grey-box-300" style=" background: #F4F7FF;">
  <div id="L2FAQWrap">
      <div id="L2FAQ">
        <ul>
          <li><a href="index.php" title="Why Join Quentia?">Link 1 </a></li>
          <li><a href="index.php" title="Quentia Features">Link 2 </a></li>
          <li><a href="index.php" title="The Quentia Team">Link 3 </a></li>
          <li><a href="index.php" title="It's Free">Link 4 </a></li>
        </ul>
      </div>
  </div>
</div>
</body>
</html>
works as it should in IE but not in FF

any ideas?
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Post by pickle »

Take the float:left; out of the first two elements. I'm not sure what other issues that'll create, but it fixes this one at least.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Add this class to the box that is collapsing and contains the float.

Code: Select all

.clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post by malcolmboston »

thank you very much :)
Post Reply