<hr> equivelant?

[L.Adlon]

To make simple horizontal lines, what is currently the best method?

 

Previously, if <hr> wouldn't do the trick, I would use the old 'stretched single pixel' trick.

 

Now that I'm trying to do everything (that I can) with CSS, I'm a bit confused as to how to use <hr> now...

 

The main thing I am not clear on is the noshade attribute. Is that a valid attribute in a css class definition... or is there some equivelant?

 

If it's a valid attribute, what is the value? In the HTML tag, the attribute seems to be a bit of an orphan... a parameter with no value (...or a value with no parameter?). I'm not sure how that would translate into CSS, as I assume all parameters need to be parameter:value pairs.

 

I could use the stretched pixel thing, but I'm just checking to see if there's some simpler (less code) method available these days, that is fully compatible and stable.

[Ingolme]

You can change the appearance of an <hr> element using the CSS border property. Alternatively, you can just put a bottom border on a content's container.

.separator {    padding-bottom: 0.8em; /* You can add separation between the text and the border */    border-bottom: 2px solid blue;}<p class="separator">This paragraph will have a "horizontal rule" under it.</p>

[L.Adlon]

Ah, that's kinda clever! I see what you did there!

 

Well, the lines I'm after are more as graphical elements that aren't involved with text.

 

I have a long, horizontal image strip (840px by 70px), and I was just putting a shorter set of lines above and below it... kind of like bookends, but on the top and bottom, rather than at either side... kind of like a partial frame or caps.

 

The stretched pixel method seems to work nice here, since I just have to put:

 

<img alt="" src="image/pixel.gif" class="cap"> wherever I need that line, and then do the appropriate defining in the class definition.

 

Does that sound solid? (Compatible, stable, not entirely stupid...?)

 

The only thing I ran into, so far, is that some browsers may not play nice as far as the margin-top and margin-bottom are concerned... making them slightly different, so they are not the same distance from the image as each other. I have to lok further into that.

 

(Your border method would work, but the lines would be forced to be the same length as my image, whereas this method allows for any length)

Edited May 25, 2014 by L.Adlon

[Ingolme]

There's no need for an image. Any elements can have a color.

 

By overriding the default style from the <hr> you can make it look however you like.

hr.blue {    /* Remove default styles */    border: none;    outline: none;    background: none;    /* Add new styles */    background-color: blue;    height: 1px; /* Make the bar only 1px tall */    width: 80%; /* Can be pixels widths too */}hr.red-dashed {/* Remove default styles */    border: none;    outline: none;    background: none;    /* Add new styles */    border-bottom: 2px dashed red;    height: 0; /* No need for height since the border is aroundthe element */    width: 80%; /* Can be pixels widths too */    padding: 20px 0; /*20px separation between the <hr> and any content above or below it */}<hr class="blue"><hr class="red-dashed">

[L.Adlon]

Hey, that's neat. I keep forgetting the true control possibilities of elements and CSS.

 

The thing I'm still wondering about, is the built-in 'shading' attribute of <hr>. What does that translate to as far as CSS attributes?

 

Is the <hr> shading just a border set with different colours (lighter on top and left, darker on bottom and right)? If so, I see that you'd be turning that off (on by default) with your 'remove default styles' sections.

[Ingolme]

The shading on the <hr> element is a border-style of type "inset" or "outset". Check out all the available border styles here: http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=groove

[L.Adlon]

Neat... I didn't know about some of those other styles. I had used double and dotted, but somehow wasn't aware of some of the others.

 

Thanks again, Ingolme. I really appreciate all the help you're giving.

[L.Adlon]

Odd thing I'm finding... I'm using the hr.line type thing you were illustrating above, and it's working except for in Internet Explorer.

 

The lines appear shaded or something... not the solid colour I was defining. In Firefox, it was working.

 

So, I added a border-style:solid; to the style definition (with the assumption that IE was still shading the line, despite the border/outline removal), and found that using any border-style declaration causes the lines to disappear in IE.

 

Not sure what the deal is there...

 

 

So, in IE, hr lines (which have been styled to be solid black, with no border or outline) appear like they are shaded or seomthing.... and adding any border-style definition causes the lines to disappear in IE.

 

I'll keep tinkering here, and see if I can figure out what's going on.

Edited May 29, 2014 by L.Adlon

[Ingolme]

I'm trying simply this and it works fine:

.line { border: none; background: none; border-bottom: 2px dashed blue;}

<hr class="line">

 

 

Remember that for CSS to work correctly you must give your page a proper <!DOCTYPE> tag.

[L.Adlon]

Yup, I've got a Transitional DOCTYPE tag there.

 

I'm not using the single (ex. bottom) border method, but instead the background-color method you had outlined before. This is because the line needs to be centered vertically... although, if I were to do a single pixel top and bottom border together, would that end up with a centered 2 pixel line?

 

Again, it's working great in Firefox, but IE is definitely showing a shaded line. If I make the height something like 10px, I DO get a thick line, but it has the bevel effect on it (1px wide). Adding any kind of border-style definition causes the line to completely disappear. Very weird... I haven't been able to sort anything further out about that. Seems very stubborn! Must be something I'm missing/doing that is affecting some discrepency between Firefox and IE.

 

I might experiment with the top/bottom border method (rather than the background-color method), and see if that works better. Otherwise, I'll just use the stretched pixel method... a bit of a hack, but it's working at least.

[Ingolme]

Well, if the <hr> doesn't work, use a <div> with that same style. Internet Explorer might be forcing the <hr> default style.

<div class="separator"></div>

Pretty much any solution is better than an image, because images force the browser to request another resource from the server, HTTP requests are quite inefficient and are the biggest factor in slowing down page loading.

[L.Adlon]

Interesting... Well, normally, I'd have given up and resorted to the stretched pixel thing... but you have convinced me to keep trying!

 

That's a good point about IE perhaps forcing the <hr> styling. Very weird that trying to override that is making the line disappear for me.

 

Your arguement about the stretched pixel method resulting in the HTTP requests makes total sense, and has convinced me.

[dsonesuk]

IE has weird ideas about controlling design of hr element, i had this before, border-color: to control color? wrong color: controls that, well in the older versions it did.

 

http://webdesign.about.com/od/beginningcss/a/style_hr_tag.htm

http://www.chadswebstudio.co.uk/website_design/styling_hr_tag.htm

Edited May 30, 2014 by dsonesuk

[L.Adlon]

Yep, it SEEMS like it's overriding some of the CSS. I just initially assumed I was doing something wrong.

 

I'll try using a <div> tag instead, as that at least should have no pre-set style that might fight with me.

 

The version of IE I have installed (unused) on my system is not fully up to date, so it may still work on the latest version... doubt it,though.