how to do a hr (horizental rule)

[whatnow]

If the hr tag is no more (or not susposed to be used) then how do we make the equivlent. ??I have tried and the best I get is, all the browsers work except for ie 6! the most used. wouldn't you know it. ie 7 works even. ie 6 gives a solid line/box across about 20px in height.from the w3schools site'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.'I am sure somebody has run into this, no?

[scott100]

You can still us this tag you just need to close it like so <hr /> and use styles to change its appearencehttp://www.w3schools.com/myfirst/tryit.asp...=myfirst_css_06or use a div

<div style="border-bottom:1px solid black;width:100%"></div>

[raimo]

I am sure somebody has run into this, no?

<{POST_SNAPBACK}>

Ouh yes, we are .. :)If You really need to use hr -tag You can do it with JavaScript (until browsers supports it). But is it wiser use image or colorized p or some other element?Image as 1px X 1px to squeezed to size needed with width and height attributes is not bad way either. Old but still very usefull way to make lines is:Save image named as line.png (sized to 1x1 px etc) and tag:<img src="line.png" width="100%" height="2" alt="line" />Will made 100% long and 2px height "hr" to You.Javascript trick (XHTML 1.1 valid, and all other valid too)Put this to external JS-file (named as line.js),

var hr = document.createElement('hr');hr.setAttribute('width', '70%');hr.setAttribute('height', 2);hr.setAttribute('class', 'hr1');// more attributes heredocument.getElementsByTagName("body")[0].appendChild(hr);

And then where ever You need hr, insert tag:<script src="line.js" type="text/javascript"> //line</script>Yes, it is 100% valid XHTML 1.1 and all others too, because there is no hr-tag in code, but still hr will work as hr should. CSS can be used, there is class named hr1 nowUse to create XHTML 1.1 valid iframe, XHTML 1.1 valid target, etc. :(Works fine with all "new" browsers (I think, ie 5.x> + all others)But still, small colorized image within squeezing it to size needed is best way todraw lines.edit:As scott100 says, <hr /> is the right way with XHTMLstill my DOM example is not ugly, or is it?

[Jonas]

Ouh yes, we are ..  :)If You really need to use hr -tag You can do it with JavaScript (until browsers supports it). But is it wiser use image or colorized p or some other element?Image as 1px X 1px to squeezed to size needed with width and height attributes is not bad way either. Old but still very usefull way to make lines is:Save image named as line.png (sized to 1x1 px etc) and tag:<img src="line.png" width="100%" height="2" alt="line" />Will made 100% long and 2px height "hr" to You.Javascript trick (XHTML 1.1 valid, and all other valid too)Put this to external JS-file (named as line.js),

var hr = document.createElement('hr');hr.setAttribute('width', '70%');hr.setAttribute('height', 2);hr.setAttribute('class', 'hr1');// more attributes heredocument.getElementsByTagName("body")[0].appendChild(hr);

And then where ever You need hr insert tag:<script src="line.js" type="text/javascript"> //line</script>Yes, it is 100% valid XHTML 1.1 and all others too, because there is no hr-tag in code, but still hr will work as hr should. CSS can be used, there is class named hr1 nowUse to create XHTML 1.1 valid iframe, XHTML 1.1 valid target, etc. :(Works fine with all "new" browsers (I think, ie 5.x> + all others)But still, small colorized image within squeezing it to size needed is best way todraw lines.

<{POST_SNAPBACK}>

Brilliant. *bookmarks*

[boen_robot]

They say there are two types of validation- Errorles one and spiritual one. The way I see it rainmo offers an errorles solution. However it doesn't get into the spirit of web standarts.As scott100 mentioned already, the hr is not deprecated. Only it's presentational attributes are. Infact, I think it's better to use a hr instead of an empty div for every purpose, not only when you need a line.

[whatnow]

They say there are two types of validation- Errorles one and spiritual one. The way I see it rainmo offers an errorles solution. However it doesn't get into the spirit of web standarts.As scott100 mentioned already, the hr is not deprecated. Only it's presentational attributes are. Infact, I think it's better to use a hr instead of an empty div for every purpose, not only when you need a line.

<{POST_SNAPBACK}>

ok, thanks That's what I needed to know exactly. Thank youthanksthanks:)a time and a placejavascript is new to me. right now just copy and paste if needed. I don't think I want my code to validate then just to make hr tag appear there anyway. but it is an idea to keep in mind when it is absolute neccessary, which might happen someday.

[whatnow]

Infact, I think it's better to use a hr instead of an empty div for every purpose, not only when you need a line.

<{POST_SNAPBACK}>

you know I got to thinking (a bad thing I know) but why?the div thing works. (I didnot put the width part in my code earlier)

[boen_robot]

you know I got to thinking (a bad thing I know) but why?the div thing works.  (I didnot put the width part in my code earlier)

