WEB Does a <hr> cancel all subsequent CSS?

Discussion in 'OT Technology' started by Falconer, Nov 10, 2008.

  1. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    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?
     
  2. RetardedMonkey

    RetardedMonkey is a retarded monkey.

    Joined:
    Oct 21, 2006
    Messages:
    20,867
    Likes Received:
    0
    Location:
    Gold Coast, Australia
    Copy/paste code!
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    The tag must be closed if you're using XHTML. Ie:

    Code:
    <hr />
    
     
  4. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ok.

    Here is without the <hr/>

    [​IMG]

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

    Here's that code:

    [​IMG]


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

    [​IMG]

    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.
    [​IMG]


    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: Nov 10, 2008
  5. SLED

    SLED build an idiot proof device and someone else will

    Joined:
    Sep 20, 2001
    Messages:
    28,118
    Likes Received:
    0
    Location:
    AZ, like a bauce!
    I'd use a <ul> if you're going to be displaying lists of links like that
     
  6. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    :werd:

    unordered lists are usually best for stuff like that
     
  7. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    I will try that. I wanted each article to be preceded with a hyphen but I will give <ul> a try.
     
  8. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    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?
     
  9. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
  10. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1

    Now I'm getting this:

    [​IMG]

    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:
     
  11. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    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;
    }
    
     
  12. Falconer

    Falconer OT Supporter

    Joined:
    Jun 23, 2006
    Messages:
    65,506
    Likes Received:
    1
    ^ :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.
     
  13. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    you should make it work in FF, then tweak it for IE
     
  14. hurleyint1386

    hurleyint1386 Someone has sand in their vagina

    Joined:
    Jan 6, 2005
    Messages:
    3,687
    Likes Received:
    0
    Location:
    Rochester, NY
    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
     

Share This Page