Tue, 2004-11-02 13:49
Hi,
I want to place a horizontal rule across about 95% of the width of a page, then have an image on the right end of the hr, touching the right side of the page.
If the page is resized I want the hr to be dynamic, but I still want the image to stay on the right side of the page.
Is this possible, and if so, can anyone help?
Also, Firefox shows my <hr> in black, Opera and IE6 paints them white. I can fix this using <hr color="#ffffff"> but then this breaks the validation at w3c.org
Isn't web design fun?!
Gray
Tue, 2004-11-02 16:54
#1
hr and an image on the same line
ok... as far as color goes... opera, ie, and mozilla all view hr tags a little differently. you need to define your border color, and your background color, and your height to keep it equivalent in all browsers:
hr.white {
color: #fff;
background-color: #fff;
border: 1px solid #fff;
height: 3px;
}
as far as the image goes, you can do something like this:
<div id="hrImage"> <span class="left"><hr class="white" /></span> <span class="right"><img src="" alt="" /></span> </div>
then, you'd need to define css to line them up right:
div#hrImage {
clear: both;
}
span.left {
float: left;
width: 94%;
}
span.right {
float: right;
width: 5%;
}
with a little playing with the widths, you can get your alignment how you want it.
You can't win, you can't lose, you can't break even. You can't even get out of the game!
Tue, 2004-11-02 18:18
#2
hr and an image on the same line
Thanks for that, much appreciated.
Gray