PDA

View Full Version : some help fixing rounded box please



abcdefgqwerty
Aug 8th, 2009, 04:16 AM
Im trying to make a rounded box with css and html. I cant really attach the images, but for some reason the box is missing a small piece. Im working on this website but having trouble figuring out what im missing.

I figured the images would help so here they are:
http://rapidshare.com/files/265263372/cssimages.zip.html

http://www.midmichigansoftware.com/

html code


<div class="theboxesparadise_98">
<div class="header">
<div class="theboxesparadise_98">
<table width="85%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="tl"></td>
<td class="t"><h2><center>header1</center></h2></td>
<td class="tr"></td>
</tr>
<tr>
<td class="ml"></td>
<td class="m">
<div style="padding:10px 0px 0px 0px;">
</div>
</td>
<td class="mr"></td>
</tr>
<tr>
<td class="ml">
</td>
<td class="m">
<div style="padding:10px 0px 0px 0px;">
<center><H2>text </H2></center><p></p>
<font size="5">
</font>
<center> <H1>sometext</H1> </center>
<font size="5">
</font>
</div>
</td>
<td class="mr">
</td>
</tr>
<tr>
<td class="bl"></td>
<td class="b"></td>
<td class="br"></td>
</tr>
</table>
</div>
</div>
</div>


css code


.theboxesparadise_98 { }
.theboxesparadise_98 .header { font-size: 16px; font-weight: bolder; padding:0px;}
.theboxesparadise_98 td { padding:0px; margin:0px; background: white; }
.theboxesparadise_98 .tr { width:16px; height: 48px; background: transparent url(/images/tr.png) no-repeat top right; }
.theboxesparadise_98 .tl { width:16px; height: 48px; background: transparent url(/images/tl.png) no-repeat top left; }
.theboxesparadise_98 .t { background: transparent url(/images/t.png) repeat-x top left; vertical-align:middle; padding-top:7px;}

.theboxesparadise_98 .mr {width:16px; background: transparent url(/images/r.png) repeat-y top right; font-size: 1px; }
.theboxesparadise_98 .ml {width:16px; background: transparent url(/images/l.png) repeat-y top right; font-size: 1px; }
.theboxesparadise_98 .m {}

.theboxesparadise_98 .br { width:16px; height:16px; background: transparent url(/images/br.png) no-repeat top right; }
.theboxesparadise_98 .bl { width:16px; height:16px; background: transparent url(/images/bl.png) no-repeat top left; }
.theboxesparadise_98 .b { background: transparent url(/images/b.png) repeat-x top left ; font-size: 1px; line-height:1px;}

ckeyrouz
Aug 8th, 2009, 04:45 AM
check this site:
http://www.emblematiq.com/lab/niceforms/

viettel_adsl
Aug 8th, 2009, 05:25 AM
Of course you can tru the CSS3 feature:
-moz-border-radius:5px;-webkit-border-radius:5px;

abcdefgqwerty
Aug 9th, 2009, 04:11 AM
This is more what I wanted and its compatible with more versions of the browsers unlike the new css3.

effpeetee
Aug 9th, 2009, 06:16 PM
There are several references here (http://exitfegs.co.uk/Sources.html)about rounded corners. Right hand column, near the top.

Frank