Forum Moderators: not2easy
No hacks. Valid 4.01 transitional (will probably work in strict too.)
Mind you, this is NOT the solid background border solution - this is 1px borders on a white background. There is a bit of a difference in approach.
What you have is a rounded corner rectangle, copy left, floated image right.
The problems:
- IE 6 wouldn't cover up borders with background OR markup images. Ugly.
- with other floated elements outside this box, IE 6 bullied them out of line. Ugly.
- Using the popular method of a border top div with two floated background image divs, IE 6 would leave a 2px gap no matter what, leaving a break in between the corners and borders. Ugly.
-IE 6 would leave borders hanging below the rounded corners in the bottom div like an arrow pointing to stupidity.
- Just as I approached a positive solution, IE 6 even overrode non-transparent images - that is, with an html markup image in a div, or the raw image floated, it still showed transparent, allowing the borders to come through.
This works with background images for borders, my logic being well, a background image is not the same as a border. And it worked. Unless you can find a hole. :-)
The bad: When resizing the window it only goes wonky when you scale it *really* narrow, so it will need some layout framework to prevent it from getting so narrow the floated element makes it explode.
Some experiments you may find interesting:
-> Check it out in IE6 (Did I say it worked in IE6?)
-> Resize the type, it holds together
-> Drop it in a page with other elements, it holds together, you may want to adjust the 69%
You may need a clearing div below the box if you put elements below it to keep IE 6 from doing the nasty stuff it does.
You will need:
--> 24 X 24 px gif with a black circle with a stroke of 1px wide. Make sure the circle goes al lthe way to the edges of the image. Single image, full circle, not 4 images of the 4corners. (24x24-blk.gif)
--> 250 X 320 image, with 12px radius corners (fp-sample.jpg)
--> A 5 X 9 px gif for the list image, checkmark, arrow, whatever (list-bug.gif)
-- An 8 x 15 px gif for the h3 link image, arrow, bullet, whatever (header-bug.gif)
--> 1 X 1 px black gif (blk_pixel.gif.) No it's not a spacer. :-)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line please -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>1 PX rounded borders</title>
<meta name="Description" content="">
<meta name="keywords" content="">
<style type="text/css">
body {
background-repeat: repeat-x;
background-color:#ffffff;
color: #000000;
font-family: Arial, Helvetica, Sans-Serif;
padding: 0;
margin: 36px 8px 0 8px;
}
.top_blk,.bot_blk { height: 12px; }
.top_blk { background:url(blk_pixel.gif) top repeat-x; }
.bot_blk { background:url(blk_pixel.gif) bottom repeat-x; }
.top_blk .l,.bot_blk .l,
.top_blk .r,.bot_blk .r {
height: 12px;
width: 12px;
font-size: 2px;
margin:0;
padding:0;
background:url(24x24-blk.gif);
}
.top_blk .l { margin: 0; float: left; background-position: 0 0; }
.top_blk .r { margin: 0; float: right; background-position: 12px 0; }
.bot_blk .l { margin: 0; float: left; background-position: 0 -12px; }
.bot_blk .r { margin: 0; float: right; background-position: -12px -12px; }
.clr { clear: both; }
#main_content { padding:12px 0; }
#intro_outer {
background:url(blk_pixel.gif) left repeat-y;
float: left;
padding: 0;
margin:0;
width: 69%;
}
#intro_inner {
background:url(blk_pixel.gif) right repeat-y;
float: left;
padding: 0;
margin:0;
}
#intro_image {
float: right;
width:250px;
height:320px;
background:url(fp-sample.jpg) center center no-repeat;
}
#intro { font-size: 90%; padding: 1px 12px 0 12px; }
#intro_content { margin:0 240px 0 0; }
#intro h1 { color: #bf0000; font-size: 130%; font-weight: 900; padding:0; }
#intro h2 { color: #0000a0; font-size: 115%; font-weight: 900; margin:0; padding: 4px 0; }
#intro ul { margin:0; padding: 0 0 0 24px; }
#intro li { list-style-image: url(list-bug.gif); margin:0; padding: 1px; }
#intro h3 {
color: #ff0000;
font-size: 100%;
text-align: right;
font-weight: 900;
margin:0 24px 0 0;
padding: 0;
}
#intro a { padding: 0 16px 0 0; background: url(images/header-bug.gif) top right no-repeat; }
#intro a:link { color: #ff0000; text-decoration: none; font-style: italic; }
#intro a: visited { color: #ff8040; text-decoration: none; font-style: italic; }
#intro a: active { color: #000000; text-decoration: none; font-style: italic; }
#intro a:hover { color: #ff0000; text-decoration: none; font-style: italic; }
</style>
</head>
<body>
<div id="main_content">
<div id="intro_outer">
<div id="intro_inner">
<div class="top_blk"><div class="l"></div><div class="r"></div></div>
<div id="intro">
<div id="intro_image"></div>
<div id="intro_content">
<h1>Your main heading</h1>
<h2>Sub one:</h2>
<ul>
<li>List of</li>
<li>Some value</li>
<li>To your</li>
<li>customers</li>
</ul>
<h3><a href="">Link one</a></h3>
<h3><a href="">Link two</a></h3>
<h2>Sub two:</h2>
<ul>
<li>More valuable</li>
<li>items go</li>
<li>here</li>
</ul>
<h3><a href="">Link one</a></h3>
<h3><a href="">Link two</a></h3>
</div>
</div>
</div>
<div class="clr"></div>
<div class="bot_blk"><div class="l"></div><div class="r"></div></div>
</div>
</div> <!-- end inner and outer -->
</div> <!-- end main -->
</body>
</html>
