Sent by antmanbee on 3 June 2006 08:08
Good day to you all
I have a problem that I wish to solve and I'm coming here first!
I have built a web site that is generally fine, no particular IE problems,
except one.
I have a narrow side panel on the left that holds links to the various other
pages. Each link has a picture above it. The pictures all stay in the same
place throughout various browsers, but the text moves about (a bit) and
moves excessively in IE PC (IE Mac its fine).
I know I've done a bad thing by spacing the vertical words with carriage
returns, but what is a safer and more professional way to do it?
I've tried increasing the leading but that didn't work too well, and I fear
isn't really the answer.
below is the relevant html, css and a link to the site.
Many thanks, in advance, for any help:
html From the 'info' page:
<div id="Layer4" style="position:absolute; width:173px; height:1140px;
z-index:4; left: 100px; top: 253px; background-color: #E6E6E6;
layer-background-color: #E6E6E6;">
<p> </p>
<p> </p>
<p> </p>
<p class="sidetext"><a href="/info.htm" class="sidetext">General</a></p>
<p class="sidetext"> </p>
<p class="sidetext"><a href="/accomm.htm"
class="sidetext">Accommodation</a></p>
<p class="sidetext"> </p>
<p class="sidetext"><a href="/prices.htm" class="sidetext">Prices and
availability</a></p>
<p class="sidetext"> </p>
<p class="sidetext"><a href="/getting.htm" class="sidetext">Getting
there</a></p>
</div>
<div id="Layer5" style="position:absolute; width:148px; height:103px;
z-index:5; left: 110px; top: 279px;"><img src="/Images/fishingTimeSmall.JPG"
width="148" height="103"></div>
<div id="Layer6" style="position:absolute; width:148px; height:103px;
z-index:6; left: 110px; top: 425px;"><img src="/Images/accomsmall.jpg"
width="148" height="103"></div>
<div id="Layer8" style="position:absolute; width:148px; height:103px;
z-index:8; left: 110px; top: 572px;"><img src="/Images/bookingsmall.jpg"
width="148" height="103"></div>
<div id="Layer9" style="position:absolute; width:148px; height:103px;
z-index:9; left: 110px; top: 724px;"><img src="/Images/gettingsmall.jpg"
width="148" height="103"></div>
</body>
css
..sidetext {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 10pt;
color: #666666;
text-align: center;
line-height: 45pt;
Link:
http://www.madeiracottage.co.uk
amb
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
