I'm trying to get the legend to fill the whole left side of the
fieldset. The form elements appear on the right. I've got this to work
in Webkit, Mozilla, and IEs 7 & 8. We're using the jQuery
CurveyCorners plugin to round the corners in IE, Dean Edwards IE9, and
Keith Clark's ie-css3.js to make IE behave like a modern browser.
IE 6 is having none of it. I tried putting the text inside spans
inside the legend, and that didn't work either. I know that if I give
the legend elements specific heights, it will work, but the field sets
will have different heights depending on what's in them, and we're
trying to avoid using classes and id all over the place. Is there a
better way, or do I have to hard code the height?
<fieldset>
<legend>Documentation Preferences: <a href="#"><img
src="img/cor_info_ico.jpeg" alt="Click here for more information"
/></a></legend>
<p>
<input type="radio" checked="checked" value=""
id="sendDocumentType1" name="sendDocumentType1" />
<label for="sendDocumentType1">Paper Documents</label>
<span>
<input type="radio" id="sendDocumentType2"
name="sendDocumentType2" />
<label for="sendDocumentType2">e-Docs</label>
</span>
<label for="send_options">Send to:</label>
<select id="send_options" name="send_option">
<option value="Travel Agency"
selected="selected">Travel Agency</option>
<option value="Guest">Guest</option>
</select></p>
</fieldset>
#action_section fieldset {
background:#eef9fe;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
margin:5px 0;
position:relative;
}
#action_section legend {
background:#ddecf6;
border-radius:5px 0 0 5px;
-moz-border-radius:5px 0 0 5px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
color:#369;
display:block;
font-weight:bold;
height:100%;
line-height:3;
padding:0 0 0 5px;
position:absolute;
width:180px;
}
* html #action_section legend {
padding-top:10px;
}
--
Marc Luzietti
absynthe minded web smithes
http://www.absynthe.us/
954.496.0162
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
