Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

CSS & HTML: Disappearing content in IE after mouseover of dropdown menu

Bottom of Page

1 to 6 of 6

  1.  
    • CommentAuthormariachi77
    • CommentTimeFeb 26th 2006
     permalink
    I'm seeing a strange error in IE 6 and below where my content seems to be disappearing after rolling over the "Suckerfish" type dropdowns. The content that is disappearing is floated to the right.

    I tried adding an empty div just above the footer that to clear both floats, but to no avail.

    Check this page to see an example of the phenomenon:

    http://www.stroke7.com/projects/dakines/bbq/island-plates/

    I'm guessing this has something to do with absolute positioning, but I'm not sure how to approach this. Any ideas or similar experiences?

    Cheers,

    Mike
    • CommentAuthormariachi77
    • CommentTimeFeb 26th 2006
     permalink
    Actually it seems to occur when mousing over the menu in general, not just the Suckerfish dropdown menu items.
    •  
      CommentAuthoranblik
    • CommentTimeFeb 26th 2006
     permalink
    It looks like you encountered Peekaboo IE6 bugs. Give DIV Float holder explicit 'width' or 'height' attributes. We solved it only applying WIDTH on Float holder DIV tags.
    • CommentAuthormariachi77
    • CommentTimeFeb 26th 2006
     permalink
    Hi anblik,

    The floated DIV that disappears does have an explicit width already, so I added a height and overflow:visible property. No change. Added zoom:1... still no bones.

    Anything else I can try?
    • CommentAuthormariachi77
    • CommentTimeFeb 26th 2006 edited
     permalink
    Alright, thanks to your suggestion anblik, I played around some more and found that if I set height: 1%; on the main #content div, it worked. Looks like I was looking at the wrong div. I guess this has something to do with IE's hasLayout issue?
    More on IE's hasLayout rendering trigger
    Thanks for leading me in the right direction.
    •  
      CommentAuthoranblik
    • CommentTimeFeb 26th 2006
     permalink
    This is the best hack available. Whenever you across this issue, just call the class .clearboth in the parent (main container) DIV:

    /* General Class to Clear Floated Elementt */
    .clearboth:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
    .clearboth {display: inline-table;}
    /* Hides from IE-mac */
    * html .clearboth {height: 1%;}
    .clearboth {display: block;}
    /* End hide from IE-mac */

1 to 6 of 6

  1.  
Add your comments
    Username Password
  • Format comments as (Help)
 
Back to Discussions Top of Page