Jump to content

Layers Render Differently In Safari


michaellunsford

Recommended Posts

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.
Link to comment
Share on other sites

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]
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.