- Ruthsarian :
- Layouts :
- Labs :
- Blog :
- Contact :
October 04, 2006
More IE Oddities
I've started a rewrite of the rMenu system based on what I've learned about IE and hasLayout in the last couple weeks.
One problem I encountered was with borders. I like to wrap a border around each menu item to distinguish each one and provide some visual border to the menu. Typically I'd wrap an anchor or parent LI in a border and then apply a negative 1px margin on the bottom of each anchor or LI for vertical and right for horizontal menus. This keeps borders from doubling-up when two items are next to each other. The problem was that IE6 (and earlier) would drop the border on the extreme edge (the bottom-most or left-most item) of the menu. So then I'd try applying borders without the use of negative margins, such as applying the UL with a border on 3 of the 4 sides, and apply all LI or A elements with a border on that 4th side. This works well for vertical menus but not horizontal menus. The reason is horizontal menu UL elements are blocks and, thus, run the full width of the page. The LI elements are floated. So the top and bottom borders will always be wider than the actual width of the menu.
Long story short, here's what I've come up with. I've applied a border on all four sides of the anchor elements. I then apply a negative margin on the parent LI element. Because the negative margin is on a different (parent) element, IE6 (and earlier) won't cut off the extreme edge. Great! Problem solved!
Not so fast.
Vertical menus that have a negative bottom margin on the LI elements creates the same text-jog issue seein in menu #3 of the IE7 demo I prepared for Microsoft. In that instance, triggering hasLayout on the anchor elements resolved the issue. But now I've found that even with anchors having layout the bug can still be triggered. So it's not a hasLayout issue, but something else entirely.
But there is a fix. It seems negative TOP margins are okay. So setting a negative top margin on the LIs still gives the overlapping of borders I want on IE6 and IE7 but without triggering the vertical text jog found in IE7.
It's ridiculous.
But let it be known, that vertical text-jog seen in that IE7 demo is NOT directly related to hasLayout. Rather forcing the child anchor to have layout forces something else to happen on the parent LI element that prevents this text jog.
I really can't wait to be done with rMenu. I want this monkey off my back.
Post a comment