Discontinuous Rounded Cornered Div > about 30cm in both IE andfirefox

25/03/2008, 13h15

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>

25/03/2008, 13h27

DanWeaver wrote:

> 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?

--
-bts
-Friends don't let friends drive Vista

25/03/2008, 18h30

Beauregard T. Shagnasty wrote:
> DanWeaver wrote:
>
>> <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.

--
Berg

25/03/2008, 22h52

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

26/03/2008, 00h59

DanWeaver wrote:

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

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

--
-bts
-Friends don't let friends drive Vista

25/03/2008, 13h15	#1
DanWeaver Messages: n/a Hébergeur:	Discontinuous Rounded Cornered Div > about 30cm in both IE andfirefox 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>

25/03/2008, 13h27	#2
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: Discontinuous Rounded Cornered Div > about 30cm in both IE and firefox DanWeaver wrote: > 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? -- -bts -Friends don't let friends drive Vista

25/03/2008, 18h30	#3
Bergamot Messages: n/a Hébergeur:	Re: Discontinuous Rounded Cornered Div > about 30cm in both IE andfirefox Beauregard T. Shagnasty wrote: > DanWeaver wrote: > >> <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. -- Berg

25/03/2008, 22h52	#4
DanWeaver Messages: n/a Hébergeur:	Re: Discontinuous Rounded Cornered Div > about 30cm in both IE andfirefox 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

26/03/2008, 00h59	#5
Beauregard T. Shagnasty Messages: n/a Hébergeur:	Re: Discontinuous Rounded Cornered Div > about 30cm in both IE and firefox DanWeaver wrote: > How do I find out why someone 1 starred my post- too long? What does that mean? There are no stars in my newsreader. -- -bts -Friends don't let friends drive Vista

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email