hr vs borders -- which is better?

[james438]

like the title. Should I stick with styled hr elements or use styled borders instead?

[Spiritvn]

Don't know why? Hr and border is not the same

[tech_support]

<hr> will look better when CSS is turned off.
border:... is better for CSS menus, sidebars etc.

[jscheuer1]

Well, you cannot very easily do a vertical line using <hr>.

[james438]

Also I wasn't sure if the hr tag was becoming depreciated.

[Twey]

It is. It's still valid, but it counts as presentational markup. Borders are preferred.

[james438]

so when separating one bit of content from another hr tags are better? For example on my main page I have an updates section with the latest four items displayed and to separate them I use a horizontal line that is 75% in width. In this case because hr tags are for presentational markup hr would be better in this case, right?

[Twey]

No. Presentational markup is bad.

[james438]

Haha, straight to the point :). Why do you say that presentational markup is bad?

[jscheuer1]

When it comes to coding, Twey doesn't appear to like anything that isn't future and standards oriented.

If you don't know what you are doing, and even if you do, it isn't all that bad of an approach.

[Twey]

Why do you say that presentational markup is bad?http://www.hotdesign.com/seybold/everything.html

Simply put, HTML is designed to represent a structured tree of data, and it's very good at doing so. When you start adding presentational information to the mix, though, it becomes inefficient very fast, and you end up with stupid amounts of code to perform simple tasks, repeated on every single page. You're much better off using a language designed specifically for that purpose, like CSS.

[james438]

This thread is getting a bit complicated, but your reasons for why I shouldn't use hr tags, Twey, make me think that I should use hr tags. The following is what I am currently using on the main page of my site to separate one piece of data from another. I want it to look nice too, so I use CSS to style it like so.

Let me correct myself. The first example is of a border that I am using. The second one is of a CSS influenced hr tag. Despite my efforts to get them to look and behave the same, they do have their differences from one another. One uses more code. One is thicker and looks whiter. They seem to have very subtle differences in the distance from data in another div despite the fact that they are both contained within a div.

I prefer not to use HTML when I can. I just like CSS better ;) This really is not a very important issue, but in the pursuit of knowledge and curiosity and out of a simple desire to have a better understanding of this I am curious where this thread will lead.


<div style='clear:both;border-top-width:1px;border-top-color:white;border-top-style:solid;margin-left:12&#37;;margin-right:12%;padding:0px;margin-bottom:16px;margin-top:16px;padding-top:0px;'>


<div style='clear:both;margin-bottom:16px;margin-top:0px;padding:0px;border:0px;width:75%;height:1px;'><hr></div>

[Twey]

Ack! Inline CSS? Way to negate one of the primary benefits of using CSS!

As presentational HTML <hr> is far from the worst element, but it is classed with the rest of them and thus informally deprecated. I have a feeling it's been removed in XHTML 1.1.
One uses more code.It wouldn't (at least repeated code) if you used <div class="separated"></div>.
One is thicker and looks whiter.That's just down to how you've styled it. The default <hr> representation tends to be wider than 1px in most browsers; it generally looks the same as border: 2px gray groove; in my experience.
They seem to have very subtle differences in the distance from data in another div despite the fact that they are both contained within a div.Again, down to how you styled it. I hope you didn't use a separate <div> for that separator: that's presentational markup, again. Instead, style the bottom border of the top element that you want to separate.

[james438]

Ack! Inline CSS? Way to negate one of the primary benefits of using CSS!hehe, have some faith in me! When I write a script I write it out in the lengthy format that you see before you and then when I am sure of how I want it I convert it to class format like you are suggesting. In fact I was just about at that point when I thought I would ask the people in the forum whether they thought one type would be better than the other. I wrote it all out into inline css so you could see it on one line. It is just easier for me to look at that way.

At present I use both and they are not looking the same. I know you say it is how I have styled it, but it doesn't seem to matter what I do they both look and behave differently.

Even so I have decided to go with the border version and no, I won't have a separtate div just for it. I was though. I must say that there are a lot of very elementary things that I don't know or have simply forgotten and I am sure there are a lot of really dumb things that I still do.

EDIT: currently redesigning my main page with the new layout. This is medium sized project for me as there are many hacks involved to get it to work right in all browsers. heh, not that this edit is very relevant to the thread...

EDIT: done and despite my best efforts I can't get around using a separate div for the border.

[james438]

wow, the code needed to get the border to look and behave the same way a simple hr element does is simply phenomenal! Even then it is not looking or behaving right. I have a combined 30-40 different css commands for the two different borders that I use as opposed to the 3-5 css commands for the hr element.

I don't think I explained the reasons for trying to decide which is better. I may post this in a separate thread at a later time.