Comments for Styling the hr tag

Comment from Oliver Boermans on 2003-01-29

2003-01-29T13:00:32Z

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

]]>

Comment from Frank on 2003-01-30

2003-01-30T11:59:30Z

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...

]]>

Comment from mini-d on 2003-01-31

2003-01-31T22:57:12Z

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...]]>

Comment from Brad Choate on 2003-01-31

2003-01-31T23:07:27Z

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.]]>

Comment from Nathaniel Riethmann on 2003-01-31

2003-02-01T05:56:25Z

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.

]]>

Comment from Lou on 2003-02-01

2003-02-01T21:02:52Z

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.]]>

Comment from Stan on 2003-02-01

2003-02-01T23:13:31Z

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 */ ]]>

Comment from Brad Choate on 2003-02-01

2003-02-02T05:53:52Z

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:

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

]]>

Comment from Casey Bex on 2003-02-11

2003-02-11T21:16:43Z

It looks ok in my browser (IE6)]]>

Styling the HR tag revisited

2003-03-13T20:23:18Z

I wrote about styling the HR tag before, but there's more to it than I knew then. Marek Prokop has...