Hi,
I'm having a strange problem (sample code below) and I'm hoping
somebody can give me some pointers.
If I leave the "width" rules out of the CSS then both IE (v5 and v6)
and Firefox (v1.0) render the page the same way; ie. purple body
background, div with white background and double border (two thin
strips - outer white, inner purple).
If I put the width rules back in, Firefox reduces the width of the div
and everything else says the same. But IE for some reason now renders
every part of the border purple; effectively a displaying a solid
boder.
Is there any way to specify a width for the div but still keep the
double border in IE?
TIA
==== csstest.css ====
body {
background-color: #7e4189;
text-align: center;
}
#content {
text-align: left;
background-color: #ffffff;
position: relative;
margin: 0 auto;
border-style: double;
border-width: 5px;
border-color: #7e4189;
padding: 20px;
/* Box model hack */
width: 600px;
voice-family: "\"}\"";
voice-family: inherit;
width: 550px;
}
==== csstest.html ====
<!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>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"
/>
<link rel="stylesheet" type="text/css" href="./csstest.css" />
<title>CSS Test</title>
</head>
<body>
<div id="content">
<p>Text goes here!</p>
</div>
</body>
</html>
==============
