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...
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 ===================================================
- 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.
attribute (for solid coloring) is not a totally crossbrowser solution (and is a depricated attribute).
TYPICAL SOLUTION METHODS EMPLOYED:
- font-size and line-height,
- 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)...
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;">
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]