Work is continuing apace on the site I am working on:
http://homepage.ntlworld.com/graham.reeds/space
Sometimes I need to split the page into two or more logical blocks.
Naturally a horizontal rule would be the ideal divider for this.
However the current method uses three images to blend it in with the
border effect like so:
<img
src="images/left_middlebar.jpg" alt="" width="54" height="22" /><img
src="images/center_middlebar.jpg" alt="" width="691" height="22"
/><img
src="images/right_middlebar.jpg" alt="" width="55" height="22" />
Logically the ideal solution would to wrap a couple of spans around the
hr. That unfortunately causes validation to fail so div's are being
employed instead:
<div class="page-splitter splitter-left">
<div class="splitter-right">
<hr />
</div>
</div>
A little CSS:
.page-splitter,
.page-splitter hr,
.splitter-left,
.splitter-right {
display: block;
height: 22px;
clear: both;
}
.page-splitter hr {
border: none;
margin-left: 54px;
margin-right: 55px;
background: #fff url(../images/center_middlebar.jpg) top left repeat-x;
}
.splitter-left,
.splitter-right {
width: 100%;
}
.splitter-left {
background: transparent url(../images/left_middlebar.jpg) left top
no-repeat;
}
.splitter-right {
background: transparent url(../images/right_middlebar.jpg) right top
no-repeat;
}
And the result can be seen halfway down:
http://homepage.ntlworld.com/graham.reeds/space/ (ignore the problem
with the adverts - I know they are broken). The bar works fine in
Windows FF and O8. Unfortunately IE6 is broken. The middle central bar
has a border and is lowered by around 10 pixels.
The fix suggested for IE on http://www.sovavsiti.cz/css/hr.html doesn't
actually work in this instance - my knowledge of CSS is limited so the
why's and wherefore's are beyond me - so I again turn to this list for
assistance.
Thanks, Graham Reeds.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
