Member Avatar for mangel.murti

hi all,

i am working with this site actu..

i am generating dyanamic div of controls in web page. when you add controls to right side div , controls are not fitting in proper way in step. and in IE it will not displaying good.

any help appreciated

thnx

  • 2 Contributors
  • 6 Replies
  • 120 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Short diagnosis tied to the thread: is inserting whole HTML strings via jQuery and correctly recommended moving style rules into CSS. The common reasons IE shows extra gaps or broken layout after dynamic insertion are: invalid HTML produced by unquoted/escaped attributes (that can make browser render raw JS/text), the page running in quirks mode (bad DOCTYPE), float/clear issues, default margin/line-height differences between browsers, and older-IE “hasLayout” quirks. Each of these is easy to verify and fix.

Practical fixes to try (ordered by how often they solve this type of problem)

  • Ensure a proper DOCTYPE so IE uses standards mode (see MDN on Doctype: Doctype).
  • Move all sizing/margins into an external stylesheet; add box-sizing: border-box globally to make widths predictable across browsers (box-sizing).
  • Contain floats with a modern clearfix (keeps rows from collapsing): 
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Stop building complex HTML as one long quoted string. Create elements with jQuery’s DOM constructors and append them; this removes quoting/escaping bugs and avoids orphan text nodes (see jQuery’s .append() docs: append()). Example approach: construct an outer wrapper element, append labeled children and the remove button, then append the wrapper to .Container. Bind events with delegated handlers (.on()) rather than inline onclick attributes.

IE-specific tips

  • For IE6/7 layout bugs, trigger hasLayout on the row (e.g., zoom:1) — explanation at QuirksMode: .
  • Use IE’s Developer Tools (F12) to inspect computed styles and look for stray text nodes or unclosed tags. To isolate the problem, create a minimal test page that inserts a single row and compare browsers while toggling individual CSS rules (or add temporary background colors to see element bounds).

Checklist: valid DOCTYPE, move inline styles to CSS, use DOM creation instead of long strings, clearfix floats, inspect with dev tools. These steps solve most IE spacing/display issues with dynamically created form rows.

Recommended Answers

All 6 Replies

Member Avatar for Member #120589

Want to cost your code?

Member Avatar for mangel.murti

i am using jquery .

$("div.Container").append("<div   style='margin-left:8px;text-align:left' id='Name"+counter+"' onclick=EnablePropertiesField('lblName','"+counter+"','Name');> "+"<div style='height:50px;width: 555px;'>"+"<span id='lblName"+counter+"'>* Name</span> <br/><input type='text' style='width: 180px' class='Text' required='true' id='txtName"+counter+"' /><span id='errorName"+counter+"' style='color:red'></span> "+"<span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName"+counter+"' onclick=DeleteNode('Name"+counter+"') class='DeleteClass' /></span>"+"</div></div>\n");      
		++counter;
Member Avatar for Member #120589

OK, so if I get you right - this is an example of your js-initiated output (where counter = 1):

<div style='margin-left:8px;text-align:left' id='Name1' onclick=EnablePropertiesField('lblName','1','Name');>
   <div style='height:50px;width: 555px;'>
        <span id='lblName1'>* Name</span><br/>
        <input type='text' style='width: 180px' class='Text' required='true' id='txtName1' /><span id='errorName1' style='color:red'></span><span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName1' onclick=DeleteNode('Name1') class='DeleteClass' /></span>
    </div>
</div>

I would suggest placing all your style rules into an external css file. You can give the bounding div a classname like "sideElement" or something, so you can hook the rest of the insides to it. You should also enclose your inline js within quotes.

css:

.sideElement{
  margin-left:8px;
  text-align:left;
}
.sideElement div{
  height:50px;
  width: 555px;
}
.sideElement input{
  width: 180px;
}
.sideElement div > span{/* applied to first child span under div*/
 color:red;
}
.sideElement div span + span{ /*applied to 2nd and subsequent span elements inside div element*/
 float:right;
}

markup:

<div class="sideElement" onclick="EnablePropertiesField('lblName','1','Name');">
   <div>
        <span id='lblName1'>* Name</span><br/>
        <input type='text' class='Text' required='true' id='txtName1' /><span id='errorName1'></span><span><img src='images/remove-ico.gif' alt='Delete' id='imgName1' onclick="DeleteNode('Name1');"  /></span>
    </div>
</div>

I apologise if I have deleted a class or something that you rely upon. I assume that you need certain ids for document.getElementById() in js functions. I assume the class="Text" and required="true" is something to do with a client-side validation. If not remove the class and style through the css. Do you need an id for the image?

I've gone through this so you can de-clutter the markup and get to grips with what's causing the problem.

Member Avatar for Member #120589

Just another thought, do you really need the inner div - seems excessive?

Member Avatar for mangel.murti

i am using jquery .

$("div.Container").append("<div   style='margin-left:8px;text-align:left' id='Name"+counter+"' onclick=EnablePropertiesField('lblName','"+counter+"','Name');> "+"<div style='height:50px;width: 555px;'>"+"<span id='lblName"+counter+"'>* Name</span> <br/><input type='text' style='width: 180px' class='Text' required='true' id='txtName"+counter+"' /><span id='errorName"+counter+"' style='color:red'></span> "+"<span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName"+counter+"' onclick=DeleteNode('Name"+counter+"') class='DeleteClass' /></span>"+"</div></div>\n");      
		++counter;

yes your logic is right for counter.no apologise for that thing.
class="Text" and required="true" , can not remove these as u know that.... i tested with external css file but in IE it is not displaying good more gaps between controls showing in IE

i want it in proper format .....

so can u help me....

Member Avatar for Member #120589

looked at your site and your trousers are down on the form create page. All your js is showing. Can't see the offending page as the form creator will not advance beyond the faulty page.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.