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)
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.htmlI 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.