SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float problems in IE and Firefox

    I have two problems that I think are float related that I can't quite put my finger on.

    • The first only happens in IE. For some reason my tables will only show below the left-hand menu.


    • The second only happens in Firefox. Notice how deranged the header is (compare it with IE)?

    Does anyone know what the problems are (and how to fix them)?

    Thank you!

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you have width values set for the menu and the content area to the right, and you both have them floating left, if the total width of the two items is greater than 100% (including content, padding, borders and margin) the item which is most right will be pushed below the item that comes before it. Keep in mind that IE doesn't use the same box model as firefox.

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

    Just leave the width out of listing:
    Code:
    .listing {
    }
    What exactly is wrong with the header. Its a different size but what do you mean by deranged.

    Paul

  4. #4
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    What exactly is wrong with the header. Its a different size but what do you mean by deranged.
    Sorry, I was thinking of an older version that was more deranged. But there is still a problem in Firefox.

    In IE the logo and the logout button are side by side but in Firefox the logout button is below the logo.

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

    Floats should have a width (unless they are images) or some browers will default to 100% width and some will default to content width. Obviously you can only get one 100% on a line

    Code:
      <div style="float: right;width:30%;">
    	<ul id="logout">
    	  <li><a href="index.php?action=logout" title="Logout From This Session">Logout</a></li>
    Don't leave that style inline. Set a class or id for it and put it in the css.

    Paul

  6. #6
    SitePoint Wizard dominique's Avatar
    Join Date
    Dec 2000
    Location
    orbis terrarum
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Floats should have a width (unless they are images) or some browers will default to 100% width and some will default to content width. Obviously you can only get one 100% on a line
    Thanks! I didn't know Firefox gave it a width of 100% by default.


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
  •