I'm experiencing an issue with using negative margins that I've never
had before, and it's only occurring in IE. I basically have a div
container with a small padding added to it (.8em to be exact), and
inside of it I have a series of paragraphs. I wanted to add horizontal
rules between each paragraph and give the rules the effect of separating
the paragraphs completely by giving it a negative left and right margin
to "break" out of the padding. This worked nicely in FF, and doesn't
work at all in IE. I also tried using an h1 instead of an hr (as a test)
with basically the same CSS rules and the negative margins work
beautifully in both browsers. Oddly though the the negative margin
required on the h1 is half the size of the padding added to the
container element, which I have no idea why that is? (Mainly because I'm
an idiot)
I've setup a test case for the issues I'm having:
http://www.epiphanize.com/NegativeMarginsTest.htm
You'll notice both the hr and h1 "separators" work nicely in FF, and
only the h1 works in IE while the hr doesn't want to cooperate.
If anyone could tell me the following:
1) Why isn't the negative margins working on the hr in IE while it works
on other elements?
2) Why is the negative margins neccesarry for the h1 half the parent's
padding, when the hr requires the full measurement to achieve the same
effect?
Thanks for your time, any help would be greatly appreciated.
P.S. I've received answers from people saying to simply set the hr's
position to relative, but that doesn't work.
-----
Jonathan Carter
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