Mostly for accesability purposes. For example, if you use an emty div to clear floats in the body and start arranging the footer. A hr would be better because when viewed without the CSS file (example: text browsers, tuned off CSS by the user, etc.) it gives a nice horizontal line, dividing the body and the footer.Also, a purpose of the div is to hold different parts of a page. The purpose of hr is to devision between those different sections. In short: again comes the spirit of web standarts.

[raimo]

They say there are two types of validation- Errorles one and spiritual one. The way I see it rainmo offers an errorles solution. However it doesn't get into the spirit of web standarts.

Yes, You are 100% right, it is not "inside" of spirit of web standards, but still it is allmost only way to get new window open with XHTML 1.1 etc.The other way is manage as own DTDWe must do stinking things as use a-tag rel attribute as an target in code and then switch rel value to target value with JS and DOM, secretly in backside of state. I don't like do things like that but there is no other way, thanks to W3C.I have heard, there is still some (many) needs to get new window opened,in spite of that W3C says there is no any reason to open new window from document. :)In my opinnion W3C XHTML 1.1 is too strict to work as flexible anymore or work at all. It doesn't get into the spirit of easy way to publish things. ps. sorry, it's only my offtopic whine

[boen_robot]

Yes, You are 100% right, it is not "inside" of spirit of web standards, but still it is allmost only way to get new window open with XHTML 1.1 etc.The other way is manage as own DTDWe must do stinking things as use a-tag rel attribute as an target in code and then switch rel value to target value with JS and DOM, secretly in backside of state. I don't like do things like that but there is no other way, thanks to W3C.I have heard, there is still some (many) needs to get new window opened,in spite of that W3C says there is no any reason to open new window from document. :)In my opinnion W3C XHTML 1.1 is too strict to work as flexible anymore or work at all. It doesn't get into the spirit of easy way to publish things.  ps. sorry, it's only my offtopic whine

Well, when there's no alternative, a JavaScript is acceptable, but in the case of hr it's useless. And don't worry about the target replacement too. CSS3 is going to have a target property for opening links in new windows or tabs. It's just a matter of time until browsers support it though. Until then: DOM rules the world .

[whatnow]

ok thanks peoples. you have really helped my understand the hr thing, but more important the bigger concept.thanks again

[whatnow]

alright SIGH,when I put my code in my css file

.nextstory{border-bottom:1px solid black;width:100%;}

which is the same as scott100's code right?

<div style="border-bottom:1px solid black;width:100%"></div>

IE puts a big old fat line in again only 6. IE 7 works fine. now if the code is in the html like it is given it works ok in all browsers.this is in the html code

    <div class="nextstory"></div>

ok fixed it. only posting for reference for other people.I must had a control char or something in my css file cause I put everything on one line and it worked YEA. saslkdfjlkasdjflsdjf lkasdj lasjf those are happy words.sometimes copy and paste is not as good as good ole typing it in, or maybe I did a stupid thing which I have no idea what.ANDanother thing regarding IE 6, if you have a border-top or background set you'll get the nasty fat box or line.thanks again.

[Jonas]

Ouh yes, we are ..  :)If You really need to use hr -tag You can do it with JavaScript (until browsers supports it). But is it wiser use image or colorized p or some other element?Image as 1px X 1px to squeezed to size needed with width and height attributes is not bad way either. Old but still very usefull way to make lines is:Save image named as line.png (sized to 1x1 px etc) and tag:<img src="line.png" width="100%" height="2" alt="line" />Will made 100% long and 2px height "hr" to You.Javascript trick (XHTML 1.1 valid, and all other valid too)Put this to external JS-file (named as line.js),

var hr = document.createElement('hr');hr.setAttribute('width', '70%');hr.setAttribute('height', 2);hr.setAttribute('class', 'hr1');// more attributes heredocument.getElementsByTagName("body")[0].appendChild(hr);

And then where ever You need hr, insert tag:<script src="line.js" type="text/javascript"> //line</script>Yes, it is 100% valid XHTML 1.1 and all others too, because there is no hr-tag in code, but still hr will work as hr should. CSS can be used, there is class named hr1 nowUse to create XHTML 1.1 valid iframe, XHTML 1.1 valid target, etc. :)Works fine with all "new" browsers (I think, ie 5.x> + all others)But still, small colorized image within squeezing it to size needed is best way todraw lines.edit:As scott100 says, <hr /> is the right way with XHTMLstill my DOM example is not ugly, or is it?

<{POST_SNAPBACK}>

I'm curious, could you also do this with marquee tag and get it to validate? Since it's still supported in many browsers...

[raimo]

I'm curious, could you also do this with marquee tag and get it to validate? Since it's still supported in many browsers...

<{POST_SNAPBACK}>

Why not? (not tried yet)In this scenario marquee is not in document, it's only created in memory and showed only to user.W3C validator can't see it. I mean document is valid, there is no marquee tag.By the way, look:http://www.w3.org/TR/css3-box/#marqueeedit:Tested, and yes, it's "valid" XHTML 1.1 http://labra.atspace.org/marquee.html