css positioning bug in IE for Mac?

user reports serious problem but w3 validation ok!

[stef25]

im not sure if this posting goes here or in the mac forum?

a mac user visited a site i co authored and notified me of a serious problem in IE for Mac. The page consist of a flash image gallery, positioned with css. there are no frames on the page

we have narrowed the problem down to the css positioning.

w3 validator checks out ok for all my css on that page. (it does not check out for the flash code, but the mac user has no problems viewing the same flash code on a non css positioned page)

i always read that if your css code checks out, you should not have problems on a mac. the problem is not one where the positioning is a few px off, it actually displays the whole div twice on different location on the page, which is completely unacceptable

the url to a screenshot jpg is in my profile

so my question is: can anyone suggest the css code in question that is creating this problem. are there any known bugs, and how i can code around it?

the relevant css is below. #gallery is inside #main_column, i suspect this is the problem

#main_column{
position : absolute;
left:50%;
margin:0 0 0 -380px;
width : 760px;
height: 560px;
background-image: url(images/jpg/back.gif);

}

#gallery {
position:absolute;
top:60px;


}

[gulliver]

>i always read that if your css code checks out, you should not have problems on a mac.

Oh, I wish. ;-)

>are there any known bugs, and how i can code around it?

All browsers have their 'interpretation' of standards. Added to which are bugs. It's all highly variable.

Rather than try to code for specific behaviour/bugs
keeping things simple helps - and your code looks needlessly complex.

Is the absolute positioning and negative margin necessary?

Others will suggest their own workarounds, my view is that you can easily accomplish your aims with simple floats.

If the url doesn't get clipped, try [css.maxdesign.com.au...] for starters

[Leosghost]

I hope that no one does clip the url posted ..very good resource gulliver

[stef25]

nice resource indeed, it did not clip

the negative margin technique was suggested to me by someone on this forum and was the only working way for me to position my main wrapping div in the centre of the page ... im still learning

ill try this out later and see if i can float my main content wrapping div in the centre of my page

thanks for this

[createErrorMsg]

i always read that if your css code checks out, you should not have problems on a mac

Unfortunately, I think the css validator only checks to see that the code is syntactically(sp?) correct, not that it will interact and display properly.

Is #main_column inside another <div>? If so, make sure THAT container is positioned (relative or absolute) or it will not be able to hold the absolutely positioned #main_column and #main_column will position itself within the next container it can find (probably the html element).

I don't know if this is your problem, but it's worth checking.

[gulliver]

>the negative margin technique was suggested ... the only working way for me to position my main wrapping div in the centre of the page ... im still learning

Hey - we're all still learning. No worries.

This will center the div... just change the width and color to what you want.

body
{
border: 0;
margin: 0 auto;
padding: 0;
background: #fff;
text-align: center;
}

#wrapper
{
border: 0;
margin: 0 auto;
padding: 0;
background: #fff;
width: 750px; /* bmh */
voice-family: "\"}\"";
voice-family:inherit;
width: 748px;
}

html>#wrapper
{
width: 748px;
}

The last bit... /* bmh */ and everything after is optional - simply a workaround for Explorer's incorrect width handling.

This'll get you a content section in the middle of the page - into which you can slot all other divs.
If it's a 2-col layout you want, the simplest route is to float a left column (with a specified width) and simply have the right col line up alongside and occupy the remaining space by setting its left margin to the width of the left col.

An example...

#main
{
float: left;
border: 0;
margin: 0;
padding: 0 25px 0 25px;
background: #fff;
text-align: left;
width: 500px; /* bmh */
voice-family: "\"}\"";
voice-family:inherit;
width: 450px;
}

html>#main
{
width: 450px;
}

#sidebar
{
border: 0;
margin: 0 0 0 500px;
padding: 0 20px 0 20px;
background: #fff;
text-align: left;
}

In case it's not clear... the padding simply buffers the content away from the edges of the containing divs - it's not essential and can be removed... in which case make sure the numbers add up.

[stef25]

would you care to explain what advantage the above technique would have over what i have in place at the moment?

i find it quite complex, there's stuff in there ive never seen before!

[gulliver]

Advantages are simplicity and reliability.

Perhaps a wise investment for you might be the books of Zeldman and Eric Meyer. They're excellent references.

[gulliver]

>a wise investment for you

If that seems unnecessarily curt... change 'you' to 'us'.

[stef25]

hey no problem. ill check that book out, aswell as the code

gotta get some sleep now