CSS Fancy Corner Box Problems.

Similar to rounded corner boxes but not.

[Kaylx]

Hi,

I'm a complete noob (hate that word) to rounded corner boxes and what have you so bare with me...
Basically i want to get away from using tables where possible and make everything CSS based. I created a special offer box a while ago and i've been trying to convert it over to CSS.

It's not displaying right and i can't seem to fix it. :$

There's two problems:
1) The bottom right corner graphic isn't where it should be.
2) The text isn't where it should be - it's indented.

Hope someone can help. :)

[edited by: tedster at 7:18 pm (utc) on Mar. 8, 2008]

[Kaylx]

Forgot to say the way i'm trying to go about it is to have a container div which holds the two corner graphics and the context box. The first graphic goes at the top left corner of the container, the second at the bottom right, and the content box fills in the rest...

[MarkFilipak]

#container{position:absolute;width:...;height:...}
#topLeft{position:absolute;top:0;left:0}
#bottomRight{position:absolute;bottom:0;right:0}

[Kaylx]

OMG that never worked before... :¦ hmmm... the html structure was slightly different tho. Thanks very much! I can't believe it was that easy. *embarrassed* lol

[MarkFilipak]

Don't know whether it matters but what I wrote won't work in IE6. In IE6 you have to do some "expression" fanciness to emulate bottom and right. Do you need help with that?

[Kaylx]

Yeh i wouldn't mind thanks. I wanna try and make it as accessible as possible. IE5+ say lol. Any advice on what the best way is to check browser compatibility?

[Kaylx]

I forgot you couldn't post links on these forums, my bad so here's the code.

--- HTML ---

<div class="offerBox">
<span class="TL"></span>
<p><b>Test Offer</b><br />
<br />
Three Ventian or Vertical Blinds for <b>£80</b> <br />
<br />
Offer subject to size and availability. Valid until 1st January 1970. <br />
<br />
For more information please call us. <br /></p>
<span class="BR"></span>
</div>

--- CSS ---

.offerBox
{
margin: 0 auto;
padding: 15px;
display: block;
width: 500px;
height: auto;
background: #CCFFFF;
position: relative;
}
.TL
{
margin: 0;
padding: 0;
width: 105px;
height: 105px;
background: transparent url(offerBox_tl.gif) top left no-repeat;
position: absolute;
top: 0; left: 0;
}
.BR
{
margin: 0;
padding: 0;
width: 105px;
height: 105px;
background: transparent url(offerBox_br.gif) bottom right no-repeat;
position: absolute;
bottom: 0; right: 0;
}
.offerBox p
{
margin: 0;
padding: 4px;
background-color: #ffdfdf;
border: 1px solid #ffb9b9;
color: inherit;
}

[MarkFilipak]

I really don't think you have to worry about IE5 or IE5.5.
IE6 doesn't do bottom or right positioning. To get it to behave you have to use expressions. For example:

#myElement{right:0}
#myElement{left:expression(String(this.parentNode.offsetWidth-this.offsetWidth)+'px')}

Note how the argument to expression is any javascript that returns a string.

IE6 ignores the first line and other browsers ignore the second line. Warning: offsetWidth, offsetHeight, etc. are 'outside' dimensions (including borders) whereas CSS width, height, etc. are 'inside' dimensions (at the padding boundary), so you must adjust your expressions appropriately.