Absolute top webkit vs firefox

HTML & CSS
1

I’m trying to position a legend inside a nested fieldset. Fieldset is relatively positioned and legends are absolute, with top:0 and padding-top:15px. Firefox is positioning the legend at the bottom of the padding and webkit putting the legend at the top of the fieldset. Webkit won’t respond to relatively positioning the legend to get it to move down, while firefox will.

Anyone come across this? I can provide code if necessary but this is pretty basic (I feel).

Thanks for any help.

2

Here’s what I generally use to get a legend looking about the same across browsers. I’m not sure if it’s going to be positioned in the same place that you would like to see it.


form fieldset {
    position:relative;
    margin: 20px 0px 20px 0px;
    padding: 0px 12px 0px 12px;
    border: 2px solid black;
}
form fieldset fieldset {
    border-left: 0px;
    border-right: 0px;
    margin: 10px 25px 20px 30px;
}
form legend {
    margin: 0px 0px 0px 12px;
    padding: 0px 3px 0px 3px;
    font-size: 1.1em;
}
<!--[if IE]>
form fieldset {margin-top:28px; padding:0px; z-index:-1;}
form fieldset fieldset {margin-top:32px;}
form legend {position: absolute; top: -13px; left: 8px; margin-left: 16px; padding-bottom:6px;}
<![endif]-->