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 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts

    my site IE vs Firefox

    www.techavid.com the left float height covers both elements, while Firefox they are separated as I wish them to be. Here is code

    Here is the portions of CSS that Im using:
    Code:
    Body
        {
       
        background-color: #FFEBCD;
        background-color: #454C67;
        color: #000000;
        font: normal 76% Verdana, Helvetica, Arial, sans-serif;
        line-height: 170%;
        }
    
    div.sidebar {
       
            float:left;
            width: 150px;
            height: 250px;
            background-color: white;
            margin: 100px 0px 0px 0px;
            clear: left;
       text-align: center;
       background-image: url(../images/about.gif);
           
    }
    
    
    #box {
       margin-left: 170px;
       margin-top: 1px;
       background-color: #FFFFFF;
       width: 700px;
       height: 650px;
           
       }
    
    #box2
         {
       margin-left: 170px;
       margin-top: 1px;
       background-color: #FFFFFF;
       width: 700px;
       height: 800px;
            text-align: center;
            background-image: url(../images/box2.gif);
       }
    
    
    #box3
         {
       margin-left: 170px;
       margin-top: 1px;
       background-color: #FFFFFF;
       width: 700px;
       height: 1000px;
            text-align: center;
       background-image: url(../images/box3.gif);
       }

    Here is the html where the problem occurs:

    Code:
    <div class="sidebar">
    <br><H3><u><a href="http://www.ryanismy.name">About/Me</u></a></H3>
    Thanks, for stopping by!  Here you will find some Internet & technology ideas discussed that peaked my interest enough to create & demonstrate.
    <br><br><br><img src="images/gmail.png"><script src="http://gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/googletalk.xml&amp;synd=open&amp;w=150&amp;h=451&amp;title=Have+Gmail?+Chat+With+Me&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></div>
    Thanks to anyone who can school me on why IE is treating these elements differently then Firefox.

    Chaser

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    You have this for the sidebar:
    Code:
    div.sidebar {
            float:left;
            width: 150px;
            height: 250px;
            background-color: white;
            margin: 100px 0px 0px 0px;
            clear: left;
            text-align: center;
            background-image: url(../images/about.gif);
    }
    Firefox correctly gives it a height of 250px and displays overflowing content outside the box. IE6 and previous versions do not support the height property correctly. Rather it works like a minimum height. This is bug is referred to as the expanding box problem. Fortunately this has been fixed in IE7.

    With that said you have no doctype declaration. This is unfortunate because this causes your page is rendered in quirks mode. This especially has severe consequences in Internet Explorer. It is locked in a rendering mode similar to the one of IE5.

    The right doctype for you may be this one:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/REC-html40/loose.dtd">

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    64
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Thank you very much! I completely forgot the doctype !

    Cheers, Chaser


  •  

    Posting Permissions

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