SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floats not acting as content?

    Sorry about the bandwidth. I figured out the problem. I had to float all the containing divs to get them to stretch to contain the inner most float. This is standards compliant behavior. Found the answer through a yahoo search; it was on the complex spiral site.
    Last edited by tom12182; Sep 18, 2004 at 12:25. Reason: Figured out the solution

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi you still need to clear the floats for mozilla.
    Code:
    .clearer {
     height:1px;
     overflow:hidden;
     clear:both;
     margin-top:-1px;
    }
    html
    Code:
       <a href="chem_225/homework/index.htm">Homework</a>
       <a></a>
       <a></a>
      </div>
      <div class="clearer"></div>
     </div>
    <!-- main page content starts here -->

    Paul

  3. #3
    SitePoint Member
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! The clearer code works great, except I found that I had to put some content in the clearer div (I put a non-breaking space) to make it function. It fixes the bottom border, which wasn't showing up in Mozilla.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It sometimes does that then you can use this instead and you don't (usually) need the non breaking space.
    Code:
     <br class="clearer" />


    Paul

  5. #5
    SitePoint Member
    Join Date
    Jun 2004
    Location
    California, USA
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    hmm, still not working right in moz

    Paul-

    I got the thing almost working without the clearing div. The main page
    has no content in the submenu div, which causes it to disappear. I kind
    of like this effect (not sure if this is taking advantage of non-standards
    behavior, but...).

    However, there is one really strange problem. The bottom border of the
    container div doesn't display in Mozilla. It does display in IE6. However,
    this effect can only be seen on the pages that have a submenu.

    The clearing div doesn't actually solve this behavior. Any idea why this
    is happening, and if it can be fixed?

    site:http://www.mucciaro.net

    Browse to the Chem 225 page to see the problem (only in Mozilla).

    Next thing I want to do is center the submenu. I am studying your
    example to see if I can apply it here.

    Thanks,

    Tom

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Mozilaa has a few little problems with borders and top margins so the easiest thng is simply to change your code so that the bottom border is on the nottom float.

    e.g.
    Code:
    div#menubar {
      float:left;
      margin: 0 0 5px 0;
      padding:0;
      width: 100%;
      color: #ffffff;
      background-color:#0066CC;
      font-family: Verdana, Helvetica, Arial, sans-serif;
      font-size: 1em;
      border: 1px solid #000;
      border-bottom:none;
      }
    div#submenu {
      float:left;
      width:100%;
      background-color:#ffffff;
      padding: 0;
      border-top: 1px solid #000000;
      border-bottom: 1px solid #000000;
    That should get the effect you require without spending too much time looking for the answer that may not even be there.

    Paul


Bookmarks

Posting Permissions

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