CSS problem with div height in IE/FF

Discussion in 'OT Technology' started by MrBrotato, Jan 26, 2007.

  1. MrBrotato

    MrBrotato New Member

    Joined:
    Sep 7, 2005
    Messages:
    5,558
    Likes Received:
    0
    Well I have been messing with this for a few days but I just don't really know how to fix the problem. If you visit my website http://www.jrclarity.com in IE you will see it displayed correctly, at least I hope so. I'm using IE 6 at college and it looks good. However, in FireFox and Opera the height of the main DIV does not expand with the text.

    I have been messing the this code below a little bit, which seems to be where my problem is coming from:

    Code:
    #page {
     padding: 0;
     width: 750px;
     min-height: 432px;
    _height: 432px;
     text-align: left;
     background-image: url([URL="http://www.jrclarity.com/images/layout_13.jpg"]http://www.jrclarity.com/images/layout_13.jpg[/URL]);
     background-repeat: no-repeat;
     background-color: #d7dde3;
     }
    
    This works fine in IE. The minimum height of 432px works in all browsers, and IE expands beyond this just fine. The problem is when a page becomes longer than 432 Opera and Firefox do not expand the DIV.

    Also, if I add in overflow: hidden; Opera and FireFox expand the div, but IE hides the extra text. :(

    EDIT: I fixed the problem by using overflow: hidden; and _overflow: visible;
     
    Last edited: Jan 27, 2007
  2. Darketernal

    Darketernal Watch: Aria The Origination =)

    Joined:
    Oct 8, 2002
    Messages:
    10,498
    Likes Received:
    3
    Location:
    Care,for all is like a bonsai tree
    Well IE 7 user here and lets say if i have half a screen
    [​IMG]

    The beach gets pretty distorted. Makes me wondering what program your using to make webpages.
     
  3. Penguin Man

    Penguin Man Protect Your Digital Liberties

    Joined:
    Apr 27, 2002
    Messages:
    21,696
    Likes Received:
    0
    Location:
    Edmonton, AB
    Figure out the standards compliant way to make it do what you want, then use the IE7 Javascript Library (nothing to do with the IE7 browser) to make IE play nice.

    That's always been my solution :).
     
  4. Ractoon

    Ractoon Shibumi in progress...

    Joined:
    Apr 30, 2001
    Messages:
    256
    Likes Received:
    0
    Well...if you want a quick fix IE conditional comments may work. Leave in the "overflow: hidden;" to make it work in Opera/Mozilla. Then somewhere in the html put:

    <!--[if IE]>
    #page {
    overflow: visible;
    }
    <![endif]-->

    or if it works for IE7 but not IE6...

    <!--[if lte IE 6]>
    #page {
    overflow: visible;
    }
    <![endif]-->
     
    Last edited: Jan 27, 2007

Share This Page