CSS Anchor Box Model Issue

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I think this would be a bug report but wasn't sure where to submit it.

I've discovered that there seems to be some sort of querk in IE on Windows
with the box model of anchor tags. If you style an anchor to display:block it
will create an extra space below. However, if you add width:100% it fixes the
issue but then screws up the width. I've setup an example if you would like
to take a look.
http://admin.stma.k12.mn.us/navigation.html

It only is messed up in IE on Windows. IE on Mac or any other browser
appears fine. I'm still doing some testing but thought someone may have a
comment here. Thanks
 
Ok, I've found a workaround! Since this only happens in IE on Windows I used
the underscore hack (http://wellstyled.com/css-underscore-hack.html) to
specify a width for each anchor. So, in edition to my example
(http://admin.stma.k12.mn.us/navigation.html), the CSS code now looks like.

#Navigation ul a {
background-position: 3px .5em;
padding-left: 12px;
_width: 188px;
}
#Navigation ul ul a {
background-position: 15px .5em;
padding-left: 24px;
_width: 176px;
}
#Navigation ul ul ul a {
background-position: 27px .5em;
padding-left: 36px;
_width: 164px;
}
....
 
Back
Top