Welcome to WebmasterWorld Guest from 54.166.82.161

Forum Moderators: not2easy

Message Too Old, No Replies

Doctype kills CSS clip

Quirks mode?

     
11:59 am on May 12, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


I've tried html4/strict.dtd, html4/loose.dtd, xhtml1/DTD/xhtml1-strict.dtd, and xhtml1/DTD/xhtml1-transitional.dtd in Mozilla and IE, and inclusion of ANY doctype line makes the CSS as if it's not there. It doesn't help to put it in an external file.
12:43 pm on May 12, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


The clip property is supported in modern browsers, but is very limited in it's use. You might want to check the specs [w3.org] to be sure you're not asking it to do something it isn't yet capable of doing.



It occurs to me that you might have meant your css code when you said "CSS clip" (and not the property by that name), in which case, it is almost certainly a syntax error.

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!

1:30 pm on May 12, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


Thank you, createErrorMsg, for the suggestions. I was trying to learn about the clip property, actually had it working to do exactly what I wanted, and then put it into a larger work. The small work file had only the code that I was trying to get working; the larger project had all of the proper doctype, etc. lines that really should be there. It took me forever (actually a couple hours) to find that including or removing the doctype line was making the difference. And it causes the problems in every browser that I try.

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>

2:24 pm on May 12, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


Standards mode browsers are very finicky about units. Firefox, for instance, will completely ignore any non-zero numerical CSS value that does not have a unit specified (you can see this by selecting "View CSS" in the Web Dev toolbar. The resulting CSS file does not even list properties with non-zero numerical values that have no unit).

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

3:05 pm on May 12, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


Adding "px" everywhere fixed it in Firefox and Mozilla, Netscape 7, and Opera, and it degrades "gracefully" for Netscape 4 and even WebTV. But NOT for Internet Explorer! The only thing that I can find that works for IE is to remove the doctype.
3:31 pm on May 12, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
posts:2239
votes: 0


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

5:23 pm on May 12, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:June 17, 2003
posts:160
votes: 0


Removing the commas in the clip makes it work as expected in all of the browsers named above. And, of course, it won't validate!

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.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members