Finish off CSS curved corners 1

[arst06d]

Hi
I am implementing curved corners using CSS as per Stu Nicholls site at

http://www.stunicholls.myby.co.uk/boxes/curves.html,

but I cannot quite finish it off.
I'm using a table inside the nested div structures, and have the four curved corners OK, but cannot seem to finish off the bottom of the box, between the bottom corners.

My code is below - can anyone please help?

Thanks

David

<div style="BACKGROUND: #32659c; MARGIN: 5em 0px; WIDTH: 521px; POSITION: relative">
<div id="ctl" style="BACKGROUND: #fff; LEFT: 0px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 0px; HEIGHT: 20px"><div id="quadtl" style="FONT-SIZE: 150px; LEFT: -8px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute">•</div></div>
<div id="cbl" style="BACKGROUND: #fff; LEFT: 0px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 100%; HEIGHT: 20px"><div id="quadbl" style="FONT-SIZE: 150px; LEFT: -8px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute; TOP: -17px">•</div></div>
<div id="ctr" style="BACKGROUND: #fff; LEFT: 501px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 0px; HEIGHT: 20px"><div id="quadtr" style="FONT-SIZE: 150px; LEFT: -25px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute">•</div></div>
<div id="cbr" style="BACKGROUND: #fff; LEFT: 501px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 100%; HEIGHT: 20px"><div id="quadbr" style="FONT-SIZE: 150px; LEFT: -25px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute; TOP: -17px">•</div></div>
<TABLE cellspacing="0" cellpadding="3" BORDER="1" WIDTH="521" bordercolor="#32659c">
<tr >
<td colspan="7" height="25" valign="center" bgcolor="#32659c"><span class="LoggainRubrik">&nbsp;&nbsp;&nbsp;&nbsp;*1. Applicants (Buyer) Details</span></td>
</tr>
<tr>
<td width="296" valign="top" style="BORDER-RIGHT: medium none; BACKGROUND-COLOR: white">
<span class="text"><label for="applicantsname">Applicant Name:</label><br>
<input name="applicantsname" id="applicantsname" maxlength="35" style="WIDTH: 250px"><br>
<br>
<label for="applicantsaddress">Full Address (including post code):</label><br><TEXTAREA id=applicantsaddress style="WIDTH: 250px" name=applicantsaddress rows=4 wrap=VIRTUAL></TEXTAREA>
</span></td>

<td width="296" valign="top" style="BORDER-LEFT: medium none; BACKGROUND-COLOR: white">
<span class="text"><label for="contactname">Contact Name:</label><br>
<input name="contactname" id="contactname" maxlength="35" style="WIDTH: 250px"><br>
<br>
<label for="applicantsphone">Telephone Number:</label><br>
<input name="applicantsphone" id="applicantsphone" maxlength="20" style="WIDTH: 250px"><br>
<br>
<label for="applicantsfax">Fax Number:</label><br>
<input name="applicantsfax" id="applicantsfax" maxlength="20" style="WIDTH: 250px"><br>
<br>
<label for="applicantreference">Applicant Reference:</label><br>
<input name="applicantreference" id="applicantreference" maxlength="16" style="WIDTH: 250px" >
</span></td>
</tr>
</TABLE>
</div>

 

[arst06d]

ahhh - I seem to have managed it.
Not quite sure how it all works, mind you.

Here's the result - can anyone suggest any improvements?

<div style="BACKGROUND: #32659c; MARGIN: 5em 0px; WIDTH: 521px; POSITION: relative">
<div id="ctl" style="BACKGROUND: #fff; LEFT: 0px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 0px; HEIGHT: 20px"><div id="quadtl" style="FONT-SIZE: 150px; LEFT: -8px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute">•</div></div>
<div id="cbl" style="BACKGROUND: #fff; LEFT: 0px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 100%; HEIGHT: 20px"><div id="quadbl" style="FONT-SIZE: 150px; LEFT: -8px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute; TOP: -17px">•</div></div>
<div id="ctr" style="BACKGROUND: #fff; LEFT: 501px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 0px; HEIGHT: 20px"><div id="quadtr" style="FONT-SIZE: 150px; LEFT: -25px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute">•</div></div>
<div id="cbr" style="BACKGROUND: #fff; LEFT: 501px; OVERFLOW: hidden; WIDTH: 20px; COLOR: #32659c; POSITION: absolute; TOP: 100%; HEIGHT: 20px"><div id="quadbr" style="FONT-SIZE: 150px; LEFT: -25px; COLOR: #32659c; LINE-HEIGHT: 40px; FONT-FAMILY: arial; POSITION: absolute; TOP: -17px">•</div></div>
<div id="txt" style="position:absolute; BACKGROUND: #32659c; top:100%; left:15px; width:490px; height:20px; color:#32659c;">BOO</div>
<TABLE cellspacing="0" cellpadding="3" BORDER="1" WIDTH="521" bordercolor="#32659c">
<tr >
<td colspan="7" height="25" valign="center" bgcolor="#32659c"><span class="LoggainRubrik">&nbsp;&nbsp;&nbsp;&nbsp;*1. Applicants (Buyer) Details</span></td>
</tr>
<tr>
<td width="296" valign="top" style="BORDER-RIGHT: medium none; BACKGROUND-COLOR: white">
<span class="text"><label for="applicantsname">Applicant Name:</label><br>
<input name="applicantsname" id="applicantsname" maxlength="35" style="WIDTH: 250px"><br>
<br>
<label for="applicantsaddress">Full Address (including post code):</label><br><TEXTAREA id=applicantsaddress style="WIDTH: 250px" name=applicantsaddress rows=4 wrap=VIRTUAL></TEXTAREA>
</span></td>

