CSS: Aligning problem with rounded corners in IE 6/7 but ok in IE8/ Firefox etc
- by mark smith
Hi there,
can anyone help?
I have a problem aligning rounded corners in IE6/7. Basically everything seems to work in Firefox / IE8 but in IE6/7 the left / center / and right divs get misaligned.
This basically shows exactly what i am refering to.
here is the example in IE8 and everything works ok http://es.drop.io/ern0fye/asset/ie8-jpg
And here is the problem (this example is running in IE8 with compat mode set to IE7)
http://es.drop.io/ern0fye/asset/ie7-jpg
I seem to remember there being a bug in IE6/7 with lineheight or similar but i don't recall exactly.
I will paste the CSS and HTML below it is very very simple. Basically there is a left div that holds the left corner image and center div which has a background of RED which is the same as the corner images and finally a right div which holds the right corner image.
I would appreciate any input anyone has. Thanks in advance.
Here is the CSS
.vl-top-left
{
float:left;
width:12px;
height:12px;
}
.vl-top-center
{
float:left;
width: 485px;
background-color: #F04A23;
height:12px;
}
.vl-top-right
{
float:left;
height:12px;
width:12px;
}
and the HTML is :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<link href="Stylesheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="vl-top-left">
<img src="content/images/esquina_sup_izq.gif" width="12" height="12">
</div>
<div class="vl-top-center">
</div>
<div class="vl-top-right">
<img src="content/images/esquina_sup_der.gif" width="12" height="12">
</div>
</body>
</html>
EDIT
Applied also margin:0 and padding:0 on the body and on each DIV but still the left and right div drops down as per the screenshot
