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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floats & clears not working in Firefox.

    Can't seem to get these floats & clears to work in Firefox. It looks fine in IE, but my right floats and divs won't clear in Firefox. Tried everything I could think of. Anybody out there have any ideas what I may be doing wrong?

    Here's the html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>CSS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="StyleSheet" type="text/css" href="cssTest.css" />
    
      </head>
      <body>
    <div class="main">
    		<div class="top"></div>
    		<div class="mid">
    		  <div class="left">
    <div id="nav_left2">
    <ul>
    <li><a href="#">Voice</a></li>
    <li><a href="#">Data</a></li>
    <li><a href="#">Cabling</a></li>
    <li><a href="#">Wireless</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    </div><!-- End  Nav_Left2-->
    		  </div><!-- End Left -->
    				<div class="content">
    		<p>Right TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight  TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight </p>
            </div><!-- End Content -->
    		</div><!-- End Mid -->	
    		<div class="bot"></div>
    </div><!-- End main -->
      </body>
    </html>
    Here'd the css:
    Code:
    body {
      margin:0;padding:0;
    }
    
    html {
      margin:0;padding:0;
    }
    
    .main {
      margin:0 auto;padding:0;width:90%;
    }
    .top {
      width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgTopBlue2.jpg) no-repeat;
    }
    .left {
      float:left;clear:right;margin:0;padding:0;width:200px;
    }
    .left p{
      margin:0;padding:0;
    }
    .mid {
      float:left;margin:0;padding:0;background:#fff url(images/bgMidBlue2.jpg) repeat-y;
    }
    .content {
      float:right;clear:left;margin:0;padding:0;
    }
    .content p{
      padding:0;margin:0;
    }
    .bot {
      clear:both;width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgBotBlue2.jpg) no-repeat;
    }
    
    /* Nav */
    
    #nav_left li a {
      margin:0;padding:0;font-weight : bold;color : #fff;text-decoration : none;
    }
    #nav_left a:hover {
      color : #003366;text-decoration : underline;margin:0;padding:0;
    }
    #nav_left ul {
      list-style-type : none;line-height : 120%;font-size : 100%;color : #fff;margin : 0;padding : 0;
    }
    #nav_left ul a#now {
      color : #003366;text-decoration : underline;margin:0;padding:0;
    }
    #nav_left  {
      margin : 0;padding :0;
    }
    
    /* Nav 2 */
    
    #nav_left2 ul li a {
      background : transparent url(images/dotUp.jpg) no-repeat left center;padding:0 0 0 12px;margin:0;text-align : left;font : bold 95% "trebuchet MS", arial, "Lucida Sans Unicode", verdana, lucida, sans-serif;text-decoration : none;color : #fff;
    }
    #nav_left2 ul li a:hover {
      background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
    }
    #nav_left2 ul li a#now {
      background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
    }
    #nav_left2 ul {
      margin : 0;padding : 0;list-style-type : none;text-align : left;
    }
    #nav_left2 {
      margin : 0;padding : 0;
    }
    And here's a link:
    cssTest

    Been tearing my hair out. Seems I should be able to get this working.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You don't need to apply floats to both of your columns.
    Give margin-left:200px; to content and remove float:right; clear:right;
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Could of sworn I tried that. Thanks a bunch.

  • #4
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That works great, but I can't seem to get the content to drop to the bottom of the container. I moved the .top & .bot inside the .mid container, and while the content moved to the top, it won't go to the bottom. Tried floating .bot left, and clearing different ways but can't get it to drop. Not a real big deal, but it bugs me that I can't get it to work.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Post your current code and state your intention.
    Meanwhile have a look at some standard layouts at http://bonrouge.com/2c-hf-fluid.php
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Jan 2008
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, here's the new html:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>CSS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="StyleSheet" type="text/css" href="cssTest.css" />
    
      </head>
      <body>
    <div class="main">
    		<div class="mid">
    		  <div class="left">
    		<div class="top"></div>
    		  <!-- Left Navigation-->
    <div id="nav_left">
    <ul id="navlist">
    <li><a href="#h1">Welcome</a></li>
    <li><a href="#h2">Mission</a></li>
    <li><a href="#h3">History</a></li>
    </ul>
    </div>
    <!-- End Left Navigation-->
    <p>With over sixty years combined IP & network service.</p>
    <div id="nav_left2">
    <ul>
    <li><a href="#">Voice</a></li>
    <li><a href="#">Data</a></li>
    <li><a href="#">Cabling</a></li>
    <li><a href="#">Wireless</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Home</a></li>
    </ul>
    </div><!-- End  Nav_Left2-->
    		  </div><!-- End Left -->
    				<div class="content">
    		<p>Right TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextTextRight TextRight TextRight TextRight TextRight TextRight  TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight TextRight </p>
            </div><!-- End Content -->
    		<div class="bot"></div>
    		</div><!-- End Mid -->	
    </div><!-- End main -->
      </body>
    </html>
    Here's the new css with background colors, paddings and margins added:
    Code:
    body {
      margin:0;padding:0;background:#003366
    }
    
    html {
      margin:0;padding:0;
    }
    
    .main {
      margin:10px auto 0 auto;padding:0;width:90%;
    }
    .top {
      width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgTopBlue2.jpg) no-repeat;
    }
    .left {
      float:left;clear:right;margin:0;padding:0;width:200px;
    }
    .left p{
      margin:0;padding:15px;
    }
    .mid {
      float:left;margin:0;padding:0;background:#003366 url(images/bgMidBlue2.jpg) repeat-y;
    }
    .content {
      margin-left:200px;padding:0;
    }
    .content p{
      padding:20px;margin:35px 0 0 0;background:#fff;
    }
    .bot {
      float:left;clear:right;width:200px;height:35px;margin:0;padding:0;background:#fff url(images/bgBotBlue2.jpg) no-repeat;
    }
    
    /* Nav */
    
    #nav_left li a {
      margin:0;padding:0;font-weight : bold;color : #fff;text-decoration : none;
    }
    #nav_left a:hover {
      color : #003366;text-decoration : underline;margin:0;padding:0;
    }
    #nav_left ul {
      list-style-type : none;line-height : 120%;font-size : 100%;color : #fff;margin : 0;padding : 0;
    }
    #nav_left ul a#now {
      color : #003366;text-decoration : underline;margin:0;padding:0;
    }
    #nav_left  {
      margin:0 0 0 25px;padding :0;
    }
    
    /* Nav 2 */
    
    #nav_left2 ul li a {
      background : transparent url(images/dotUp.jpg) no-repeat left center;padding:0 0 0 12px;margin:0;text-align : left;font : bold 95% "trebuchet MS", arial, "Lucida Sans Unicode", verdana, lucida, sans-serif;text-decoration : none;color : #fff;
    }
    #nav_left2 ul li a:hover {
      background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;
    }
    #nav_left2 ul li a#now {
      background : transparent url(images/dotOver.jpg) no-repeat left center;color : #003366;margin:0;padding:0;
    }
    #nav_left2 ul {
      margin : 0;padding : 0;list-style-type : none;text-align : left;
    }
    #nav_left2 {
      margin:0 0 0 25px;padding : 0;
    }
    And a link:

    cssTest

    I have trouble when I use a fixed size & width top and bottom background image with a scalable middle. I'd like content to fill the whole .mid section, going to the bottom of the .bot .div that contains the bottom background image. I've added a 35px margin to the top of .content p to get it to even out, then padded it out 20px. It looks good really. I'm probably just nit-picking to much. I'd just like a little less space top and bottom in the content.


  •  

    Posting Permissions

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