Discontinuous Rounded Cornered Div > about 30cm in both IE and firefox

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

DanWeaver - 25 Mar 2008 13:15 GMT

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>

Reply to this Message

Beauregard T. Shagnasty - 25 Mar 2008 13:27 GMT

> Using css to create a rounded cornered box I have the same problem in
> both IE and Firefox and am stumped...

You should start with a complete DOCTYPE, and not that incorrect
fragment you show in your code. Begin your document with:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

> The rounded cornered box using 5 images behaves perfectly ...
> Here is the full code...

Since none of us have your images, it is impossible to test. Post your
best effort online and provide a link to it.

Validate it first:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/validator.html

> <html xmlns="http://www.w3.org/1999/xhtml">
> <head runat="server">

What server?

Signature

-bts
-Friends don't let friends drive Vista

Reply to this Message

Bergamot - 25 Mar 2008 18:30 GMT

>> <head runat="server">
>
> What server?

But wait - there's more!

>> <body>
>> <form id="form1" runat="server">

Why the whole page is in a form with no inputs is a mystery.

Signature

Berg

Reply to this Message

DanWeaver - 25 Mar 2008 22:52 GMT

Thanks to both of you who responded- the w3 validator is a very useful
resource I didnt know of. How do I find out why someone 1 starred my
post- too long? Point taken about the images.

I had used generated code from this very convenient site (
http://www.roundedcornr.com/) but had misunderstood how it worked- the
images provide only a finite coverage of the area. Can change them
easily enough now I know.
SOLVED - Not stylesheet issue

Reply to this Message

Beauregard T. Shagnasty - 26 Mar 2008 00:59 GMT

> How do I find out why someone 1 starred my post- too long?

What does that mean? There are no stars in my newsreader.

Signature

-bts
-Friends don't let friends drive Vista

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / March 2008

Discontinuous Rounded Cornered Div > about 30cm in both IE and firefox