Hi all.

 

I have a simple design going for a friend using positioned divs to make a design that's wide rather than tall. The page can be found here: http://www.ogonline.org/sjp and is structurally complete I think.

 

In the standards-compliant browsers the

#content

div displays in the centre, left of the floated

#mugshot

div, but in IE 7 it displays off-centre, to the right. It's as if it's avoiding the floated curves image at the left of the page. In IE8 the behaviour is correct.

 

Because I've used positioned elements to get the horizontal design, is there some quirk about IE that causes it to forget or misinterpret z-index or other important things?

 

Thanks.

Matt.

badly coded site is the cause.

Maybe if you sent the site i might fix it for a small fee.

 

Your main problem is your use of absolute positioning.

its should be an easy fix take 10mins to look at it properly.

 

Ill give you a tip:

 

Look at these.

#container1

 

#container1, #container1b {

 

Aye I thought it might be those two, but that was a work-around for another issue which meant the floated images were on top of everything.

 

Can you give me a hint as to whether it's a z-index, has_layout or whatever?

 

Thanks for the help.

Z-index? i think your making this more complicated than it is.

Take a 20 min break and realise its a simple layout.

 

What your looking at here is essentially a 4 column site.

 

create the 4 divs with a wrapper and then position the wrapper in the middle.

 

with the wrapper you could do something like:

 

#wrapper {

height: auto;

margin: 50% auto;

width: 100%;

}

 

Then chuck everything else in that and set accordingly.

 

Your main problem is that container1b is positioned absolutely. Try using no "position" attribute and setting the position using margins/padding etc

I see what you mean - I get it. But.

 

I know it's a simple layout, yet the text and picture need to always be ABOVE the floated #curves divs. When I switch #container1b to just

{ margin: 0; }

which basically makes it not do anything, the content of the page gets crushed in by #curvesleft and #curvesright when the window is resized. That's not acceptable.

 

OK let me give some more details.

 

#container1 contains "backdrop.jpg", which is long enough to allow for expansion up to 1920px screen width. Because it's not a flat colour (but a subtle gradient pattern), to put the curves in I had to use transparent ".png"s with the page background colour at the top and bottom to give the impression that #container1 has a complex shape, while still allowing it to expand nicely.

 

To get the #curves divs to sit in their proper places I had to float them, which gives them a higher z-index than all the un-positioned elements on the page (this is the reason I immediately thought it was a z-index issue).

 

So.

 

To get #container2 (contains #content and #mugshot) to have the correct width, I had to put a new positioned element over the #curves. That way it wouldn't be affected by them.

 

Is that clear or have I slowly but surely gone completely mad?

 

If it's bad code why do FF3, Safari and Opera all render it as I intended?

 

Matt.

Fixed:

 

It was an error in the markup, not in the CSS. Details for future reference:

 

http://www.ogonline.org/sjp

 

#container1 and #container1b are absolutely positioned in the vertical centre using margins, but 1b was nested inside 1, so I put 1b outside of 1 and it now displays correctly in all browsers.

 

By this I mean that I closed 1 before opening 1b.