1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Overflow: hidden not working in ie7

Discussion in 'CSS' started by jedward, Mar 26, 2008.

  1. #1
    I am having a problem with overflow: hidden; not working in IE7. The design entails three fixed columns (two of which are contained within another div) and a footer with clear: both; set. I have used the equal height columns technique described here: http://www.ejeliot.com/blog/61. For some reason in IE7 overflow hidden is not working and the sidebar as well as the containing div are being driven the full 2000px down, and appear under (under as in "as if on another 'layer' ") the footer.
    SEMrush
    It renders perfectly in firefox.

    here is the relevant code for the sidebar:

    #sidebar {
    width: 248px;
    padding: 5px 15px 18px 7px;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    margin-top: 20px;
    }

    the containing div for the other two columns:

    #mainContent {
    width: 530px;
    float: right;
    z-index: 1;
    }

    and the outer "wrapper":

    #allContent {
    width: 804px;
    margin: 15px auto 10px auto;
    clear: right;
    overflow: hidden;
    position: relative;
    }

    many thanks in advance for help with this tricky (to me) problem!
     
    jedward, Mar 26, 2008 IP
    SEMrush
  2. jedward

    jedward Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    heh - did i not give enough information or are you guys stumped too?
     
    jedward, Mar 26, 2008 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,486
    Likes Received:
    367
    Best Answers:
    28
    Trophy Points:
    335
    #3
    Not so much stumped, as not enough info. CSS tells how to present the html elements, and without the html, it's not much use. Can you post a link to the page? It would be good to see the bug in action, and have the complete code to work with. Even better would be a link to a minimal test case that exhibits the issue.

    cheers,

    gary
     
    kk5st, Mar 26, 2008 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    94
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Without thinking about it too hard, I believe this is going to be the IE bug where it expands an element to contain a floated one. This is an IE bug you will have to work around.
     
    drhowarddrfine, Mar 26, 2008 IP
  5. jedward

    jedward Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    http://arcadiagasstorage.com/bugtest/bug_test.htm

    here is a somewhat toned down version illustrating the bug. I tried to create a much simpler one but could not seem to replicate the problem - i have done some somewhat tricky css in order to acomplish the visual design and not have to use sliced images for the header - i think the problem may be there somewhere but am not sure..
     
    jedward, Mar 27, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You've got a lot of problems here (which are not all related). First, you've set the body to a small width (802px) and centered it. There's no reason I can think of to do that, because now the "html element" or root element (which IE treats differently than other browsers) has to carry the background color and any images. Let the body do that. Then inside the body you have a box (allContent) which is BIGGER than it's container (the body)! Howd'ya think something 804px wide (plus margins!) will fit in a box that's 802 px wide? That browsers can figure out what you mean is the miracle of browsers, but why make them guess?

    Okay, what's this?
    
    	#sidebar {
    	  width: 248px;
    	  margin-top: 20px;
    	  padding: 5px 15px 18px 7px;
    	  [b]padding-bottom: 2000px;
    	  margin-bottom: -2000px;[/b]
    	  background: #a6a9d4;
    	}
    
    Code (markup):
    Cause yes, the sidebar is indeed longer than the rest of the page. Aardvark even shows it.

    And now I wonder... I see content is floated right... I didn't see anything right away floated left* but I have just been told that IE does not clear floats going in both directions.

    You should go through and validate the code on the example you made first, and see what you get, then go bug-hunting. Generally the solution you find can also be applied to your more complicated page.

    *edit content-left is floated left.

    Ie doesn't need overflow: hidden to contain floats, as it illegally does that anyway whether you want it to or not. Overflow: hidden is for browsers who correctly let the floats hang out. So I don't think it's overflow:hidden not working, it's the clearing that's not working...
     
    Stomme poes, Mar 27, 2008 IP
  7. jedward

    jedward Peon

    Messages:
    4
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    "Without thinking about it too hard, I believe this is going to be the IE bug where it expands an element to contain a floated one. This is an IE bug you will have to work around."

    I believe you are right. Does anyone know of a link for a fix, or does this bug have a name that i can google - can't figure out how to phrase the problem to make the goog give me anything useful.
     
    jedward, Mar 27, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    "IE bug expanding container"
    "IE css bug" (get all of them, they'll all plague you)
    "IE enclose floats "overflow :hidden" "

    This will get you your start.
     
    Stomme poes, Mar 27, 2008 IP
  9. Trapped

    Trapped Well-Known Member

    Messages:
    1,832
    Likes Received:
    48
    Best Answers:
    0
    Trophy Points:
    130
    #9
    Life becomes easier with a 1px height image that serves as background image for both, sidebar and content. You are taking the rough road.
     
    Trapped, Mar 28, 2008 IP