Does anyone know how to get rid of the border on a HR tag in IE? I want to replace the horizontal rule with a image that I have, and so i don't need the border that makes the HR up. In Netscape i can easily use:
border: 0px #000000 solid
to get rid of the border, but it has no effect in IE.
Thanks for any help, BestZestMaybe:border: 0 none;Thanks, but I'm afraid it doesn't work.
Add. info:
Internet Explorer v6.0
Netscape v7.1
The code:
<style>
hr{width: 500;
height: 20;
background-image: url('hr.jpg');
border: 0 none;}
</style>
Thanks again, BestZestMaybe you need to replace the hrs with a class .hr applied to a div. ??? I know; not as clean but maybe a lot more portable.If you use a <div> tag, make sure to watch how you define the font size and hieght for it because I had to play around with them when testing in Mozilla, IE, and Opera. I didn't have a truely empty <div> tag, so maybe not having a space in there would make a difference. I wasn't using a background image either, but I was trying to do the same thing concept wise.what about
hr.test {
border: 0;
background: url(xxx.gif);
}
then within the HR
<hr class="test">
does this work??
*Edit* Your could always use a div defining a height and background image. let me know if you want to use that*Thanks for your help guys (or girls?), but in the end I gave up with the <HR> tag, it seems that IE ignores the 'border' attribute when you specify a background image. Instead I have used a DIV layer with a background image. If you are interested the code is below:
<style>
.hr{position:relative;
left:60;
width: 500;
height: 20;
background-image: url('hr.jpg')}
</style>
First content.
<div class="hr"></div>
Second bit.
You can see I have positioned the layer specifically. I'm lucky in that I know all my HR's will be the same distance from the left, so I can set this, but for other designs this wouldn't work. Just out of interest, does anyone know how you can centre objects in CSS, because that would be a better solution. It looks the same in both IE and Netscape, which is great, but I havn't been able to test it in Opera because I dont have it at the moment.
Thanks again for the help, and I hope everyone's learnt something here
BestZestYou need to put units (probably px) on those positioning values.Originally posted by BestZest
Just out of interest, does anyone know how you can centre objects in CSS, because that would be a better solution.
you could apply text-align: center to the parent element.
border: 0px #000000 solid
to get rid of the border, but it has no effect in IE.
Thanks for any help, BestZestMaybe:border: 0 none;Thanks, but I'm afraid it doesn't work.
Add. info:
Internet Explorer v6.0
Netscape v7.1
The code:
<style>
hr{width: 500;
height: 20;
background-image: url('hr.jpg');
border: 0 none;}
</style>
Thanks again, BestZestMaybe you need to replace the hrs with a class .hr applied to a div. ??? I know; not as clean but maybe a lot more portable.If you use a <div> tag, make sure to watch how you define the font size and hieght for it because I had to play around with them when testing in Mozilla, IE, and Opera. I didn't have a truely empty <div> tag, so maybe not having a space in there would make a difference. I wasn't using a background image either, but I was trying to do the same thing concept wise.what about
hr.test {
border: 0;
background: url(xxx.gif);
}
then within the HR
<hr class="test">
does this work??
*Edit* Your could always use a div defining a height and background image. let me know if you want to use that*Thanks for your help guys (or girls?), but in the end I gave up with the <HR> tag, it seems that IE ignores the 'border' attribute when you specify a background image. Instead I have used a DIV layer with a background image. If you are interested the code is below:
<style>
.hr{position:relative;
left:60;
width: 500;
height: 20;
background-image: url('hr.jpg')}
</style>
First content.
<div class="hr"></div>
Second bit.
You can see I have positioned the layer specifically. I'm lucky in that I know all my HR's will be the same distance from the left, so I can set this, but for other designs this wouldn't work. Just out of interest, does anyone know how you can centre objects in CSS, because that would be a better solution. It looks the same in both IE and Netscape, which is great, but I havn't been able to test it in Opera because I dont have it at the moment.
Thanks again for the help, and I hope everyone's learnt something here
BestZestYou need to put units (probably px) on those positioning values.Originally posted by BestZest
Just out of interest, does anyone know how you can centre objects in CSS, because that would be a better solution.
you could apply text-align: center to the parent element.