Min Div Height Limit -IE certain elements, Cross-Browser

Consitent Div HR handling spacing and coloring Cross-Browser

[twohawks]

SOLUTION Minimum Div Height Limitation in IE with certain elements, plus Cross-Browser HR handling...


Since I had found partial answers for this scattered about, including a few pages on WebmasterWorld, and then finally figured out an alternate solution, I figured it might be helpful to post this here....

I don't have time to ink out all the aspects right now, so I may return to add some, and I am sure others will too...

===================================================
PROBLEM: the trouble I was having was creating some colored HR tags that are perfectly vertically spaced between other divs ...that also appear uniform in size, spacing, and coloring across all browsers.

I wanted to use HR's managed within Divs due to some constraints within a particular design when trying to use them without...

THE ISSUES then are:
- consistent color management of HR's, and
- consistent spacing management
...across all browsers

===================================================
PRENOTES:
- Most will tell you HR's are deprecated and to instead use border coloring on elements you are employing. Indeed, I usually use Divs' for sculpting this sort of solution. I was just feeling stubborn I guess.... I stepped into the HR s--t and I couldn't let it go....

- btw, hr's are coming back in html5 for managing section breaks (I need to read up on the specifics, but worth noting)

** - IE (I don't know about 9 yet) won't let an element have a height that is less than its line-height. This is because IE treats height the way it should treat min-height, which it doesn't support.
You can decrease the font-size AND line-height (you must do both) OR use overflow:hidden.
credit: Kravvitz at the codingforum - thanks!

- Or just use a Div instead of an hr (duh)

- **You will notice that if you remove the background color of an HR you can better control the height in IE under certain circumstances and not others. While I do not know for sure, it seems that when you add the background color attribute the HR takes on an undefeatable line-height... you could try and fake it out using negative margins, but the results are inconsistent across browsers, and so is not recommended. Besides, its a bit of a hack and does not address the actual issue.

- noshade attribute (for solid coloring) is not a totally crossbrowser solution (and is a depricated attribute).


===================================================
TYPICAL SOLUTION METHODS EMPLOYED:
- font-size and line-height,
- overflow:hidden
- noshade with css
- including various included application of margin and height control

All the solutions mentioned have a caveat somewhere in application for total Cross-Browser compatibility. Even this one...

The css alternative to using noshade:
css equiv cross-browser for using noshade(depricated attr)
<hr style="height:2px; border-width: 0; color: orange; background-color: orange;" />

Try that in a div and then try controlling spacing cross-browser - not quite working.


Finally, I got really close to making it work, but then I had a cross-browser margin issue... in about 3 browsers (not just IE) I had different results, and I couldn't add margin-spacing back to the HR to compensate because it caused IE to bring back the default spacing ,and then add the margins - making things really 'spaced out', and in Safari there were inconsistent resultss as well...
...make a long story short, it was like playing bop a mole (once again)...

#######################################3
MY SOLUTION:
What I did not read about anywhere was this obvious solution... using POSITION: ABSOLUTE to Collapse the Div around the HR! It works! Once you do that, you can totally control margin spacing equally across browsers, which also lends itsself well to easy solid or border coloring management that is cross-browser consistent.

Here's an example:

<div style="position:relative; border: 1px solid red; margin: 5px auto;" ><!-- set the border to 1 to see the div boundaries and back to 0 to turn them off -->
<hr style="position:absolute; border-width: 0pt; margin: 5px auto; height: 2px; width: 80%; left:10%; color: khaki; background-color: khaki;">
</div>

In the above example, I removed from the DIV height, line-height, font-size, text-align and align= (those last two for centering) controls, and I added Position:absolute and left:% (to manage centering) to the HR .

Thie renders a perfectly centered and equally spaced HR with the right color and sizing in all browsers I tested (FF 3-4, IE 6-9, Safari 3-5, Opera 9-10, Chrome X-X)


BTW, the way the centering works should be obvious, and may not be necessary depending on how you setup your default styles (etc). The idea is to shift the element to center based on the width it is taking up. So 80% width leaves 20% space, and half that is the shift to center the element (left:10%).

Hope someone finds any of this helpful.

[edited by: alt131 at 2:43 am (utc) on Aug 27, 2011]
[edit reason] Removing smilies from code sample [/edit]

[Leosghost]

Hope someone finds any of this helpful.

It was very helpful indeed ..Thank you ;-)

