Float issues in Firefox

Discussion in 'CSS' started by iteria, Jul 30, 2006.

0
  1. #1
    I'm working on a site and I can't get the floats to work right in Firefox, yet it works fine in IE. I suspect that the code is wrong in some way and IE is just rendering it wrong, but I can't find it. everything that is floated renders outside of the parent element in firefox. THe code's below. Anyone got any ideas?

    fo ease of reading I took out everything that I thought wasn't important.

    
<Html>
<head>
<style>
div.container { border-style:solid;
  border-width:1px;
  text-align:center;
  margin:auto;
  width: 700px;
  padding: 5px;}

div.banner {text-align:left;
  border-style: solid;
  margin: 0px 0px 5px 0px;
  border-width:1px;
  height:150px;
  clear:both;}

span.navi{text-align:left;
  float: right;
  clear:right;
  width: 200px;
  margin:0px;
  border-style: solid;
  padding:0px;
  border-width:1px;}

span.main{text-align:left;
  float:left;
  clear:left;
  width: 490px;
  margin: 0px;
  border-style: solid;
  padding:0px;
  border-width:1px;}

</style>
</head>

<body>
<div class="container">
    <div class="banner">This is where my banner will be</div><br>

    <span class="main">This is the layout of a post:<br><br>
<!-------------------------Post code--------------------------!>
        <html>
        <head>
        <style>
        div.post {border-style:solid; 
                   border-width:1px; 
                   border-color:#EEEEEE; 
                   margin: 0px 0px 5px 0px;}

        div.postTop {background-color:#EEEEEE; 
                       border-style:none;}

        div.middle {background-color:#FFFFFF; 
                      border-style:none;}

        div.bottom {background-color:#FFFFFF; 
                      text-align:right; 
                      border-style:none;
                      clear:both;}

        span.avi {float:right; 
                    border-style:solid; 
                    border-width:1px;}
        </style>
        </head>

        <body>
        <div class="post">
            <div class="postTop">This is the top of the post</div>
            <div class="middle"><span class="avi">aaaaaaaaaa<br>aaaaaaaaaa<br>aaaaaaaaaa<br>aaaaaaaaaa<br></span> This is the middle of the post</div>
            <div class="bottom">This is the bottom of the post</div>
        </div>
        </body>
        </html>
<!-------------------------End post code--------------------------!>
    </span>

    <span class="navi">
        This where the navigation would be if there was one
    </span>
</div>

</body>

</html>
    Code (markup):

     
    iteria, Jul 30, 2006 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    IE, in most cases, quite wrongly encloses floats within their parent. Firefox, though, quite correctly does not. See enclosing float elements for examples of correct behavior and proper coding.

    I would guess, from the snippets you posted, that you have some basic errors in your html. Have you validated its syntax?

    cheers,

    gary
     
    kk5st, Jul 30, 2006 IP
  3. iteria

    iteria Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thank you so much! Well IE is wrong again! I'm glad that the the fix was so easy to do and I'll definately go look for a validator.
     
    iteria, Jul 30, 2006 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    See http://validator.w3.org/

    Also, use the web developer extension to Firefox. It will handle the validator connection for you.

    cheers,

    gary
     
    kk5st, Jul 30, 2006 IP