-1

The padding, margin etc. all work, but the image won't display in IE 8, any idea why?

CSS

.arrow {
background:url(images/arrow.png) center left no-repeat;
padding-left:23px;
padding-right:10px;
border-right:0px solid #e6e6e6;
margin-right:10px;
}

HTML

<div class="arrow">
<h3><b>Headline</b></h3>
</div>

h3 CSS

h3{
font-size:14px;
text-transform:uppercase;
}
Paul Dessert
  • 6,363
  • 8
  • 47
  • 74
  • 2
    @steveax: Here you go, enjoy: http://jsfiddle.net/RTe4G/ – Wesley Murch Mar 06 '12 at 19:31
  • Maybe use quotes `url('images/arrow.png')` – henryaaron Mar 06 '12 at 19:32
  • This so temps the answer of IE sucks. – Joshua Mar 06 '12 at 19:33
  • 1
    Works fine for me on IE9 in IE8 mode, not sure why it wouldn't. Can you provide a screen shot? *Are you **100% sure** there's no other CSS or HTML involved?* Did you actually confirm it works in another browser? – Wesley Murch Mar 06 '12 at 19:36
  • 1
    Is the `

    ` inside floated or absolute positioned? If so, the div will have no dimensions, and you'll have to set them manually.

     – bfavaretto Mar 06 '12 at 19:37
  • 1
    Please post the CSS for the h3 heading. – bfavaretto Mar 06 '12 at 19:40
  • Looks like it's not the `h3`... :(. But you could try setting width and height for `.arrow` anyway, just as a test. – bfavaretto Mar 06 '12 at 19:43
  • @Paul: Please upload the image file and link it so we can test or try with `background-color`, or post a live demo that we can actually see this error on. There is nothing here at all that suggests the background image wouldn't work. – Wesley Murch Mar 06 '12 at 19:45
  • @Xander - it's on an intranet. No outside access is allowed. – Paul Dessert Mar 06 '12 at 19:49
  • Can you post your HTML from your DOCTYPE through the HEAD tag? I wonder if you have a BASE tag set set in your HTML that could be causing a problem in IE? I seem to recall that happening to me once. – jmbertucci Mar 06 '12 at 21:07

3 Answers3

2

According to this link (in french), try with a space before url

background: url(images/arrow.png) center left no-repeat;

I have not personally tested, but it worked for this user

Julien
  • 3,509
  • 20
  • 35
2

Try surrounding the url with single quotation marks (or whatever they're called).

background:url('images/arrow.png') center left no-repeat;
Matt Hansen
  • 424
  • 1
  • 6
  • 16
2

in case my mobile phone displays it correctly, put the background shorthand on a single line, linebreaks confuse ie.

Christoph
  • 50,121
  • 21
  • 99
  • 128
  • Examine the computed styles and look for possible errors/overrides. – Christoph Mar 06 '12 at 19:40
  • Additionally switch center and left, the horizontal declaration comes first in the shorthand. If that wont help, break up the shorthand into its single declarations. – Christoph Mar 06 '12 at 19:44