Limitations of applying style to HR tag 2

[Einstein47]

Is there something special about the HR tag and applying styles to control the height of the element. I am trying to shrink up the spacing so that the text above and the text below are closer than is now happening. You can see an example here

http://www.starbase47.com/menuframe.html

Click on the "Case" button to see an example with multiple separators.

I have tried applying many different styles to the HR tag and the only one that has any affect is the "margin-top:" if I set that to a negative amount it will pull the separator closer to the text above it, but nothing I have tried will cause the text below to get closer. I've tried "line-height:", "margin-bottom:", "padding:", "height:". Nothing seems to have any affect.

Any suggestions?

Einstein47
There are no kangaroos in Austria!
[[]Starbase47.com]

 

[Vragabond]

I'm sorry, but I cannot see any hr elements anywhere on your page.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[BillyRayPreachersSon]

Perhaps it's the top padding/margin on the element below the HR that is causing you the problem?

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[Foamcow]

There is a documented 'issue' with <hr> tags and IE.
Let me see if I can find it.

http://support.microsoft.com/kb/883631

I believe the same, or similar, problem exists in Mozilla browsers also but can't quite recall the specifics.

I would advise hitting Google for some more info as I think there are workarounds. I certainly got around it somehow.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Foamcow]

And it comes to me after I hit 'submit'

See here.

http://www.robertnyman.com/2007/03/09/a-hard-challenge-styling-an-hr-element/

The solution was in the comments. I think I set a negative margin to 'fix' the problem.

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[1DMF]

Though they then concluded they couldn't get it to work in IE7.

But I would like to make a point about the insistance of them wanting to use <hr> rather than a styled <div> based on semantics.

The usage of the <hr> they say is as a divider, to section off one piece of content from another.

But surely semanticly if you are looking for a divder the <div> tag is the more semantic one to use as w3schools defines it as

The <div> tag defines a division/section in a document.

and technically the way we use it nested and floated etc.. is wrong and not semantic at all as it is used now as a 'container' not a 'divider'.

ok <div> with no formatting wouldn't show a line if CSS is switched off which was there ultimate argument.

but I still think its a tenuos one to argue semantics over an extra <div> concidering the non-semantic way we actually use it to acheive design and layout.

Well I found it amusing anyhow ;-)



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

 

[Foamcow]

Using a div is fine if the div contains something.

A div is a tag to denote a division between a content block, but it's like drawing a box or a fence around the content.

An hr is a horizontal rule. A divider between blocks of content that in itself has no content.





<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 

[Einstein47]

WOW - I appreciate all the information - I never realized the coding for IE 6 would be such a challenge to use CSS.

Einstein47
There are no kangaroos in Austria!
[&#91;]Starbase47.com]

 

[Einstein47]

This is the style I'm using and it seems to work for me

hr {
	height:1px;
	display:block;
	margin: 0 !important;
	margin: -7px;
	color: #a8a8a8;
	background-color:#798c7c;
	border:0px;
}

Thanks for all the help.

Einstein47
There are no kangaroos in Austria!
[&#91;]Starbase47.com]

 

[Einstein47]

Um - I have a new issue now. The only change I made was the HR style definition. However now whenever there is an HR as the second to last item for a menu (buttons "Case", "Party", "Petition", etc.) The last item spills over the bottom border of the menu DIV. Check it out and see for yourself (IE only - FF seems to look ok, however FF doesn't display the sub menus, that is a different issue that I am dealing with in a different forum).
menuframe.html
If you select a menu that doesn't have an HR as the second to last item (buttons "Acctg", "Admin", "Services",etc.) Then the last item is [red]NOT[/red] spilling outside the menu DIV. Can anyone explain this to me?

Einstein47
There are no kangaroos in Austria!
[&#91;]Starbase47.com]