IE 7 position problem

hi folks, i m making a page. in which i used position for stacking order. in FF its fine but in IE 7 i am having problem. it doesn’t show the “3rd box”. i really need help to get it fixed. here is the link, thanks in advance :shifty:

Like, find a box who’s not positioned… who is a parent of your absolute positioned box. Make the non-positioned box position: relative. Now the absolute box can be set relative to that newly-positioned parent, and usually then you don’t have these huge offsets. In general a huge offset like that, unless you’re moving something off-screen, is a red flag. In special situations is may be necessary, but most of the time it’s not, as Ryan noted.

I mean, it’s not supposed to look like this is it?

@stomme i have a box which is parent to absolute, the first box, i m offsetting other where it is ending (i might be wrong coz i am new), the other boxes can’t be offset from parent relative position with giving its coordinates right?

can u gimme a example?

top:600px with position absolute is needed when setting your element somewhere else out of normal flow. what’s wrong with that

Any absolute position value should not be that big, because with values that big, screen sizes can make a mess out of it. If you need it to be somewhere, nest that AP element within that parent and make the parent position:relative. Try to use lowest values possible for the most consistant results with different screensizes.

I’d bet if you resize hte window some you would see the AP element going screwy :slight_smile:

If yo uhave to resort to stuff like top:700px, then yes, something is wrong with your layout :). Maybe not aesthetically, but structurally

I did fix the problem. seemed like the bluebg div had margin and it was disturbing my layout i don’t know of adding margins on each side. however i fixed it using conditional css for IE. @Ryan. my layout not wrong? :frowning:

if u remove the positioning thing (the accordion type jQuery) is a free open source script i used, it has many positioning. so the table/div next to it shows itself behind overlapped behind Accodion div in IE. that’s why

in head there is conditional comment. isn’t it? how does it make 200px more

Are you talking about the div with a class XR.

In ui.css this is styled as top: 500px; but with the <head> IE styles it as 700px;
Thus it appears 200px further down.

I think the main point is being missed here, why in the world are you having to resort to offset values such as 700px… That’s an absolutely absurd amount and a 100% sure sign you coded the page incorrectly.

Not sure I am understanding the question.

ui.css says the top is 500px and this value will be used by all browsers except IE is taking the value from the conditional in the <HEAD> which says the top is 700px.

Any positioned parent can be a reference for other positioned boxes. If everyone needs to move, margins might make more sense. But I’m having trouble seeing what you are doing with your code, because it looks funny in my browsers.