Hello,
I have the following CSS rules for all 'h1' tags and 'a' tags of class
'music'.
h1 {font-family: Arial; font-size: 14px; letter-spacing: -1px;
text-transform: uppercase; text-align: left; color: #333; background:
transparent url(PTMFOG0000000586.gif) -8px -342px no-repeat;
padding-left: 19px;}
a.music { background: transparent url(PTMFOG0000000586.gif) -5px -9px
no-repeat; padding-left: 21px; }
Ignoring the font styling for the h1, these rules should do the same
thing: apply a background image to some text and shift the text to the
right so that it does not overlap the image. Sure enough, this is
exactly what happens In IE5.5, IE6, Firefox and Opera. But in IE5.0 the
left-padding on the 'a' tag is ignored and the text and image overlap
(making the text unreadable). The 'h1' tag displays fine though.
There is an example on this page:
http://www.pauldice.plus.com/Home.html. The 'It's Been a Long Time. Part
One' text is the 'h1' - you can see that it is preceded by an image of a
little red star. Further down the page is a link saying 'Imitations From
Home' - this should be preceded by a headphones icon but in IE5.0 the
text and headphones overlap.
I've been looking around the web for clues but haven't found anything
referring to problems with left-padding and IE5.0. And the 'h1' tag
seems to work without any trouble. Does anyone have any ideas.?
Thanks,
Paul
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
