Using two background images in IE

HTML & CSS
1

Hello,

I created some rounded corners in Photoshop for a menu item. I then added the following code in the stylesheet, which works great in Firefox and Chrome but not IE.

#tag {
background-image: url(corner1.png), url(corner2.png);
background-position: top left, top right;
background-repeat: no-repeat;
}

Internet Explorer does not display the corners, as it only accepts one background image per style. Are there any quick workarounds?

Thanks

2

Multiple background images are supported in IE9 and above. I would just let IE8 and below have square corners but you could probably use:after to add another image if needed…

Why aren’t you using border-radius for the round corners or are they very stylised?

3

My understanding is that border-radius isn’t a good solution for IE 8 because all 4 corners have to be rounded instead of just 2. Is this correct?

Can you expand on the use:after property?

Thx.

4

IE8 doesn’t support border-radius at all so it gets no round corners but it is a minor browser now so square corners are fine in most cases. You don’t really want to go too far out of your way to support older browsers especially with things that are decoration only. Otherwise you load up the page with mark up that won’t be needed in a year or so.

Can you expand on the use:after property?

It all depends on what you are doing exactly but you can use the :after element to place an extra image is some cases.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

div{
	position:relative;
	width:300px;
	height:300px;
	border:1px solid #000;	
	background:red;
}
div:after,div:before{
	content:"";
	position:absolute;
	right:0;
	top:0;
	width:10px;
	height:10px;	
	background:blue;
	z-index:9;
}
div:before{
	left:0;
	right:auto;	
}

</style>
</head>

<body>
<div></div>
</body>
</html>

It all depends of course on what else is going on?

5

I decided it is not worth the bother to make this work in IE 8. But once again, thanks for the help.

6