Eivo Posted February 16, 2007 Share Posted February 16, 2007 How do you change the color of a <hr> and remain valid? I tried all the color options I know but they either don't work or don't validate. Thanks. Link to comment Share on other sites More sharing options...
real_illusions Posted February 16, 2007 Share Posted February 16, 2007 styling the <hr /> tag doesn't really validate in xhtml...if you want a fancy colourful line, then stick an image in there, and style the margins and paddings in css to create the spacing and such that you're after. Link to comment Share on other sites More sharing options...
yoshida Posted February 16, 2007 Share Posted February 16, 2007 or state .hr {display: block; height: 2px; margin: 0 30px 0 30px; background-color: #1234ab; }and i/s of <hr attribute="bladibladibla" /> just stating <div class="hr"></div> will be sufficient. This also works fine for Opera (which doesn't support hr style attributes no matter what).It will validate.EDIT: forgot I wasn't in the CSS forum. If you're new to css, I would strongly recommend using that instead of style attributes. It will give you full controll of your layout. Link to comment Share on other sites More sharing options...
Eivo Posted February 16, 2007 Author Share Posted February 16, 2007 or state .hr {display: block; height: 2px; margin: 0 30px 0 30px; background-color: #1234ab; }and i/s of <hr attribute="bladibladibla" /> just stating <div class="hr"></div> will be sufficient. This also works fine for Opera (which doesn't support hr style attributes no matter what).It will validate.EDIT: forgot I wasn't in the CSS forum. If you're new to css, I would strongly recommend using that instead of style attributes. It will give you full controll of your layout.haha, that works. Never thought of that. Link to comment Share on other sites More sharing options...
Anders Moen Posted February 16, 2007 Share Posted February 16, 2007 Just that it doesn't work in all browsers... Link to comment Share on other sites More sharing options...
jlhaslip Posted February 17, 2007 Share Posted February 17, 2007 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="Author" content="Jim Haslip, jlhaslip@yahoo.ca" /> <meta name="Keywords" content="" /> <meta name="Description" content="" /> <meta http-equiv="expires" content="0" /><style type="text/css">/*<![CDATA[*/body { margin:0; padding:0; background-color: #ffffff; }.left { float:left; margin-left:10em; }.right { float:right; margin-right:10em; }h1 { margin-left:auto; margin-right:auto; text-align:center; padding:0; font-size:3em; }img { margin:0; padding:0; border-style: none }#content { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; padding-top:.5em; width:750px; background-color: #ffffff; }.test { margin: 1.0em; text-align:left; background-color: #ffffff; padding-bottom:1em; border-bottom: .2em solid #f66; }.test:first-letter { float:left; font-size: 3em; font-weight: normal; }.up { background-color: #ee99ee;}.down { background-color: #eeee99; }.partial { background-color: #ee6666; }span { text-transform:uppercase; }#footer { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; }/*]]>*/</style> </head> <body> <div id="container"> <!-- start container div --> <div id="hdr"> <h1> Heading Here </h1> </div><!-- end hdr div here --> <div id="content"> <!-- page content starts below this comment --> <!-- Insert page content between the div tags here --> <div class="test"> This is an example of a 'drop cap' formatting and text-transform:uppercase in the first line of a div. Page content here . Page content here . <span>Sample of an in-line span here</span>. Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . </div> <div class="test"> This is an example of a 'drop cap' formatting and text-transform:uppercase in the first line of a div. Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . <span>Sample of an in-line span here</span>. Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . </div> <div class="test"> This is an example of a 'drop cap' formatting and text-transform:uppercase in the first line of a div. Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . Page content here . <span>Sample of an in-line span here</span>. Page content here . Page content here . Page content here . </div><!-- page content ends above this comment --> </div><!-- end content div --> <div id="footer"> <a href="#" title="this link goes to the map for the site"> sitemap </a> <a href="#" > Contact Me </a> Copyright 2004 - 2006. <a href="#"> Home Page </a> <a href="#" > Top of Page </a> <a href="#"> valid-xhtml1.0 </a> </div><!-- end footer div --> </div><!-- end container div --> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted February 18, 2007 Share Posted February 18, 2007 or state .hr {display: block; height: 2px; margin: 0 30px 0 30px; background-color: #1234ab; }and i/s of <hr attribute="bladibladibla" /> just stating <div class="hr"></div> will be sufficient. This also works fine for Opera (which doesn't support hr style attributes no matter what).What do you mean that Opera doesn't style an HR? I have this and it works fine:hr { background-color: #5D2118; color: #5D2118; border: 1px outset #5D2118; height: 2px; width: 100%; padding: 0px; margin: 7px 0px 20px 0px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now