Using css to create a rounded cornered box I have the same problem in
both IE and Firefox and am stumped...
The rounded cornered box using 5 images behaves perfectly upon any
resize except when the width of the browser window is greater than
around 30cm when the left of the 'rounded box' is fine but the right
side of it appears 'floating' (30cm + (browser window width-30cm)) to
the right - ie a sandwich of box with a blank filling.
I have set up the scenario in a new project to ensure that none of my
other setting were impacting.
Here is the full code...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
..roundedcornr_box {
background: url(roundedcornr_tl.png) no-repeat top left;
}
..roundedcornr_top {
background: url(roundedcornr_tr.png) no-repeat top right;
}
..roundedcornr_bottom {
background: url(roundedcornr_bl.png) no-repeat bottom left;
}
..roundedcornr_bottom div {
background: url(roundedcornr_br.png) no-repeat bottom right;
}
..roundedcornr_content {
background: url(roundedcornr_r.png) top right repeat-y;
}
..roundedcornr_top div,.roundedcornr_top,
..roundedcornr_bottom div, .roundedcornr_bottom {
width: 100%;
height: 15px;
font-size: 1px;
}
..roundedcornr_content, .roundedcornr_bottom {
margin-top: -19px;
}
..roundedcornr_content { padding: 0 15px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<div class="roundedcornr_box">
<div class="roundedcornr_top"><div></div></div>
<div class="roundedcornr_content">
<p>Some content Some content Some content Some content Some
content Some content Some content Some content Some content Some
content Some content
Some content Some content Some content Some content Some
content Some content Some content Some content Some content Some
content Some content Some content Some content v
Some content Some content Some content Some content Some
content Some content Some content Some content Some content Some
content Some content
Some content Some content Some content Some content Some
content Some content Some content Some content Some content Some
content Some content Some content Some content
</p>
</div>
<div class="roundedcornr_bottom"><div></div></div>
</div>
</form>
</body>
</html>