WEB Does a <hr> cancel all subsequent CSS?

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?

 

Copy/paste code!

 

The tag must be closed if you're using XHTML. Ie:

Code:

<hr />

 

ok.

Here is without the <hr/>



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

Here's that code:




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



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.



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.

 

I'd use a <ul> if you're going to be displaying lists of links like that

 

unordered lists are usually best for stuff like that

 

I will try that. I wanted each article to be preceded with a hyphen but I will give <ul> a try.

 

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?

 

http://www.alistapart.com/articles/taminglists/

 

Now I'm getting this:



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

 

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;
}

 

^

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.

 

you should make it work in FF, then tweak it for IE

 

this is what I always do. I generally write everything for firefox, then create a second IE stylesheet, and depending on the visitor, they see styles.css or styles_ie.css