CODEWITHSUNDEEP
jquerycssjquery-uijquery-mobile
Sasha Grievus
Sasha Grievus

Reputation: 2686

How to avoid ui-block div (jquery mobile) to overlap in internet explorer?

I have this simple divs, developed in jquery mobile style:

  <fieldset class="ui-grid-b"> 
      <div class="ui-block-a">
      <legend>Question 1 haveng a looong text to explain what the user need to answer</legend>
      </div>
      <div class="ui-block-b">
          <select name="question1" id="question1">
            <option value='0'>Choose...</option>
    <option value='1'>Option 1</option>
    </select>
    </div> 
    <div class="ui-block-c" id="id-error">
        <label for="question1" class="error" generated="true"></label>
    </div>
 </fieldset>

CSS:

.ui-grid-b .ui-block-a { 
padding-top:20px;   
width: 60%;
}
.ui-grid-b .ui-block-b { 
width: 30%; 
} 
.ui-grid-b .ui-block-c {
width: 10%; padding-top:20px;
}

The code represent a page divided in three column (div ui-block-a, ui-block-b, ui-block-c) , occuping respectively 60%, 30% and 10% of the entire page space. All works fine on every browser on earth, but not on explorer. On explorer, if the ui-block-a text is too long, instead of continuing on a new line, it continues under the select. How can i avoid the ui-block-a to be overlapped by ui-block-b?

Upvotes: 0

Views: 2293

Answers (2)

Stephen James
Stephen James

Reputation: 1287

Maybe IE is interpretting fieldset and legend literally as they are intended (with legend being a direct descendent of fieldset - http://www.w3.org/wiki/HTML/Elements/fieldset) and is applying some browser specific styling that is messing up your intentions.

If you try this layout with div's instead of fieldset and legend, my guess is it will work.

Since a fieldset's legend is normally rendered by browsers as a floating title at the top of the parent container, interrupting the border (see example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset) I think IE is ensuring this behaviour by forcing the wrap to none.

Upvotes: 1

user2779544
user2779544

Reputation: 429

change the css as

div{
   word-break: break-all; 
 }
.ui-grid-b .ui-block-a { 
padding-top:20px;   
width: 60%;
float:left;
}
.ui-grid-b .ui-block-b { 
width: 30%; 
float:left;
} 
.ui-grid-b .ui-block-c {
width: 10%; padding-top:20px;
float:left;
}

demo:jsfiddle

Upvotes: 1

Related Questions