Layers Render Differently In Safari

[michaellunsford]

This thread was birthed in the javascript forum, but this is a CSS question.

try this:
[a href=\"http://www.premiumglass.com/test.php\" target=\"_blank\"]http://www.premiumglass.com/test.php[/a]
[code]<table border="1"><tr><td><div id="Layer1" style="position:static; width:275; height:347px; z-index:1;"><img src="images/commercial.jpg"></div>
<div id="Layer2" style="position:relative; top:-347px; margin-bottom:-347px; width:275px; z-index:2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);"><img src="images/commercial_alt2.jpg"></div></td></tr></table>[/code]
Firefox (mac or windows) renders the table around the DIV, which is what I expected.

Internet Explorer (win): After I added "margin-bottom:-347px;" IE renders the table around the DIV -- without that addition it rendered just like Safari.

Safari renders the width correctly, but the height is the sum of the two div heights combined. It is correctly placing the DIV where it goes, but it's still pushing the table cell out of shape. Changing the DIV heights to zero works, but can confuses dreamweaver (and makes the table height 0px high in FireFox and IE). So, I'm thinking this is not a true "solution."
[a href=\"http://www.premiumglass.com/test2.php\" target=\"_blank\"]http://www.premiumglass.com/test2.php[/a]
[code]<table border="1"><tr><td><div id="Layer1" style="position:static; width:275; height:0px; z-index:1;"><img src="images/commercial.jpg"></div>
<div id="Layer2" style="position:relative; height:0px; width:275px; z-index:2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);"><img src="images/commercial_alt2.jpg"></div></td></tr></table>[/code]


Any ideas or help would be greatly appreciated.

[nogray]

try to use absolut positioning instead, this way you don't have to worry about negative margins and top.
[code]
<table border="1">
    <tr><td style="width:275px; height:347px; text-align:left;" valign="top">
        <div id="Layer1" style="position:absolute; width:275px; height:347px; z-index:1;"><img src="images/commercial.jpg"></div>
        <div id="Layer2" style="position:absolute; width:275px; height:347px; z-index:2; opacity: 0; -moz-opacity: 0; -khtml-opacity: 0; filter: alpha(opacity=0);"><img src="images/commercial_alt2.jpg"></div></td></tr></table>
[/code]

[michaellunsford]

I had hoped to put this in-line with other html (inside a table). You've probably seen the production page, where the image position changes depending on screen resolution.

[a href=\"http://www.premiumglass.com/index.html\" target=\"_blank\"]http://www.premiumglass.com/index.html[/a]

There should be a standard way to do this, no?

[nogray]

you set the position to absolute and not the top and left, top and left will be set to auto (meaning they'll appear at the same location). Or you can set them to auto as well.

Now, since they are in a table cell, I set the height and width of the table cell itself. This way the space is used and the images will show up on top of it. Finally set the valign of the table cell to the top and the text align to the left.

and there is nothing standrad about HTML, as long as it works, it should be ok.

[michaellunsford]

Ha! I didn't know "absolute" could be used without precise coordinates. Very cool. All is working in as many browsers as I can test in:

Firefox (win & mac)
Internet Explorer (windows)
Safari (mac)
Opera (mac)

you da man

[michaellunsford]

I'm back again.. after cold-booting windows, Internet Explorer is now rendering the div about 250px to the right of where it should be. Very frustrating.

I put everything back to position:static and position:relitive. This time, I made the <td> a specific height and width, and it works fine.