Combining background graphic and background colour
See the code below.
We're using a background image (block_top.gif) with repeat-x combined with a solid colour background to give us a block with two colour sections without having to split it into two divs.
This works well in all browsers, but seems to have hit a snag when used with PIE.htc -- if you try the code below, you'll notice a single pixel of orange down the right hand side of the background graphic. It appears that the background graphic is getting mis-positioned or mis-sized, and the background colour is bleeding through into its space.
If you zoom in, you'll see that the single pixel is actually just a sub-pixel, and that there's also a sub-pixel mis-alignment on the top border as well, but this isn't visible at normal zoom.
This occurs in all versions of IE.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test Page</title>
<style>
.block {
border-radius:6px;
behavior: url(PIE.htc);
width:200px;
background: #FF9955 url('block_top.gif') repeat-x top;
position:relative;
}
</style>
</head>
<body>
<div id="block-user-1" class="block">
<h2 class="title">Title</h2>
<div class="content">
block content
</div>
</div>
</body>
Forums
