Forum Moderators: not2easy
I'm trying to create smooth, rounded edges with css.
Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<LINK href="/styles/styles_new.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="box_wrapper" style="width:400px;">
<div class="box_top2_l"></div>
<div class="box_top2_r"></div>
<div class="box_top2_m"></div>
</div>
</body>
</html>
and /styles/styles_new.css:
.box_top2_m { border-top: 1px solid #ccc; background-color: #f3f3f3;height:9px; max-height:9px;}
.box_top2_l { background-image: url(/images/tl_grey.gif); background-repeat: no-repeat; width: 10px; height: 10px;float:left;}
.box_top2_r { background-image: url(/images/tr_grey.gif); background-repeat: no-repeat; width: 10px; height: 10px;float:right;}
in FF and ie7 and 8 this code will output it correctly. but in ie6 and lower it's broken. It's because of the fact that those browsers do not render xhtml at all.
does anyone know a workaround to fix it?
thanks.
It's because of the fact that those browsers do not render xhtml at all.
From the looks of it, it would be easier to use the sliding doors technique. It only requires 2 html elements and either 1 (large) or 2 background images.
You can also use that technique in both directions at the same time.
Or rounded corners there's aslo CSS3 that will have such support (and does so today already in FF, safari, chrome etc.).
in FF and ie7 and 8 this code will output it correctly. but in ie6 and lower it's broken. It's because of the fact that those browsers do not render xhtml at all
So you're saying this page is being served up using the 'application/xhtml+xml' MIME type? Because I don't see that content-type being specified in the META http-equiv declaration- in fact I see that you've omitted that declaration altogether. I guess you might be using a .xht or .xhtml file format though.
Why are you choosing to serve it up as true XHTML, if you are having to support IE?
Like I mentioned in another recent post, there are some techniques out there which allow content negotiation; serving the page up as 'text/html' when the document is requested by IE, and serving the page up as 'application/xhtml+xml' when the document is requested by a UA that supports that content-type.
