Hi,
I'm stumped on this one. I'm trying to position a block of text, but the area is clipped from the right and only shows about 60 pixels of the width. The text is in a <DIV> that is nested in another <DIV>. Both have height, width and clipping values specified. It displays correctly in IE 5.0 on the Mac, but not Netscape 4.7 on the Mac.
First, here's the external stylesheet the page calls. (The DIV I'm having trouble with is called #fronttext2, the last one) Following that is the code in the page.
.fronttext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #374320; margin-right: 80px; margin-left: 2px}
#bg1 { position: relative; top: 0px; left: 0px; width: 85px; height: 218px; z-index: 1}
#bg2 { position: absolute; top: 28px; left: 440px; width: 66px; height: 76px; z-index: 1}
#bg3 { position: absolute; top: 30px; left: 165px; width: 89px; height: 181px; z-index: 1}
#dottedline { position: absolute; top: -28px; left: 37px; width: 1px; height: 218px; z-index: 2}
#pic1 { position: absolute; top: 10px; left: -588px; width: 84px; height: 138px; z-index: 2}
#pic2 { position: absolute; top: 0px; left: 87px; width: 109px; height: 138px; z-index: 2}
#pic3 { position: absolute; top: 0px; left: 109px; width: 98px; height: 138px; z-index: 2}
#pic4 { position: absolute; top: 0px; left: 102px; width: 96px; height: 138px; z-index: 2}
#tagline { position: absolute; top: 0px; left: 158px; width: 173px; height: 66px; z-index: 2; clip:rect(0px,173px,600px,0px)}
#fronttext2 { position: absolute; top: 76px; left: 0px; width: 299px; height: 400px; z-index: 3; margin:0px; visibility:show; overflow:visible; clip:rect(0px,200px,100px,0px)}
CODE IN PAGE:
<table width="766" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#C9D4AC">
<tr>
<TD VALIGN="top">
<div id="bg1"><img src="../pix/fr1bg1.gif" width="85" height="218">
<div id="bg2"><img src="../pix/fr2bg1.gif" width="66" height="76">
<div id="dottedline"><img src="../pix/vertline.gif" width="1" height="218">
<div id="bg3"><img src="../pix/fr3bg1.gif" width="89" height="181">
<div id="pic1"><img src="../pix/frpix1.jpg" width="84" height="138">
<div id="pic2"><img src="../pix/frpix2.jpg" width="109" height="138">
<div id="pic3"><img src="../pix/frpix3.jpg" width="98" height="138" hspace="2">
<div id="pic4"><img src="../pix/frpix4.jpg" width="96" height="138" hspace="0">
<div id="tagline"><img src="../pix/frhead.gif" width="173" height="66">
<div id="fronttext2" align="left"><span class="fronttext">Tulipa Flowers specializes in floral arrangements, bouquets and floral atmospheres for weddings and all of your special occasions. Located in the San Francisco Bay Area, Tulipa Flowers makes your flowers our business.</span></div></div></div></div></div></div></div></div></div></div></td></tr></table>
I'm stumped on this one. I'm trying to position a block of text, but the area is clipped from the right and only shows about 60 pixels of the width. The text is in a <DIV> that is nested in another <DIV>. Both have height, width and clipping values specified. It displays correctly in IE 5.0 on the Mac, but not Netscape 4.7 on the Mac.
First, here's the external stylesheet the page calls. (The DIV I'm having trouble with is called #fronttext2, the last one) Following that is the code in the page.
.fronttext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #374320; margin-right: 80px; margin-left: 2px}
#bg1 { position: relative; top: 0px; left: 0px; width: 85px; height: 218px; z-index: 1}
#bg2 { position: absolute; top: 28px; left: 440px; width: 66px; height: 76px; z-index: 1}
#bg3 { position: absolute; top: 30px; left: 165px; width: 89px; height: 181px; z-index: 1}
#dottedline { position: absolute; top: -28px; left: 37px; width: 1px; height: 218px; z-index: 2}
#pic1 { position: absolute; top: 10px; left: -588px; width: 84px; height: 138px; z-index: 2}
#pic2 { position: absolute; top: 0px; left: 87px; width: 109px; height: 138px; z-index: 2}
#pic3 { position: absolute; top: 0px; left: 109px; width: 98px; height: 138px; z-index: 2}
#pic4 { position: absolute; top: 0px; left: 102px; width: 96px; height: 138px; z-index: 2}
#tagline { position: absolute; top: 0px; left: 158px; width: 173px; height: 66px; z-index: 2; clip:rect(0px,173px,600px,0px)}
#fronttext2 { position: absolute; top: 76px; left: 0px; width: 299px; height: 400px; z-index: 3; margin:0px; visibility:show; overflow:visible; clip:rect(0px,200px,100px,0px)}
CODE IN PAGE:
<table width="766" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#C9D4AC">
<tr>
<TD VALIGN="top">
<div id="bg1"><img src="../pix/fr1bg1.gif" width="85" height="218">
<div id="bg2"><img src="../pix/fr2bg1.gif" width="66" height="76">
<div id="dottedline"><img src="../pix/vertline.gif" width="1" height="218">
<div id="bg3"><img src="../pix/fr3bg1.gif" width="89" height="181">
<div id="pic1"><img src="../pix/frpix1.jpg" width="84" height="138">
<div id="pic2"><img src="../pix/frpix2.jpg" width="109" height="138">
<div id="pic3"><img src="../pix/frpix3.jpg" width="98" height="138" hspace="2">
<div id="pic4"><img src="../pix/frpix4.jpg" width="96" height="138" hspace="0">
<div id="tagline"><img src="../pix/frhead.gif" width="173" height="66">
<div id="fronttext2" align="left"><span class="fronttext">Tulipa Flowers specializes in floral arrangements, bouquets and floral atmospheres for weddings and all of your special occasions. Located in the San Francisco Bay Area, Tulipa Flowers makes your flowers our business.</span></div></div></div></div></div></div></div></div></div></div></td></tr></table>