Forum Moderators: not2easy
Hopefully someone can help me.
I use the following technique to create every web designer's much loved topic - "rounded corners". It is based on "Simple Corners by Ted" and seems to be most cross browser compliant method I can find (without using javascript) of creating rounded corner containers.
The XHTML markup:
<div class="box">
<!--- box border -->
<div class="lb">
<div class="rb">
<div class="bb">
<div class="blc">
<div class="brc">
<div class="tb">
<div class="tlc">
<div class="trc">
<!-- -->
<div class="content">
Some content here
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS:
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*FEAUTURE BOX
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.box
{
position: relative;
/* margin-left: auto;
margin-right: auto;*/
margin-top: 3em;
padding: 0;
text-align: left;
width: 100%;
_width: 98%;
/* <-- use this to tie width to viewport size */ /*width: 40em;/* <-- use this for a set width */
}
.box .content
{
padding: 3em;
}
.box .content h1
{
color: #0354c2;
font-weight: bold;
font-size: 1.2em;
}
.box .content p
{
color: #3b3b3b;
line-height: 1.3em;
}
/* ---=== border code follows ===--- */
/*
tlc = top left corner
trc = top right corner
blc = bottom left corner
brc = bottom right corner
lb = left border
rb = right border
tb = top border
bb = bottom border
*/
.box .tlc, .box .trc, .box .blc, .box .brc
{
background-color: transparent;
background-repeat: no-repeat;
}
.box .tlc
{
background-image: url(images/tlc.gif);
background-position: 0% 0%;
}
.box .trc
{
background-image: url(images/trc.gif);
background-position: 100% 0%;
}
.box .blc
{
background-image: url(images/blc.gif);
background-position: 0% 100%;
}
.box .brc
{
background-image: url(images/brc.gif);
background-position: 100% 100%;
}
.box .tb, .box .bb
{
background-color: transparent;
background-repeat: repeat-x;
}
.box .tb
{
background-image: url(images/tb.gif);
background-position: 0% 0%;
}
.box .bb
{
background-image: url(images/bb.gif);
background-position: 50% 100%;
}
.box .rb
{
background-image: url(images/r.gif);
background-position: 100% 0%;
background-repeat: repeat-y;
}
.box .lb
{
background-image: url(images/l.gif);
background-position: 0% 100%;
background-repeat: repeat-y;
}
Okay so it's quite long winded but it does work well in IE6, Firefox, Opera and ..... IE7 (occasionally).
The images I use are as follows:
bb.gif (bottom border) - 58 bytes - 2x32
blc.gif (bottom left corner) - 373 bytes - 32x32
brc.gif (bottom right corner) - 373 bytes - 32x32
l.gif (left border) - 48 bytes - 37x1
r.gif (right border) - 48 bytes - 37x1
tb.gif (top border) - 58 bytes - 2x32
tlc.gif (top left corner) - 373 bytes - 32x32
trc.gif (top right corner) - 373 bytes - 32x32
This all works very well in all browsers apart from IE7 where sometimes the top border and corners do not display. If I do another refresh they will then often be rendered. Also if I select the text/div in the browser and drag up all of a sudden my top border appears again.
Has anyone else come across something similar.
Thanks,
Ben
Never had similar problems like that, but if you know the width (read: is fixed) of element, you can do the same effect with 3 images only and no nesting at all..top img:
/---------------------\
middle img (background-repeat-y):
¦ (transparent in middle) ¦
and bottom img:
\---------------------/
html something like this:
<div style="width: x; height: y; background: url(top_img.gif)"></div>
<div style="background: url(middle_img.gif) repeat-y; width: x">
my content
</div>
<div style="width: x; height: y; background: url(bottom_img.gif)"></div>
to get:
/------------\
¦ my content ¦
\------------/
It's strange that I only have the problem with the top border/corners yet the bottom ones are fine and always display.
Thanks,
Ben
.box .content
{
padding: 3em;
zoom: 1;
}
does it help?
other alternative is to get specific with the h1 margins.. i.e. don't let them default actually give them a margin.. it might need both together
