Forum Moderators: not2easy
If the CSS is moved to an external stylesheet, make sure that you removed the <style></style> tags. If they are present in an external stylesheet, the browser won't read it.
Also, any <style> tags in the head should have the type attribute...type="text/css". A browser in Standards Mode may not let you get away with excluding the type. With external stylesheets, the type attribute, identical to the one above, must be in the <link /> tag. Also, make sure, if using a Strict doctype, to self-close the <link /> tag.
If that doesn't do it, try posting the relevant code.
cEM
PS: Welcome to WebmasterWorld!
The code, stripped down to it's barest form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-US">
<head>
<title>Round Corners</title>
<style type="text/css">
.RC_container_10 {
position:relative; /* keep within its container */
width:10; height:10 /* final size */
}
.RC_topleft_10 {
position:absolute;
width:20; height:20; /* resize image to 20x20 */
clip:rect(0,10,10,0); /* top-left corner */
top:0; left:0 /* no offset */
}
.RC_topright_10 {
position:absolute;
width:20; height:20; /* resize image to 20x20 */
clip:rect(0,20,10,10); /* top-right corner */
top:0; left:-10 /* offset left by 10 */
}
.RC_bottomleft_10 {
position:absolute;
width:20; height:20; /* resize image to 20x20 */
clip:rect(10,10,20,0); /* bottom-left corner */
top:-10; left:0 /* offset upwards by 10 */
}
.RC_bottomright_10 {
position:absolute;
width:20; height:20; /* resize image to 20x20 */
clip:rect(10,20,20,10); /* bottom-right corner */
top:-10; left:-10 /* offset up 10 and left 10 */
}
</style>
</head>
<body>
<center>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" align="left">
<div class="RC_container_10">
<img src="zra_ffc.gif" class="RC_topleft_10" width="10" height="10" />
</div>
</td>
<td bgcolor="#ffffcc"><img src="zd1_null.gif" width="1" height="1" /></td>
<td valign="top" align="right">
<div class="RC_container_10">
<img src="zra_ffc.gif" class="RC_topright_10" width="10" height="10" />
</div>
</td>
</tr>
<tr>
<td bgcolor="#ffffcc"><img src="zd1_null.gif" width="1" height="1" /></td>
<td bgcolor="#ffffcc">
This one is using
<br />
a separate style sheet and
<br />
clipping of a full circle.
</td>
<td bgcolor="#ffffcc"><img src="zd1_null.gif" width="1" height="1" /></td>
</tr>
<tr>
<td valign="bottom" align="left">
<div class="RC_container_10">
<img src="zra_ffc.gif" class="RC_bottomleft_10" width="10" height="10" />
</div>
</td>
<td bgcolor="#ffffcc"><img src="zd1_null.gif" width="1" height="1" /></td>
<td valign="bottom" align="right">
<div class="RC_container_10">
<img src="zra_ffc.gif" class="RC_bottomright_10" width="10" height="10" />
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
Add a unit (px, pt, whatever) to all the values in your clip and positioning properties (top, left, bottom, right). That should fix it.
Since it looks like your goal here is to place rounded corners on a box of text, you might find it easier to do by setting the image as a positioned background on each of the four corners. See this thread [webmasterworld.com] for details.
[added]LOL. I just noticed that the thread referenced above was yours, as well. So scratch that last bit. If it wasn't a solution for you then, it probably won't be a solution for you now! ;)[/added]
cEM
NOT for Internet Explorer! The only thing that I can find that works for IE is to remove the doctype.
Searched around and was able to find one reference to this sort of behavior. It's a thread on a different forum (a hostile and unpleasant one, at that). If you want to see it yourself, Sticky me and I'll send you the URL. I dont' want to post it here, partly to avoid potential TOS problems, but mostly because following the first post, the entire page is filled with childish and vulgar bickering about browser versions. (Long live, WebmasterWorld where such tripe is kept at bay.) Let me know if you want the link.
Regardless, apparently you can chalk this up as another hole in IE's CSS compliance. Supposedly, if you follow the W3 specs and delimit the clip property values with commas, IE in Standards mode won't read them. But if you present the values without commas (which is invalid CSS code) it works. I'm unsure whether the invalid version would work with compliant browsers or not. It looks like you'll have to choose between filtering for IE and giving it it's own clip property value without the commas, or having CSS that won't validate.
Note that I have not tested any of this.
cEM
I'll see if I can figure out how to do the private message to you to get that link; I've not done that before.
