I just can't get it right

It's giving me headache

[Mijae]

[snip]

The top example on that page is how I WANT it to look, and its coded with a table.

Below are the my poor attempts to CSS it because IE doesn't load tables properly (it slows down page loading).

You can see what it should look like at invoid.net

It's been days and I give up, I just can't make it work :(

[edited by: createErrorMsg at 4:26 pm (utc) on Nov. 7, 2005]
[edit reason] No urls, please. See forum charter. [/edit]

[Robin_reala]

Welcome to WebmasterWorld :)

1st off, no personal links are allowed here - you should just post the code you're having problems with.

Secondly, the ideal code for you would be:

body { background-color: #f7f7f7; }
.stuff { border: 1px solid #dedede; border-radius: 8px; }

In practise that'll only currently work in Safari 2.0.2+ (and with a bit of tweaking in Firefox/Mozilla), which is annoying. For cross browser compatibility you're looking at either nested divs with a corner image in each (4 normally, 2 if your boxes are fixed width. There are plenty of threads on how to do this, for example:

[webmasterworld.com ]

[Mijae]

I've been looking all over the place, but all the examples I've found are for 4 images, my thing has 9 total images :(

[Robin_reala]

I think you're still thinking in a table layout manner :) The 4 images are the 4 corners only - the rest can be done using normal CSS borders.

[Mijae]

Oh snap, it just hit me.

The image I had, had the border in the middle, and I did't even think of making a new set of buttons and then just use margins to archieve the safe effect.

D'oh.

[Mijae]

Ok, I got it to look like I want with CSS, with only one minor problem.

.contentWrapper {
margin-top: 30px; margin-bottom: 30px;
margin-left: 30px; margin-right: 30px;
padding: 0px;
border: 0px;
}
.content
{
margin: 0px;
padding: 0px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
color: #000000;
}
.content p {
margin:20px;
}
.roundedCornerSpacer {
margin: 0px; padding: 0px; border: 0px;
clear: both;
font-size: 1px; line-height: 1px;
}
.borderTL, .borderTR, .borderBL, .borderBR {
width: 20px; height: 20px;
padding: 0px; border: 0px;
z-index: 99;
}
.borderTL, .borderBL { float: left; clear: both; }
.borderTR, .borderBR { float: right; clear: right; }
.borderTL { margin: -1px 0px 0px -1px; }
.borderTR { margin: -1px -1px 0px 0px; }
.borderBL { margin: -20px 0px 0px 0px; }
.borderBR { margin: -20px 0px 0px 0px; }
.borderTL {
margin-left: -4px;
ma\rgin-left: -1px;
}
html>body .borderTL {
margin-left: -1px;
}
.borderTR {
margin-right: -4px;
ma\rgin-right: -1px;
}
html>body .borderTR {
margin-right: -1px;
}
.borderBL {
margin-left: -3px;
ma\rgin-left: 0px;
}
html>body .borderBL {
margin-left: 0px;
}
.borderBR {
margin-right: -3px;
ma\rgin-right: 0px;
}
html>body .borderBR {
margin-right: 0px;
}
<div class="contentWrapper">
<div class="content">
<img class="borderTL" src="/forum/style/classic/ltop.gif" alt="&nbsp;" width="20" height="20" />
<img class="borderTR" src="/forum/style/classic/rtop.gif" alt="&nbsp;" width="20" height="20" />
<p>STUFF GOES HERE</p>
<div class="roundedCornerSpacer">&nbsp;</div>
</div>
<div class="bottomCorners">
<img class="borderBL" src="/forum/style/classic/lbot.gif" alt="&nbsp;" width="20" height="20" />
<img class="borderBR" src="/forum/style/classic/rbot.gif" alt="&nbsp;" width="20" height="20" />
</div>
</div>

That the code, and the problem I have is that any tables inside those divs (where STUFF GOES HERE) ignore the margin/padding. Why?