[Paul_o_b]

Hi,

Thanks for a thoughtful post.:)

However I may be missing the obvious but if you are adding a div around the hr then just set the hr to display:none and style the div instead for perfect results across all browsers.:)

At present you are just removing the hr from the flow causing it to overlap following elements and ending up inside the following element.

e.g.

<div style="position:relative; margin: 5px auto;" >
<!-- set the border to 1 to see the div boundaries and back to 0 to turn them off -->
<hr style="position:absolute; border-width: 0pt; margin: 5px auto; height: 2px; width: 80%; left:10%; color: khaki; background-color: khaki;">
</div>
<div style="border-top:1px solid red">test</div>

The hr ends up inside the following div in the above example. Indeed if you put 3 or 4 of your horizontal rules in a row you will get some weird results.

For your method to work you need to remove the margins from the hr and then apply the same height to the div so that the space is preserved and hide the overflow for older IE.

e.g.

<div style="border-top:1px solid red;"></div>
<div style="position:relative; margin:5px auto;height:2px;overflow:hidden" >
<hr style="position:absolute; border-width: 0pt; margin: 0px; height: 2px; width: 80%; color: khaki; background-color: khaki;left:10%">
</div>
<div style="border-top:1px solid red;">test</div>

All in all its easier just to set the hr to display:none and style the div unless I'm missing something obvious - which wouldn't be the first time.


As far as I see it hrs are really only useful when CSS is turned off and can then section the page nicely. With css on just hide them and use borders on existing elements or use the wrapping div for styling if you think they have structural value.

I've always been adverse to adding extra elements where none are needed and the only argument I see that holds weight for using hrs is for when css is turned off although I know others disagree.

[twohawks]

Hi Paul, thanks for reviewing and commenting.

Couple of notes..
First of all, per your last comment(s) about what's easier and usually recommended, I acknowledged that at the beginning pretty much, commenting that I got a bug on about the hr thing. I agree, the extra element is not needed ;^).

And Actually, I think the whole idea behind my near-pointless exersize was to show that you can take the hr out of the document flow, position it relative to a containing div, then use the containing div margins to precisely control the balance of positioning between the preceding and following div. You can then use the hr top margin to position exactly where you want.
Using the hr "in the flow", no matter what other solutions you may throw aat it, inevitably results in some situation that may not be able to be managed... was my only point.

Take expand the picture, a look at the following cod behavior...

<br>
<div style="position:relative; 
float:left;
height:auto; 
width:195px; 
border:solid orange 1px;
">

<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
test1
</div>

<div style="border: 1px solid blue; margin: 2px auto; position: relative; float: left; width: 100%; text-align: center; height: 2px;">
<hr style="border-width: 0pt; margin: 0px auto; position: absolute; left: 10%; height: 2px; width: 80%; color: khaki; background-color: khaki;">
</div>


<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
test2
</div>

<div style="border: 1px solid blue; margin: 2px auto; position: relative; float: left; width: 100%; text-align: center; height: 2px;">
<hr style="border-width: 0pt; margin: 0px auto; position: absolute; left: 10%; height: 2px; width: 80%; color: khaki; background-color: khaki;">
</div>


<div style="border: 1px solid red; margin: 0.12em auto; position: relative; float: left; width: 100%; height: 20px; text-align: center;">
test3
</div>

 </div>

[Paul_o_b]

Using the hr "in the flow", no matter what other solutions you may throw aat it, inevitably results in some situation that may not be able to be managed... was my only point.

Sorry, I missed that point first time around and yes all methods of using the hr will fail if you want it as a consistent in-flow element.

[twohawks]

Actually, it should be pointed out that you made a really important point... I missed speaking to the aspect of the crux in explicit terms of "the flow", which I believe actually completes the understanding and the contribution.

So good job, and thank you very much ;^)