I want the fields and divs to keep the content visually equal. I am using YUI 3.4.1 reset CSS, and I have the following markup:
<fieldset>
<legend>Hello world!</legend>
<div>Lorem ipsum</div>
</fieldset>
<div>
<h3>Hello world!</h3>
<div>Lorem ipsum</div>
</div>
In IE7, the legend element is slightly indented. I tried to remove the indentation, margin and indentation of the text.
fieldset,div{
background-color: red;
width: 200px;
padding: 0;
text-indent: 0;
margin: 0;
}
legend,h3{
background-color: yellow;
width: 200px;
display: block;
padding: 0;
text-indent: 0;
margin: 0;
}
Are there any other properties that I'm missing here that can help solve the problem?
http://jsfiddle.net/DBhQb/
source
share