Jump to content


Photo

Layers Render Differently In Safari


  • Please log in to reply
5 replies to this topic

#1 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 28 June 2006 - 07:51 PM

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]
<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>
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]
<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>


Any ideas or help would be greatly appreciated.

#2 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 28 June 2006 - 08:06 PM

try to use absolut positioning instead, this way you don't have to worry about negative margins and top.
<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>

NoGray.com


#3 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 28 June 2006 - 08:15 PM

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?

#4 nogray

nogray
  • Members
  • PipPipPip
  • Advanced Member
  • 930 posts
  • LocationSan Francisco CA

Posted 28 June 2006 - 08:21 PM

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.

NoGray.com


#5 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 28 June 2006 - 08:48 PM

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

#6 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 05 July 2006 - 10:10 PM

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.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users