/    Sign up×
Community /Pin to ProfileBookmark

I want to have "border-color" displayed with "hr" elements

… and I have problems with it (i.e. the “border-color” being visible) in my particular case.

It all started when the [URL=http://jigsaw.w3.org/css-validator]CSS validator[/URL] complained about my “[URL=http://tadej-ivan.50webs.com/style.css]style.css[/URL]” file: “[I]You have no color with your background-color : hr.line[/I]“, however, if I added it, there was no effect (or at least I see none), since they seem to be the same thing, i.e. a “color” and a “background-color” properties in this particular case, only that “background-color” takes precedence (i.e. if I use both, and with different values, the “background-color” one is applied); so should I just set it to the same value ??

I was then referred to [URL=http://forums.devshed.com/showthread.php?p=1492627#post1492627]this particural post[/URL] at the DP forum, and so I am now using “[I]background-color: transparent;[/I]“, but still, the “border-color” is not visible in any of these cases below (i.e. with and without “transparent” for “background-color” property)

[CODE]hr.line {
color: #ffffcc;
background-color: transparent;
border-color: #0000ff;
width: 80%;
height: 4px;
}[/CODE]

[CODE]hr.line {
color: #ffffff;
background-color: ffffcc;
border-color: #0000ff;
width: 80%;
height: 4px;
}[/CODE]

thanks in advance, tayiper

to post a comment
CSS

9 Comments(s)

Copy linkTweet thisAlerts:
@ray326May 15.2006 — The hr usually indicates a sectional change and quite often it's better to use the border of a div than an hr to get the effect.
Copy linkTweet thisAlerts:
@NogDogMay 15.2006 — "color" is the foreground color. It really has no applicability with a HR element. However, the CSS validator always throws a warning (not an error, mind you) if you specify either background-color or color without the other one. It does this due to the fact that if you don't specify both, you *might* run into unexpected problems.

For your HR, you can either just ignore this warning, or assign a color (which can just be "inherit") if you want to avoid the warning.
Copy linkTweet thisAlerts:
@tayiperauthorMay 16.2006 — Thanks for the replies guys ...

For your HR, you can either just ignore this warning, or assign a color (which can just be "inherit") if you want to avoid the warning.[/QUOTE]

Yeah, I've done that, and there was no warning anymore (and I do understand that this is not the same as error, but thanks anyway -- ? ...) tried with both "inherit" and "transparent" values, but then again, the "border-color" is not visible nomather what I try.


But you see, if I DO understand why the "border-color" is not displayed in the first case/example above (the one with "inherit" or "transparent" values, since this means inheritation of the color from the parent element), I DO NOT understand that for the second example where I specified the "border-color" property explicitly. Again, note that I've experimented with various different values; for starters with black and white colors, which are the most obvious, then with blue and read etc. etc.


P.S. -- I guess that it's just that I don't understand something about color-inheriting and stuff.


tayiper
Copy linkTweet thisAlerts:
@NogDogMay 16.2006 — You'll also need to specify a border-width if you want to see a border, or just use the "border" shorthand:
<i>
</i>border: solid 1px #ff0000;
Copy linkTweet thisAlerts:
@tayiperauthorMay 16.2006 — You'll also need to specify a border-width if you want to see a border, or just use the "border" shorthand:
<i>
</i>border: solid 1px #ff0000;
[/QUOTE]



Well thank you so much for this particular reply [I][B]NogDog[/B][/I] -- ?, it's that without even trying it first, I just know that this will solve my problems ...


tayiper
Copy linkTweet thisAlerts:
@tayiperauthorMay 26.2006 — Oh well, just one more question (a pretty much straight-forward one), and one observation to let you know about ...


The question is, could anyone please tell me what is the "long" version of that line [I][B]NogDog[/B][/I] has suggested (i.e. the line with following code: [I]border: solid 1px #0000ff;[/I]) ?? It's just that I have all the other stuff in my "style.css" file in a "long variant", so I thought I would like to have this one too ...


And the observation is that althought this works in Internet Explorer (i.e. the "color" and "border" properties' values are applied), it doesn't in Firefox; meaning that nomather what hex-code I put for color property, it's always white. For instance consider this example below ...

It is black in IE (as it should be), but not in FF:

[CODE]hr.line {
color: #000000;
background-color: transparent;
border: solid 1px #0000ff;
width: 80%;
height: 4px;
}[/CODE]


thanks again, tayiper
Copy linkTweet thisAlerts:
@tayiperauthorMay 30.2006 — The question is, could anyone please tell me what is the "long" version of that line [I][B]NogDog[/B][/I] has suggested (i.e. the line with following code: [I]border: solid 1px #0000ff;[/I]) ?? It's just that I have all the other stuff in my "style.css" file in a "long variant", so I thought I would like to have this one too ...[/QUOTE]

*bump* ...


tayiper
Copy linkTweet thisAlerts:
@ray326May 30.2006 — border: solid 1px #0000ff; (Personally I think it "reads" better as border:1px solid #00f; ie "one pixel solid blue" but that's just me.)

border-style: solid;

border-width: 1px;

border-color: #00f;
Copy linkTweet thisAlerts:
@tayiperauthorMay 30.2006 — Thanks much !!


tayiper
×

Success!

Help @tayiper 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 5.16,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...