homepage Welcome to WebmasterWorld Guest from 54.225.1.70
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Background image bug in IE
When text goes over two lines, background image appears in the wrong place
bobming




msg:3418732
 9:16 am on Aug 10, 2007 (gmt 0)

I've created a small icon to appear at the side of text links. I'm doing this with the following CSS:

a{
padding-left:14px;
background:url(images/arrow.gif) left no-repeat;
}

However, when the anchor text flows over two lines, IE 6 and 7 decide to place the image at the left most part of the link instead of within the padded area at the beginning of the link (Firefox and Safari do this fine).

Any ideas what I'm missing? Or is this an unavoidable bug with IE?

 

penders




msg:3418859
 1:36 pm on Aug 10, 2007 (gmt 0)

Not sure, but you're missing a vertical position for your background image so I'm not too sure how the browser would interpret this. Certainly the W3C CSS Validator turns this into:

background : url(images/arrow.gif) left 0%;
(where has your background-repeat gone?)

You could try:
background:url(images/arrow.gif) left top no-repeat;

bobming




msg:3418928
 3:04 pm on Aug 10, 2007 (gmt 0)

I'd tried that but it just placed the image a little bit higher, above where the second line in the link starts.

IE seems to be seeing the whole two lines of text as one block link and postitioning relevant to that (hope my description makes sense!)

jetboy




msg:3419004
 4:20 pm on Aug 10, 2007 (gmt 0)

<a> is an inline element. According to the W3C's CSS 2.1 spec:

"The tiling and positioning of the background-image on inline elements is undefined in this specification. A future level of CSS may define the tiling and positioning of the background-image on inline elements."

so it looks like unchartered territory rather than a bug.

I replicated the issue, and couldn't get IE to play ball with the usual array of IE tweaks. You may have to settle with a extra non-semantic element for the bullet; maybe even using JS to drop them after page load. Alternatively, prevent the links from wrapping to multiple lines in IE with no-wrap.

penders




msg:3419375
 10:52 pm on Aug 10, 2007 (gmt 0)

I'd tried that [left top] but it just placed the image a little bit higher, above where the second line in the link starts.

Ah ok, checking the W3C further it seems that for background-position:

If only one value is specified, the second value is assumed to be 'center'.

Although that doesn't quite explain what the W3C validator spits out as "valid CSS"...?

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved