Page 1 of 1

container div not containing in FF

Posted: Wed Jul 12, 2006 4:30 pm
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?

Posted: Wed Jul 12, 2006 4:39 pm
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.

Posted: Wed Jul 12, 2006 4:39 pm
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 */

Posted: Wed Jul 12, 2006 4:54 pm
by malcolmboston
thank you very much :)