<td width="296" valign="top" style="BORDER-LEFT: medium none; BACKGROUND-COLOR: white">
<span class="text"><label for="contactname">Contact Name:</label><br>
<input name="contactname" id="contactname" maxlength="35" style="WIDTH: 250px"><br>
<br>
<label for="applicantsphone">Telephone Number:</label><br>
<input name="applicantsphone" id="applicantsphone" maxlength="20" style="WIDTH: 250px"><br>
<br>
<label for="applicantsfax">Fax Number:</label><br>
<input name="applicantsfax" id="applicantsfax" maxlength="20" style="WIDTH: 250px"><br>
<br>
<label for="applicantreference">Applicant Reference:</label><br>
<input name="applicantreference" id="applicantreference" maxlength="16" style="WIDTH: 250px" >
</span></td>
</tr>
</TABLE>

</div>

 

[BillyRayPreachersSon]

While it is very clever, you should be aware that Stu's solution fails miserably in Firefox when the user changes the font size from 100% (either up or down).

As most users will customise their viewing experience for their own needs, you may want to look to a different solution if you want to have a even a modicuim of consistency.

Hope this helps,
Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[BillyRayPreachersSon]

Aah - after reading further on his site, I'd suggest taking on board his suggestion of using ems for unit values... however, if you are trying to get a pixel-perfect non-scalable layout, then you may have to use a different solution (probably image based).

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[ChrisHunt]

I don't know what's going wrong, but if you move all those inline style declarations into a seperate <style> section, you (and we) will find it a lot easier to see what's going on.

The other suggestion I'd make is to build up step-by-step from Stu's example. Start with a straight copy, then swap the <div id="txt"> for a single-cell table, then add some more cells, etc. Testing and tweaking at each stage.

Playing with the original, I see that all that absolute positioning with pixel values breaks down badly when you resize the text. I rejigged Stu's CSS in a way that may give you a better start:

.curvy {position:relative; background:#89a; color:#000; margin:5em 0;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:.133em; height:.133em; color:#89a; background:#fff;overflow:hidden;z-index: 1;font-size:150px; font-family:arial;}
#ctl {top:0px; left:0px;}
#cbl {top:100%; left:0px; margin-top:-.133em;}
#ctr {top:0px; left:100%; margin-left:-.133em;}
#cbr {top:100%; left:100%; margin-top:-.133em;margin-left: -.133em;}
#quadtl, #quadtr, #quadbl, #quadbr {position:absolute;  color:#89a;line-height:.266em;z-index: 1;}
#quadtl {left:-0.053em;}
#quadtr {left:-0.166em;}
#quadbl {left:-0.053em; top:-0.113em;}
#quadbr {left:-0.166em; top:-0.113em;}
#txt {margin-top:0.033em; margin-left:0.033em; padding: 0.5em; color:#eef; z-index: 2; position:relative;}

It's still a pixel out here and there when you resize, but it looks better. It also doesn't require a fixed height or width - which should help when you put your table in. Just put it in the <div id="txt">.

You might like to take a look at

http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html

for a different method of getting rounded corners.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[arst06d]

Many thanks

 

[arst06d]

Hi

I have tried to implement the Nifty Corners technique suggested by ChrisHunt above. Having problems.

Check out

http://jigsaw4u.afraid.org/

The first heading is just <div><h1></h1></div> and displays OK in IE. The second one is the same, but contained in a <td></td> and, as you can see, in IE it's not quite right ....

Any suggestions, please?

Also - why in FF does it all render with no delay, whereas in IE there is a noticable delay before the nifty borders are applied.

Many thanks.

David

 

[arst06d]

further to the above
it appears to be the hit counter from webstats that is the delay problem. Once the logo appears, the corners are rendered.
Don't know why, though. The corner rendering is done with window.onload(), while the counter is a script tag within the body.
Can anyone explain the precedence - and why FF is different?