Styling the hr tag

Well, I changed my home page template a tad. Instead of using a border of the container div to draw a divider line inbetween blog entries for a single day (see the bottom of this post for example), I changed it to use a hr tag. Much better in terms of markup. It makes more sense and will render better in text and WAP browsers for that matter.

Ok, so how do you style it properly? No matter what I try, I can't get rid of the padding. Here's what I have so far:

.blog hr {
	margin:0px;
	padding:0px;
	border-bottom:1px dashed #777;
	border-top:0px;
	border-left:0px;
	border-right:0px;
	line-height:0px;
	height:1px;
	display:block;
}

So with a height of 1 pixel, no margin and no padding, why is Mozilla and IE rendering with extra padding? This is more noticable if you use my 'Classic' stylesheet -- jump to the Preferences page to switch to it and see what I mean. Is it just a rendering bug in Mozilla and IE? Opera 7 gets it right. Even Safari gets it right.

TrackBack

TrackBack URL for this entry:
http://bradchoate.com/mt/feedback/tb/563

Listed below are links to weblogs that reference Styling the hr tag:

» Styling the HR tag revisited from Fragments
I wrote about styling the HR tag before, but there's more to it than I knew then. Marek Prokop has... [Read More]

9 Comments

There are significant differences between browsers when it comes to styling a HR.

Craig Saila explains:
http://www.saila.com/usage/tips/defn.shtml?hr

Frank said:

you can still set the border-style to none and for some browsers you even need to set the background on the HR to the same color as the page/div background.

to get a 1 pix line with no shadows I use this on my site:

hr{height: 1px;
border-style: none;
color: #d0d0d0;
background-color: #C0C0C0;
}

I've checked the site with various windows browsers (moz, ie, opera) and it seems to work for all of them. no idea bout Macs though...

mini-d said:

I don't understand why you use and [hr], you could set a bottom border to a main div wich encloses all the posts for the day... like i use in myweblog... set the margin-bottom to 0 and adding 20px of padding so content will not get close to the other headings...

Brad Author Profile Page said:

mini-d: Because I want to display a dividing line inbetween posts for a single day. That line should be styled in particular way. They way I had been doing it was to style the top border of the individual post's 'div' to be a dashed line. This kinda worked, but it put the dashed line at the top of the very first post. Not what I wanted. In order to get it right by using borders on divs would be to have one div style for the first post, then a different one for the ones that follow for that day. I decided to use a 'hr' tag instead since it's more fitting and will render as a divider for textual browsers.

Nathaniel Riethmann said:

Brad:

I'm sure you've already considered this option, but why not just use a little PHP counter in your MT templates to give the first DIV for a day a class of "firstforday" (or something similarly fitting) and remove the top border for that class? You could still use the HR in your templates -- just use CSS to style it out of existence (display: hidden). Textual browsers would render it and you wouldn't have to worry about cross-browser HR styling differences.

Of course, if there were wide-spread support for CSS2, you could always do a little first-child pseudo-action, but alas, there isn't.

Lou said:

A Div as a container for the posts is a better idea as it actually has meaning - the contained elements comprise a post. You should be able to do something with the .blog + .blog { } CSS selector to specify how styling propogates to subsequent entries without having to rely on the first child selector.

Stan said:
	hr {
		text-align: center;
		width: 100%;
		height: 1px;
		color: #bbb;
		border: none;
		} /* For Internet Explorer */
		html>body hr {
		margin-right: 0;
		width: 100%;
		height: 1px;
		background-color: #bbb;
		border: none;
		} /* For Gecko-based browsers */
		html>body hr {
		margin-right: 0;
		width: 100%;
		height: 1px;
		background-color: #bbb;
		border: 0px solid #bbb;
		} /* For Opera and Gecko-based browsers */
Brad Author Profile Page said:

I still use a div as a container for the posts, but inbetween the posts I want to indicate a break. For textual browsers, I think the best way to do this (both visually and semantically) is to use the hr tag. If I could style the hr tag the way I wanted in modern browsers, it would be perfect.

But since I can't, I've decided to wrap the hr tags in a special div. This div will only be 1px high and will be styled in the manner I choose. The actual hr within the div will be hidden through the magic of CSS. This allows the hr tag to be the divider I want for textual browsers, but thanks to the 'display:none' rule it has, it's extra padding won't affect the visual design either.

.blogbreak hr {
display:none;
}
.blogbreak {
border-bottom:1px dashed #777;
height:1px;
}

And is used thusly:

<div class="blogbreak"><hr /></div>

So far, it looks perfect in every browser I've tried. No CSS hacks necessary. Just the way I like it.

Casey Bex said:

It looks ok in my browser (IE6)

About

This article was published on January 29, 2003 12:25 AM.

The article previously posted was Opera 7.

The next article is Columbia.

Many more can be found on the home page or by looking through the archives.

Powered by Movable Type