IE Bug: Gap between two DIVs

HTML & CSS
1

Hello. I have an unpleasent gap in IE between two divs.

The CSS:


   * { margin:0; padding:0; }
   #Structure { width:1000px; max-width:1000px; }

   #Top_Scroll { width:1000px; height:12px; display:block; }
   #Middle_Scroll { width:1000px; }
   #Bottom_Scroll { width:1000px; height:14px; display:block; }

The HTML:


   <div id="Structure">
      <div id="Top_Scroll"></div>
      <div id="Middle_Scroll"></div>
      <div id="Bottom_Scroll></div>
   </div>

The Ouput for FF is working just fine and it looks like:

######################
#-------Top_Scroll DIV -------#
######################
######################
#--------Middle_Scroll DIV-----#
######################
######################
#-------Bottom_Scroll DIV-----#
######################

But the IE outputs:

######################
#-------Top_Scroll DIV -------#
######################

GAP (Between 3pxs approx.)
The gap is IN Top_Scroll Div’s bottom

######################
#--------Middle_Scroll DIV-----#
######################
######################
#-------Bottom_Scroll DIV-----#
######################

Can some1 help me plz? :sick:

2

IE6 has an expanding box bug and will always accommodate the largest element inside. When you set a small height such as 12px or 14px then the largest element in that block is considered by IE to be the current font-size/line height and will expand the box accordingly.

You need to either set the font-size to something smaller or just add overflow:hidden to the elements in question.