CSS: Aligning problem with rounded corners in IE 6/7 but ok in IE8/ Firefox etc_问答_开发者

CSS: Aligning problem with rounded corners in IE 6/7 but ok in IE8/ Firefox etc

开发者 https://www.devze.com 2022-12-25 09:53 出处：网络

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.

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">
            &nbsp;
        </div>
        <div class="vl-top-right">
            <img src="content/images/esquina_sup_d开发者_JS百科er.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

Apply style img { float: left; }