TECH Does a <hr> cancel all subsequent CSS?

Falconer

Well-Known Member
Jun 23, 2006
65,535
I have a column on my page where the text and font and color and everything is formatted correctly with CSS. I wanted to divide it into sections with <hr>, and after the first one, all the CSS formatting goes away and it reverts to normal default html.

Are <hr>s not compatible with CSS or something?
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,535
Copy/paste code!

ok.

Here is without the <hr/>

good_column.gif


See how my style rules are being followed, like it is Arial sans-serif, etc.

Here's that code:

good_code.gif



Here is the same thing with <hr> in between rows. Here's the code, see how the first line disappeared from the output:

bad_code.gif


And see how after the first <hr/> on the table, the style rules from the CSS are no longer being followed? It has reverted to serif, and the hyphens at the beginning of each row are no longer visible.
bad_column.gif



Here is my CSS code for that column:

Code:
div#column2 p {color: #ffffff;
text-align: left;
padding-left: 5px;
padding-right: 5px;}

div#column2 a:link {color: #ffffff;} /* unvisited link */
div#column2 a:visited {color: #ffffff;}  /* visited link */
div#column2 a:hover {color: #00ccff;} /* mouse over link */
div#column2 a:active {color: #ffffff;}   /* selected link */

I would expect the CSS to still be followed because everything in my code is still within <p> tags, but it seems like at the first <hr/> it just starts ignoring the rest of the CSS.

Oh, the reason it's Arial is because at the top of my CSS file I have:

p { font-family: arial, verdana, sans-serif; }

To set everything, everywhere to Arial.
 
Last edited:

SLED

custom title
Sep 20, 2001
28,048
I'd use a <ul> if you're going to be displaying lists of links like that
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,535
I will try that. I wanted each article to be preceded with a hyphen but I will give <ul> a try.
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,535
ooh do you think it's because my <hr/> is in the middle of a <div> and a </div>? Does <hr/> like turn off the <div> or something?
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,535


Now I'm getting this:

ff_vs_ie.gif


Questions:

1. Why is there a big space in FF but not in IE? edit - n/m it was cuz of the extra <br/> i had in there.
2. How do I make the line go all the way across the column?

code:

the .php for that column:

Code:
<p>More articles you might enjoy:<br>
<ul><li>Some article</li><br>
<li>Another article</li></ul></p>
the .css for that column:
Code:
div#column2 a:link {color: #ffffff;} /* unvisited link */
div#column2 a:visited {color: #ffffff;}  /* visited link */
div#column2 a:hover {color: #00ccff;} /* mouse over link */
div#column2 a:active {color: #ffffff;}   /* selected link */
div#column2 li {border-bottom: 1px solid #ffffff;}
sorry for being such a dumb noob :hs:
 

kingtoad

Well-Known Member
Sep 2, 2003
55,788
Los Angeles
You gotta style your lists, man.

Code:
<p>More articles you might enjoy:</p>
<ul>
  <li>Some article</li>
  <li>Some other article</li>
</ul>

Code:
ul {
  list-style: none;
  margin: 0; 
  padding: 0;
}
 
TS
TS
Falconer

Falconer

Well-Known Member
Jun 23, 2006
65,535
^ :bowdown:

Looks like I have to re-specify my font in there, too. ANd things seem to auto center in IE but not in FF, so I should add a left justify in there to keep things consistent.
 

Users who are viewing this thread

About Us

  • Please do not post anything that violates any Local, State, Federal or International Laws. Your privacy is protected. You have the right to be forgotten. Site funded by advertising, link monetization and member support.
OT v15.8.1 Copyright © 2000-2022 Offtopic.com
Served by fu.offtopic.com

Online statistics

Members online
101
Guests online
29
Total visitors
130

Forum statistics

Threads
369,643
Messages
16,903,195
Members
86,875
Latest member
Theodor