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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts

    Double Margin Float when I add "height:100%"

    I have a css class called "box" which I use for a some divs and a UL to display the same.

    The divs which use the class called "box" all have inner divs for rounded corner image effect.

    The class called "box" needs "height:100%" to make the divs display correctly in IE6 and IE7. Without the height property the bottom of the divs dont wrap around the inner divs.

    The class called "box" is also within a UL menu called "sidecontent" which is floated left and displayed inline to avoid IE's double margin bug.

    The problem is - If I keep the height 100% in the class called "box" the UL menu called "sidecontent" keeps its double margin bug in IE. But I need the height 100% for the divs to display properly. If I remove the "height:100%" the double margin bug in the UL menu vanishes, but Im left with the bottom of the divs not displaying.

    Here is the address, with the IE double margin bug menu on the left. The divs with the "test test test.." content should display ok. Its all happening in IE6 and IE7.

    www.siteoftom.com

  • #2
    Regular Coder
    Join Date
    Oct 2005
    Posts
    336
    Thanks
    43
    Thanked 2 Times in 2 Posts
    I have fixed it. I removed the height:100% from the "box" class, created a new class called "boxheight" with height:100% and applied the new class only to the divs which need it.

    Genius! I seem to be answering all my own questions here atm!!


  •  

    Posting Permissions

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