why does floated <input> control floated component slip over too distant right ie7, nonetheless firefox?
hopefully settlement value thousand lines formula since i don't wish have frame down asp.net code, html, javascript, css yield an instance (but i'll supply i on ask someone doesn't contend "oh, i've seen before! try this...") [actually, i post formula css - bottom question].
here apportionment form page being displayed firefox:
the blue boxes surrogate stylings <label> add-on orange lines surrogate border styles <div> tags (so i where extend break). <label>'s styled float: left <div's right. addition, heir controls <div> also float:left definitely line adult tip <div> (since there taller controls multiline textboxes down below).
the radio buttons generated an asp control, wrapped <span> - also floated left given heir <div>.
here same apportionment shade rendered ie7:
there few teenager digest differences, nonetheless large that's pulling me crazy additional white space beside <input> controls! note <span>'s around radio buttons checkboxes line adult correctly.
although aren't shown, same thing happens drop-down lists list boxes. i haven't attempted jacket quarrel controls <span>, nonetheless competence work. it's an dizzy hack, though.
i've attempted several ie7 workarounds box issues i've edited css until i'm pristine spell mode (i.e., origination futile changes anticipating something works). i said, i wish someone feeling during say, "i've seen before! try this..."
anyone?
followup 1:
i'm controlling xhtml 1.0 transitory <doctype>, i should standards mode.
followup 2:
here little dash generated formula above (the initial control final control). note formula generated asp.net following boldly edited javascript/jquery.
<fieldset id="requestinformation">
<legend>request information</legend>
<ol>
<li>
<label id="ctl00_contentplaceholder1_txtrequestdate_l" class="stdlabel"
for="ctl00_contentplaceholder1_txtrequestdate">request date:</label>
<div class="formgroup">
<input id="ctl00_contentplaceholder1_txtrequestdate" class="rsv datetextbox hasdatepicker"
type="text" value="10/05/2004" name="ctl00$contentplaceholder1$txtrequestdate"/>
<img class="ui-datepicker-trigger" src="/project/images/calendar_schedulehs.png" alt="..." title="..."/>
<span id="txtrequestdate_error"/>
</div>
</li>
--stuff deleted here--
<li>
<label id="ctl00_contentplaceholder1_chkappealed_l" class="stdlabel"
for="ctl00_contentplaceholder1_chkappealed"> ask appealed?</label>
<div class="formgroup">
<span class="stdcheckbox">
<input id="ctl00_contentplaceholder1_chkappealed" type="checkbox" name="ctl00$contentplaceholder1$chkappealed"/>
</span>
</div>
</li>
</ol>
</fieldset>
here applicable apportionment css (i double checked certain duplicates problem):
div
{
border-style: solid;
border-width: thin;
border-color:orange;
}
label
{
border-style: solid;
border-width: thin;
border-color:blue;
}
.formgroup
{
float:left;
margin-left: 1em;
clear: right;
width: 75em;
}
.formgroup > *
{
float:left;
background-color: yellow;
}
fieldset ol
{
list-style: none;
}
fieldset li
{
padding-bottom: 0.5em;
}
li > label:first-child
{
display: block;
float: left;
width: 10em;
clear: left;
margin-bottom: 0.5em;
}
em
{
color: red;
font-weight: bold;
}
solution!
matthew separate me page problem. quarrel boxes inheriting left margins containing elements. fortitude i chose hang any <input> component an unstyled <span>. i've perplexing keep structure html semantically sound possible, i solved controlling jquery management $(document).ready() function:
//ie domain fix:
// http://www.positioniseverything.net/explorer/inherited_margin.html
jquery.each(jquery.browser, function(i) {
if($.browser.msie){
$(":input").wrap("<span></span>");
}
});
note wholly supplement ridiculous <span>'s ie...
stack rescue again!
Comments
Post a Comment