hr issue

[lilyofthevalley]

When I look at my site in IE, it works fine. When I look at it in Netscape or Firefox, the hr, instead of being the nice gauge red line like it should be, it is a thin black line.Anyone have a clue as to why?Here's the CSS pertaining to the hr:

hr {color: red}

Here's the HTML:

<hr />

[Anders Moen]

Simple: those browsers don't like hr tags to be like that :)I've tried myself...you need to make a nice little image that's red instead. For example 2x2px and then use like<img src="url_to_image.gif" alt="" style="width: 100%; height: 2px;" />

[Mr_CHISOL]

It should work fine to set a border to it (there will not be a box, just a line):

hr {	  border: 1px solid #F00;  }

[jlhaslip]

The hr tag is deprecated, so the more compliant Browsers do not handle them well, as stated above. When something works in IE, but not the other Browsers, look to the CSS Specs for the answer. IE is terrible at meeting the specifications.http://www.w3.org/TR/html4/present/graphics.html#edef-HR

[Anders Moen]

Just do what I said. It's the best:

Simple: those browsers don't like hr tags to be like that I've tried myself...you need to make a nice little image that's red instead. For example 2x2px and then use like<img src="url_to_image.gif" alt="" style="width: 100%; height: 2px;" />

[Mr_CHISOL]

One other way to avoid both an image an the hr-tag is to use a div:

.hr {		 font-size: 0px;		 width: 100%;		 border: 1px solid   #F00;		 /* or		   border-bottom: 2px solid #F00; */   }...<div class="hr"> </div>

[vchris]

I vote for Mr_CHISOL!That's the best way to do it. Save bandwidth and valid. You don't need to set a width, divs are block which means automatically 100% wide. You could always add margins. margin: 10px 0px 10px 0px;

[ste]

but you dont save on markup its easier to have <hr> than <div class="hr"> </div>heres a few ways to style the hrhttp://www.sovavsiti.cz/css/hr.html

[Anders Moen]

but you dont save on markup its easier to have <hr> than <div class="hr"> </div>heres a few ways to style the hrhttp://www.sovavsiti.cz/css/hr.html

Hmm...not everything there is right.Like this:

Thin, red (unfortunately black in Opera), solid line, 1px high:

Well, it was red in my browser window and I use Opera. Shame on that site ;P

[jlhaslip]

Opera is notorious for adapting its parsing. What worked to the specs in version 7.51 doesn't work in version 7.52, but mysteriously works again in version 9.0, so keep this in mind as you develop for Opera. They do have some terribly talented coders on their support site, though. It is a great Browser that just gets better as time goes on. I still prefer FF mostly for the Web Developer's Extension, though. If Opera had that, I think i would use it more often.Furthermore, it passes the ACID2 test, most others don't even come close.http://www.webstandards.org/action/acid2/#content-main

[lilyofthevalley]

The funny thing about this is, that's how I used to do hr, with my own custom line. But then it was the whole as few images as possible and validation, etc. Oddly enough, I don't remember hr being listed as deprecated (but I've learned so much in the last two months, something's bound to slip), and the site still validated. I'm just having a bit of a rough go trying to learn in such a sea of non-absolutes and "hacks needed for...". I am truly starting to understand why so many of the websites that are alive and well today (or not so well, depending) do not validate. But that's a rant for another time.Thank you all for you advice, I will be trying both variations just for fun, and then moving on from there. I think someone else made noise yet again about my absolute columns needing to die a horrible death in another thread, so that's one more thing I need to wiggle and jiggle. Boy do I miss tables sometimes.

[jlhaslip]

I assure you that as you progress in developing sites, the css actually gets easier. And the benefits far exceed the efforts, IMHO. Less bandwidth on the server and web, easier code to change (or fix), and less 'spaghetti' code than tables.

[lilyofthevalley]

Okies, I tried the img trick first only because I've played that game before, and I am also now back to fiddling with non-absolute mid columns due to yet another voice piping in that I should tend to that.Netscape liked it and was kind to my floating mid columns, it let me shrink the window vertically far narrower than I thought it would before the design klunkered out.Firefox liked not only the img, but also liked my floating mid columns just fine until I tried to shrink it down somewhat in the neighborhood of 800p, and then all chaos broke loose with the header falling downwards like Humpty Dumpty.IE liked the img, but let my columns overlap from center to right like a winter snow drift.I don't have Opera. I could download it, but I haven't yet.The only issue I have throughout is that the hr is lower than I want it to be on the page, and I am unsure at this moment of how to fix that, but will look into it. I vaguely remember reading something about negative margins or some such. And, of course, the overlap issue. And, since I'm supposed to be putting all the formatting in CSS, shouldn't I be making that img a type of img.class and just call up the div to stay Strict? Or am I wrong on that? I haven't tried to validate it yet. Awww heck, I must have done something goofy. Now I've lost my mid center column altogether in IE. Darnit, must have moved the wrong copy of something, although it is reading right in FF & NS? ok, when moving back to the img version, I somehow grabbed an older CSS, that's fixed now, but the middle is still a'flowing.Mr_CHISOL: I tried your first suggestion, I couldn't get it to do 100% width in IE, though it was closer to the the top of the page like I wanted, but my next check was Netscape, and thin black line, so I tried your next suggestion. In IE, the hr disappeared completely. I thought maybe it was due to the semicolon before the comment, but deleting that didn't help either. I also tried putting the 100% in quotes, but that didn't seem to help, and at that point I gave up.ste: I read your pages, and the pages you linked to with fascination and a touch of admiration. I am hoping I never have to do that much work for a line break to work well.andersmoen: Thank you for bringing me back to something I actually have used in the past and works, apparently from this simple test, quite well.

[lilyofthevalley]

I've been trying to do more research on this subject. Ultimately, although the img trick works, it does not validate. I have tried to embed the image both as a div, which was a downright disaster, and p-which pushed everything further down on the page, and in both cases, I am not seeing the results I want at all. When I place the image inside the p tag, though, it does validate, which was encouraging.From what I'm reading about divs, the align attribute has been deprecated there as well (so you can't even try to sneak in a justify), and I'm still not completely clear on how styles is replacing that in a way I can use in a case like this. What I am especially frustrated by is that having gone back to W3S, I do see where the hr tag has been deprecated. I have searched quite thoroughly, and I can find no reference to its replacement. This is all I could find:All "presentation attributes" of the hr element were deprecated in HTML 4.01.All "presentation attributes" of the hr element are not supported in XHTML 1.0 Strict DTD.And if you look at the chart here, it clearly states that one must now use styles, but it doesn't say what you can use the styles on---there is no mention of what element akin to hr one might use to replace it. Then they immediately turn around and give you a tutorial on how to insert an hr. It's madness. The other thing I am quite puzzled over is the concept of the img as being a forced block or something along that line, which is why I can't use that element there and validate. All I could find on further developments on the img tag is that it is one of several modules that were specifically designed to assist in the transition. However, I cannot find any references that denote how one might incorporate style and img to try to duplicate the purpose of hr. This was about the closest thing I could find on any info directly pertaining to the compliance project, and here it states that the img is common, and seen as a text content model. So if that is the case, why can we not use the img tag as we would a text tag in a case like this? Why is it forcing the issue of the block element, when it clearly states that an img no longer can be ruled by such things as "width=100%" since they have been deprecated, but, again, there is nothing equal to that sort of absolute positioning that I can find that is what is recommended now. Well, expansion, really, not really positioning.Anyhoo---I've been sitting in front of this glowing box for longer than I care to admit. Now I need to figure out if I'm keeping the img as p, how to move it up into the position that I want it to reside in.If anyone has any further info on this issue than I have found here, please do speak up. Until I learn how to wrangle the CSS positioning a bit better, I believe I will continue to have some issues with trying to make divisionary sections with CSS. Hopefully later today I'll be able to further look into how containers over all play into this, being that divs force the break line between sections, which I think is part of what's giving me trouble.

[Mr_CHISOL]

I don't now how IE treats the code I suggested (can't test it as I'm using GNU/Linux) and I don't know why IE doesn't treat it as it should. But than I don't why IE (and Microsoft) does much of the things it do as it does... :?)One thing that may be the problem in IE is the font-size: 0px;, change the size to 1px intead and it could work, but that's just an suggestion. Traditionally MS hasn't been following the standards as much as you would hope, they are getting better but they have a "long way to go"....vchris: I can't remember seeing a div taking up the whole width, unless I've told it so, but I may have a smaller black-out.But there's no reason to remove width:100%, because then you know that it will "always" have that width.When it comes to a too large space between the element (text, etc) above the hr/line and the line itself you can use a negative margin (this example also shows how to center it):

.hr {	   font-size: 1px;	   width: 100%;	   border-bottom: 1px solid #F00;	   margin-top: -3px; /* Or whatever you may need */	   margin-left: auto;	  /*	This should	*/	   margin-right: auto;   /*   Center the hr  */  }

[Jonas]

Um, I don't think the HR element is deprecated. From what I can see in the link jilhaslip provided, it's just the attributes that are deprecated in xhtml 1.0. HOWEVER, in the XHTML 2.0 spesification, the "hr" element will be replaced by the "separator" element. Also, "br" will be replaced by "l".http://www.w3.org/TR/xhtml2/introduction.h...tro_differences

[lilyofthevalley]

MR_CHISOL: I'm still not completey versed on all the quriks of the various browsers. Always something new to learn. I will try the negative margin thing again. I think I tried it before, and had trouble, but now I can't remember in which context. I think that was back when I was still mixing up my em and px. Jonas: thanks for the head's up, I will try to look at that info soon. So I guess since you can't apply the styles, it's best to always leave hr usage only for when you want a typical hr. But I'll look at the other info to try to find a way to do what I'm doing!