addressalign-toparrow-leftarrow-leftarrow-right-10x10arrow-rightbackbellblockcalendarcameraccwcheckchevron-downchevron-leftchevron-rightchevron-small-downchevron-small-leftchevron-small-rightchevron-small-upchevron-upcircle-with-checkcircle-with-crosscircle-with-pluscontroller-playcredit-cardcrossdots-three-verticaleditemptyheartexporteye-with-lineeyefacebookfolderfullheartglobe--smallglobegmailgooglegroupshelp-with-circleimageimagesinstagramFill 1languagelaunch-new-window--smalllight-bulblightning-boltlinklocation-pinlockm-swarmSearchmailmediummessagesminusmobilemoremuplabelShape 3 + Rectangle 1ShapeoutlookpersonJoin Group on CardStartprice-ribbonprintShapeShapeShapeShapeImported LayersImported LayersImported Layersshieldstar-shapestartickettrashtriangle-downtriangle-uptwitteruserwarningyahooyoutube

RE: [webstandards-128] Argh! looking for some css help on one div tag that works in IE but not firefox

From: Dave
Sent on: Monday, October 1, 2007, 9:41 AM
Actually for me in latest Firefox[masked] on Windows, I get it all looking right, except the caption on the bridge is behind the photo. It will appear if I change the top attribute a little.
#spalace {position:absolute; margin:0; padding:2px 1px 0 1px; width:200px; top:760px; left:18px;font-size:70%; line-height:1;}
 
And in IE 7.05, things are a little messier. The captions for the two bottommost pictures, spalace and ctemple, appear over the paragraph text just below them. And there is a tiny bit of extra white space between the photo of pponds and the caption text, and a bit more white space between caption and dgarden photo.
 
I'm wondering in general if this way of slicing up photos and placing them is the usual way to get this nifty collage effect.
 
I wish I knew more about this subject to tell you how to fix it.
 
-dave

David Ruderman

[address removed]
[masked] (Home)
[masked] (Cell)
http://play.blogspot.com (Blog)

 


From: [address removed] [mailto:[address removed]] On Behalf Of Leah
Sent: Monday, October 01,[masked]:45 AM
To: [address removed]
Subject: [webstandards-128] Argh! looking for some css help on one div tag that works in IE but not firefox

Hi Group-
I am trying to finish this site and having trouble finding the problem with this one tag.
If you have time and feel like taking a look, that would be awesome.

The website is coded in css and testing in IE6, IE7 and firefox on the PC and
I was wondering if you could help me with one div tag that is not behaving:

on this page: http://masciwebdesign.com/eroys/journey.html

I made all the captions for the photos absolutely positioned divs, but the one for the pic with the
bridge on the lower left side displays in IE6 but not firefox (where it is on top of picture)

This is CSS head tags for all captions:
#yearbook {position:absolute; margin:0; padding:2px 1px 0 1px; width:120px; top:185px; right:0px;left:614px;font-size:70%; line-height:1;}
#ppond {position:absolute; margin:0; padding:2px 1px 0 1px; width:145px; top:400px; right:0px;left:575px;font-size:70%; line-height:1;}
#dgarden {position:absolute; margin:0; padding:2px 1px 0 1px; width:60px; top:666px; right:0px;left:650px;font-size:70%; line-height:1;}
#ctemple {position:absolute; margin:0; padding:2px 1px 0 1px; width:250px; top:760px; right:0px;left:460px;font-size:70%; line-height:1;}

#camel {position:absolute; margin:0; padding:0; width:155px; top:460px; left:14px;font-size:70%; line-height:1;}
#spalace {position:absolute; margin:0; padding:0; width:200px; top:680px; left:18px;font-size:70%; line-height:1;} <-- this is one that is not working

and here is the body code:

<div id="ppond">Elizabeth Roys with friends on Paradise Pond at Smith College, from the papers found with Elizabeth Roys garden yearbooks.  <br/>Photograph Eric Stahlberg</div>   
<div id="dgarden">Court in the Ding garden in Weihsien, China, from Elizabeth Roys' notebooks.</div>   
<div id="ctemple">Courtyard of the temple of Confucius in Peking, China, from Elizabeth Roys' notebooks.</div>

<div id="camel">Mabel Roys traveling by elephant in India, 1927. <br/>Courtesy of Sophia Smith Collection, Smith College.</div>   
<div id="spalace">Bridge at the Summer Palace in Peking China, from Elizabeth Roys' notebooks.</div>    <-- This is the problem child

any clues would be really great.
Sincerely,
Leah Masci

I attached the page and style sheet, although the relevant style tags are on the html page.