Notification box icons work in all browsers but IE!?

HTML & CSS
1

I’m working on creating a notification box using CSS and everything looks perfect in Firefox, Chrome, and Safari - the only browser that it doesn’t work in is IE.

By not working I mean I have an icon on the left hand side of the message box which these icons all show for the browsers listed above, but IE. This is what I’m working on now:

<snip />

Any suggestions on how to fix it for IE as well? Thanks in advance.

2

I’m getting the same results in IE8, Chrome and Opera - can you be more specific about the problem? Which version of IE?

Have you done something silly like forgotten to log in/out when using IE?

3

Here are the screen shots of what I’m getting:

Chrome

IE8

Notice the bulls eye icon is missing in IE8 but is displaying correctly in Chrome (as well as Firefox and Safari).

4

It doesn’t seem to like your tip::before content.

As an alternative, you could just set the background to tip like this and get the same result.

background: #f9d9a1 url(http://quadcopterforums.com/images/misc/tip.png) no-repeat 20px 20px;

5

Dave,

I gave that a try and now IE works, but all the other don’t. :fangel:

6

The gradient filter uses the background-image property so you can’t have both on the same element. :slight_smile: It’s one or the other.

Just leave the tip:before image in place and then they will all get what they need as IE8 doesn’t understand gradients anyway.

7

Note that IE8 doesn’t like the double colon syntax:

tip::before {}

If you use:

.tip:before {}

It should work.

8

Well I’ve completely re-written the code - which I think is cleaner than it was previously and it now works in all browsers. Granted IE isn’t as pretty as Chrome, Firefox or Safari but at least it looks all the same for the most part and all graphics seem to be working.

Thanks for all the help guys!

Firefox:

IE8: