For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
paulp575
Rank IV - Intermediate
Posts: 170 Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Post
by paulp575 » Sun Jul 25, 2021 1:52 pm
How do I change the following HTML 4.01 transitional code
Code: Select all
<hr class="TABLE-CENTERED WIDTH75P" size="1" color="#fabd23" noshade>
to be HTML compliant?
The end result should be a thin (1ipixel high?) orange line with no background shading.
Last edited by paulp575 on Fri Jul 30, 2021 11:50 pm, edited 1 time in total.
paulp575
Albert Wiersch
Site Admin
Posts: 3785 Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Post
by Albert Wiersch » Mon Jul 26, 2021 9:08 am
Hello,
This seems to come close enough although perhaps 1 pixel thicker:
Code: Select all
<hr style="border: 1px solid #fabd23">
Here's a good link I found:
https://stackoverflow.com/questions/638 ... hr-element
If you want more control then there is some CSS in the top rated answer that you can use.
paulp575
Rank IV - Intermediate
Posts: 170 Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Post
by paulp575 » Mon Jul 26, 2021 4:57 pm
Doesn't work - I think.
Rather than using style in the HTML, I prefer to use CSS to style it.
Here's my style:
Code: Select all
*.HR
{
BORDER: 1px solid #fabd23;
}
This produces a dark line - can't tell if it's black or dark gray.
Changing the color to red doesn't change the line. Changing the size to 10px also doesn't change it.
Seems like my CSS is being ignored and HTML is using the default - whatever that is.
Here's my HTML code I used:
I read the link you suggested; very confusing! Too many suggestions that seem to contradict each other.
There has to be an easy/BETTER way!
paulp575
Albert Wiersch
Site Admin
Posts: 3785 Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Post
by Albert Wiersch » Mon Jul 26, 2021 8:56 pm
Hello,
It looks like you have the wrong selector.
Instead of this:
Change it to this:
Does that work?
paulp575
Rank IV - Intermediate
Posts: 170 Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Post
by paulp575 » Mon Jul 26, 2021 10:53 pm
As usual, you solved my problem.
I don't understand the difference between *.HR and just HR.
A long time ago I was advised (maybe by you? or following other examples to use *. in front of classes.
paulp575
Albert Wiersch
Site Admin
Posts: 3785 Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Post
by Albert Wiersch » Tue Jul 27, 2021 12:04 am
paulp575 wrote: ↑ Mon Jul 26, 2021 10:53 pm
As usual, you solved my problem.
I don't understand the difference between *.HR and just HR.
A long time ago I was advised (maybe by you? or following other examples to use *. in front of classes.
Great!
The "." in front of the name means it's a class name / class selector... so if it was
.HR (or
*.HR ) then you would need:
But "HR" by itself (with no preceding ".") is a type selector, not a class selector... so with "HR" you'd only need:
Here is a good tutorial on selectors:
https://developer.mozilla.org/en-US/doc ... /Selectors