5 replies [Last post]
binphx
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2008-01-31
Posts: 3
Points: 0

Hi All, I have an IE specific issue I don't know how to solve.

Currently, I am doing some grid type work and I layout a parent div with the class .dd-ct
as below and by dom manipulation I insert a newly create div with the class of .appt as below

.dd-ct { font:normal 12px Verdana, Arial, Helvetica, sans-serif; color: #15428b; font-weight: bold; text-align: right; white-space:nowrap; height: 24px; max-height: 24px; border-right: 1px solid #000; border-bottom: 1px dotted #d0d0d0; padding: 0px; width: 120px; float: left; } .appt { font-size: 9px; font-weight: normal; height: 24px; background-color: #c4d0ff; cursor: move; }

The height of the div with class appt is always changed and usually goes greater than the height of the parent div.

In firefox, safari and a few others I have looked at on both pc/mac platforms this works as I intend where the child element goes over the boundries of the parent element..

In IE, however, the parent element is resized to fit the newly created child.. Therefore, breaking the grid look completely.

I know this probably isn't much to go off of but I can post more or explain more if needed.

Any and all help would be greatly appreciated.

Thanks.

Billy.

Aequitas
Aequitas's picture
Offline
Enthusiast
PA
Last seen: 10 years 44 weeks ago
PA
Timezone: GMT-4
Joined: 2007-09-13
Posts: 246
Points: 2

Well, posting all your CSS

Well, posting all your CSS and HTML is appreciated, but a link to the issue would be appreciated more.

binphx
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2008-01-31
Posts: 3
Points: 0

Ok, here is sample

I'm under non-disclosures non-competes so I made a really simple sample
of what I am doing that produces the same results. In Firefox, Safari on
pc and mac, the desired affect takes place and IE 7 bounces the bottom
div down. Looking at it, my question wasn't phrased right as it isn't the
parent element getting expanded, it is the row below being pushed down I think.

.dd-ct {
font:normal 12px Verdana, Arial, Helvetica, sans-serif;
color: #15428b;
font-weight: bold;
text-align: right;
white-space:nowrap;
height: 24px;
max-height: 24px;
border-right: 1px solid #000;
border-bottom: 1px dotted #d0d0d0;
padding: 0px;
width: 120px;
float: left;
}
.appt {
font-size: 9px;
font-weight: normal;
height: 24px;
background-color: #c4d0ff;
cursor: move;
}

function appendDiv()
{
var el = document.getElementById('dd-ct-div');

var apptDiv = document.createElement("div");
apptDiv.className = "appt";
apptDiv.innerHTML = 'something here';
apptDiv.style.height = '45px';
el.appendChild(apptDiv);
}


Thanks for any input you have.

Billy

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

DTD

What happens if you add a doctype?

http://csscreator.com/node/18218

Verschwindende wrote:
  • CSS doesn't make pies

binphx
Offline
newbie
Last seen: 13 years 51 weeks ago
Joined: 2008-01-31
Posts: 3
Points: 0

RE: DTD

Well, if I add a doctype, it, works like a charm!!

Thank you very much. This has also taught me to remember to
put in a doctype. I get lazy and don't sometimes and this
one really bit me.

Thanks again.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 21 hours ago
Joined: 2004-06-30
Posts: 9679
Points: 815

No probs, thanks for letting

No probs, thanks for letting us know Wink

Verschwindende wrote:
  • CSS doesn't make pies