Positioning prob in IE7 but not FF

posted originally in wrong forum

[SaminOz]

I have reached a brick wall in trying "ways" to get 3 absolutely positioned <div> elements to perform the same way in IE7 as they do in FF. All is cool when I put a 1px border around all elements on page to see what is going on - but when removed - problem back.
In IE7 the carefully positioned <div>'s over shoot their vertical length by 40px or so - all <div>'s are positioned top: 0px; and are next to each other. They form the right hand side of the page. Their relatively positioned container <div> (which is within a master content <div> - to give centering when the browser is re-sized) is sandwiched between a header and a footer, both of which use the same format.

I have tried using z-index to get the footer to sit over the overshoot and hide it - but this only works in the 1px border scenario in the first para. Goes back to normal when removed.

The 40px overshoot doesn't add up to any padding or margin settings in any of the content section. It does match the height of images that sit atop of the absolutely positioned elements - however these are in the header container <div> element and so are quarantined.

All code has been verified.

I'm not sure I've done a great job of describing the problem but I hope it may ring a bell for someone.

Cheers,

Sam :)

[swa66]

Try posting a minimal set of code that shows the problem, might ring ore bells if we see code to go along with the description.

[g1smd]

Get the Firebug extension for Firefox. Use the HTML tab to traverse the tag tree. Look in the box on the right to see which CSS properties are being applied to that element. It's a revelation.

Usually it's a problem with forgetting to add position:relative to my floats, and/or forgetting clear:both somewhere along the way.

Other times it is an incorrect margin or something, and most times it is the margin on a parent element, not the margin on the element that appears to be mis-aligned.

[SaminOz]

Hi all - just a note of thanks for your help. I have found the problem. I had 4 divs actually and the first had a height of auto. I was aligning the other 3 divs (absolutely) to this first. By specifying its actual height - the difference between the two browsers has disappeared.

btw - I downloaded firebug and it looks like useful tool - so thanks all.

I will post code next time but was under the impression that is a last resort? or at least to be minimised - and since I didn't know where the problem was - that could have been a lot of code.

Peace out - Sam.

[g1smd]

In order to post meaningful code here, without overwhelming people, you need to reduce it to bare bones tags and placeholder content, just enough to still have the problem show up. In doing that, you'll likely discover the problem is staring you in the face. Been there. Done that.

[SaminOz]

OK - that's how I'll do it next time. Thanks for the tips.

[g1smd]

I have had two issues this week where while I was deleting stuff so I could post a short snippet, I noticed the typo while I was doing it.