relative position divs are reserving space

moved elsewhere by top: left: but still reserving whitespace

[Mike521]

Hi all, having an annoying problem with css here.

I have a few divs that are defined above a flash animation, and set to hidden. They are given relative positions and then top: 80 and left: 400, to put them on top of the flash animation. When the flash animation gets to a certain point, it triggers a javascript that makes a div visible.

In firefox it looks very nice. but in internet explorer, there is a bunch of whitespace reserved for the divs, above the flash nav, even though they are positioned elsewhere (I also set their heights to be 0).

I believe this is a symptom of being positioned relatively -- [blooberry.com...]

I'd position them absolutely, but they have to appear in the right spot over the flash animation, which itself is inside of a table that is centered on the page, so the divs have to be relative..

anyone have any ideas?

[createErrorMsg]

Relative positioning places an element in the document flow, and then moves it to the offset position. The space being reserved in the layout is actually the correct result of relative positioning.

I also set their heights to be 0

I think this is where your browser difference is coming in.

Compliant browsers like FF will allow you to set a div with content to height:0. IE, however, does not obey. Instead, it mistakenly thinks you've made a mistake and "corrects" it for you by expanding the div to the height of the content.

To quote the good folks at PIE [positioniseverything.net]:

IE/Win will also extend the height of a box so that its content does not overflow the bottom border of the box. Browsers that more closely follow the W3C specifications let the extra content protrude beyond the height or width controlled box.

So in your case, I think both browsers are correctly reserving space for the relatively positioned boxes, its just that FF is giving them a 0 height (the content, which is hidden, is actually sticking out of the bottom of the div) while IE is not.

I would try removing the height:0 from the hidden divs, and instead hide them using display:none in the CSS. Items with display:none are not displayed on screen and no space is held for them (whereas visibility:hidden does reserve space). You can set your JS to change the display property from none to block to make the divs reappear. Whether or not this will cause the whitespace to show up, I don't know. You'll have to test it and see.

cEM

[Mike521]

thanks create -- it was a good idea but has a similar problem, that you suspected it might. The whitespace no longer appears, but as soon as the display = block statement gets hit in the javascript, the whitespace comes back.

this is unbelievably frustrating

[createErrorMsg]

Drat. I thought that might happen.

but they have to appear in the right spot over the flash animation, which itself is inside of a table that is centered on the page, so the divs have to be relative

Have you tried setting the table which holds the flash to position:relative, then nesting the hidden <div>s inside of that table, positioned abolutely? Asb.pos elements inside of a rel.pos container take their pixel location relative to the container. So if the divs are the same size as the table, absolutely positioning the divs inside the table at top:0;left:0; would do it.

cEM

[Mike521]

thanks again! this is definitely a step in the right direction, however now I'm seeing an odd browser situation.

on FF, the absolute position seems to be coming from 0,0 of the browser window, while on IE it is perfectly placed (must be coming from 0,0 of the table that encompasses the flash).

structure is like this:

<table position relative>
<tr>
<td>
<hidden div of content, display none, visibility hidden, position absolute>
<flash animation>
</tr>
</td>
</table>

interesting.. will try to mess with it some more, in the meantime thanks a ton create -- this was driving me nuts yesterday

edit: yep I confirmed that FF is starting from 0,0 of the browser window. set top = 0 and left = 0 and sure enough in FF it showed up at top left of the browser. in IE it showed up at the top left of the table. interesting

edit 2: got it! I put a div around everything and gave it position relative. Apparently FF just wasn't seeing the position relative embedded in the td tag. it was <td style="position:relative;">. Guess FF doesn't like that.

anyway so surrounding everything in a relative div solved the problem. what a relief!

[createErrorMsg]

Glad to hear you got it straightened out, although I'm sorry it took adding an extra non-semantic element to do it.

Did you try setting the position:relative on the <table> tag, itself? I think <td>s come with their own default positioning stuff (although I couldn't say for sure; I'm not terribly experienced with using tables).

Anyway, one extra wrapper <div> isn't too high a price to pay for getting the effect you want in a cross-browser compatible way.

Congrats,
cEM

[Mike521]

thanks -- and yea I also had the position in the table tag, still no luck with that. after all the frustration I went through with it, having this one wrapper tag is no problem at all.