Hi Jeffrey, I took a look at your page on my laptop with IE7 and Opera 9: > > http://www.melissagerstein.com/tests/akon/akon.htm > Because I have a high-definition screen, Windows is set to 120 DPI. Both Opera and IE increase em-based font sizes by 25%, so the alphabet spills onto two lines. Worse, IE7 (not IE6) covers the second line (X Y Z). You may also get this problem if a visitor does not have Arial installed (rare).
Mixing text and images like your header is often problematical, especially as you have a tight fit. It will break at any increase in text size. Suggestion (sure to raise some hackles): Make the whole header, including the alphabet, an image. Position a list (preferably using margins) over the alphabet, styled as a horizontal list of square-shaped and appropriately sized links. Floating list items and anchors left will line them up over the letters, kind of like the "Night of the image map" but with floated links instead of absolute positioning: <http://alistapart.com/articles/imagemap> You could even use foreground images in those links. You could then apply "visibility: hidden" to these on hover to get a mouse-over effect. With an alt attribute on each image, you get a working web page with images and/or CSS off. > > on a side note: does the double-margin float bug effect only horizontal > margins? > Correct. And only on the "float side" (example: margin-left for float:left.) Use "display:inline" on IE floats to fix. Or avoid margins on floats. Cordially, David -- ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
