/    Sign up×
Community /Pin to ProfileBookmark

<HR> border

Copy linkTweet thisAlerts:
Jan 16.2004

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:
[FONT=courier new]border: 0px #000000 solid[/FONT]
to get rid of the border, but it has no effect in IE.

Thanks for any help, BestZest

to post a comment
CSS

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@fredmvJan 16.2004 — Maybe:border: 0 none;
Copy linkTweet thisAlerts:
@BestZestauthorJan 16.2004 — Thanks, but I'm afraid it doesn't work.

[i]Add. info:[/i]

Internet Explorer v6.0

Netscape v7.1

[i]The code:[/i]

[FONT=courier new]

<style>

hr {width: 500;

height: 20;

background-image: url('hr.jpg');

border: 0 none;}

</style>

[/FONT]

Thanks again, BestZest
Copy linkTweet thisAlerts:
@ray326Jan 16.2004 — Maybe 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.
Copy linkTweet thisAlerts:
@spufiJan 16.2004 — 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.
Copy linkTweet thisAlerts:
@davidbrentJan 18.2004 — what about


[CODE]hr.test {
border: 0;
background: url(xxx.gif);
}[/CODE]


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*
Copy linkTweet thisAlerts:
@BestZestauthorJan 18.2004 — 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:

[FONT=courier new]<style>

.hr {position:relative;

left:60;

width: 500;

height: 20;

background-image: url('hr.jpg')}

</style>

First content.

<div class="hr"></div>

Second bit.

[/FONT]

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 :p

BestZest
Copy linkTweet thisAlerts:
@ray326Jan 18.2004 — You need to put units (probably px) on those positioning values.
Copy linkTweet thisAlerts:
@DaveSWJan 20.2004 — [i]Originally posted by BestZest [/i]

[B]Just out of interest, does anyone know how you can centre objects in CSS, because that would be a better solution.[/B][/QUOTE]

you could apply text-align: center to the parent element.
×

Success!

Help @BestZest spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...