<div>s behaving weird in mozilla - frustrated :(

Discussion in 'CSS' started by mgarhi, May 2, 2009.

0
  1. #1
    Hello folks,

    This is my 1st post here. Please go through the below html and tell me why is the color of the div.footer being applied to other div's too. If you are confused just keep in mind that the same page opens the way i want in IE and i want that to happen in Mozilla too.


    ------------------------------------------------------------

    <html>
    <head>
    <style>
    div.content
    {
    width:70%;
    }
    div.main
    {
    padding:1px;
    }
    div.ol
    {
    float:left;
    width:70%;
    }
    div.or
    {
    float:right;
    width:29%;
    }
    div.footer
    {
    width:100%;
    background-color:#dedede;
    text-align:center;
    }
    </style>
    </head>
    <body>
    <div class="content">
    <div class="main">
    <div class="ol">
    Ya husain
    </div>
    <div class="or">
    Ya Ali
    </div>
    </div>
    <div class="footer">
    This is the footer with color applied to it
    </div>
    </div>
    </body>
    </html>

    ----------------------------------------------------------------
     
    mgarhi, May 2, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    The problem is IE, not Mozilla, and the fact that you are looking at IE and expecting the more modern browsers to behave the same. Never, ever trust any version of IE to do anything correctly. Always, always use any other browser to verify your markup before looking at IE. It is the worst browser on the planet, but the quirks and bugs of IE are well known, as are the hacks to fix it.

    Your problem is that you are missing a doctype. Without one, IE will not attempt to behave like the more modern browsers. Add this to your first line:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
     
    drhowarddrfine, May 3, 2009 IP
  3. FilmFiddler

    FilmFiddler Greenhorn

    Messages:
    54
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    23
    #3
    Also try adding the following to the div.footer part: 

    
clear: both;
    Code (markup):
    Then the floats above will be cleared and the footer should render correctly.
     
    FilmFiddler, May 3, 2009 IP
  4. Orionburst

    Orionburst Peon

    Messages:
    13
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hi,

    I have to agree with drhowarddrfine IE is terrible for even considering checking markup. You should stick to FireFox.
    THe fact that you have to actually tell IE what type of document you are writing despite the fact it will still display is baffling considering that IE8 is supposed to be up to date.

    Nice call drhowarddrfine.
     
    Orionburst, May 3, 2009 IP