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:
alt text



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:
alt text



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

Popular posts from this blog

list macos calm editors formula editors

how hibernate @any-related annotations?