CODEWITHSUNDEEP
javascriptjquerycssdom
Onion
Onion

Reputation: 1832

CSS style difference between static and dynamic elements

When I create a DOM element with Javascript like this

$(document.createElement('div')).attr('id', 'box').appendTo('.parent');

...the height of td elements (and some others) inside the div gets distorted. However, when I specify the div in the markup:

<div id="box"></div>

...the styles are the way they should be.

Why is dynamic DOM element creation distorting CSS styles and how should I fix it?

Edit 1: I've already tried inspecting the div and changing some styles, but it didn't help.

Edit 2: I've recreated it in jsfiddle and it works there without problems (strangely enough). Just so you know, here's the fiddle: http://jsfiddle.net/3cyFD/ My problem is that when I click on "Click me", the datepicker appears, but there are abnormal spaces between rows (the td cells of the table).

Upvotes: 1

Views: 1362

Answers (1)

smcjones
smcjones

Reputation: 5600

My strong assumption is that you have a CSS styling element out there you are not thinking of. That's been my experience when I've been stuck like that.

Using Chrome or Firefox inspect the element you have. You've already said it is not the divs but it sounds like that wouldn't be the issue anyway. Start with your td, then move to tr, then to table. Margins and padding might be your biggest culprits, but look for any attributes, including min-heights, and things along those lines. Let me know if this helps.

Upvotes: 1

Related Questions