[FONT=Trebuchet MS]hi,
http://www.newcenturyliving.com/information/
if you click the first link (either .pdf or .swf) under the resources area (the ratings line), you’ll notice a layer becomes visible to the left with some links inside.
in ie, the bottom edge of this layer is right at the grey line, while in firefox the layer’s bottom edge overlaps the grey line by a few pixels.
does anyone know why this is happening? it seems that internet explorer ignores the height property in the ‘container’ and ‘containerSWF’ selectors, perhaps?
plus, you’ll notice i’ve used a double outer divs, one called shell, and one called container. the reason is that i got strange results in ie6 and ff1 when the width property and the padding property were in the same selector. is this normal?
[/FONT]
<style type="text/css" media="screen">
<!--
#ref {
position : relative;
}
#shell {
visibility : hidden;
width : 324px;
position : absolute;
top : -172px;
left : 52px;
}
#shellSWF {
visibility : hidden;
width : 324px;
position : absolute;
top : -172px;
left : 52px;
}
#container {
padding : 20px 0px 17px 25px;
background : #222;
height : 140px;
z-index : 1;
}
#containerSWF {
padding : 20px 0px 17px 25px;
background : #222;
height : 140px;
z-index : 2;
}
#city {
background : transparent;
z-index : 3;
font-family : Tahoma, Verdana, sans-serif;
font-size : 11px;
font-weight : bold;
color : #eee;
line-height : 1.75em;
}
#citySWF {
background : transparent;
z-index : 4;
font-family : Tahoma, Verdana, sans-serif;
font-size : 11px;
font-weight : bold;
color : #eee;
line-height : 1.75em;
}
#tagPDF {
position : absolute;
bottom : 20px;
right : 25px;
font-family : Tahoma, Verdana, sans-serif;
font-size : 36px;
font-weight : bold;
color : #666;
}
#tagSWF {
position : absolute;
bottom : 20px;
right : 25px;
font-family : Tahoma, Verdana, sans-serif;
font-size : 36px;
font-weight : bold;
color : #666;
}
.txtCityLinks {
font-family : Tahoma, Verdana, sans-serif;
font-size : 11px;
font-weight : normal;
text-decoration : none;
color : #ccc;
}
.txtCityLinksSmall {
font-family : Tahoma, Verdana, sans-serif;
font-size : 10px;
font-weight : normal;
text-decoration : none;
color : #666;
}
-->
…
<table border="0" cellpadding="0" cellspacing="0" width="704">
<tr>
<td width="704" height="50"><img src="../img/footer.gif" width="704" height="50" border="0"></td>
</tr>
<tr>
<td>
<div id="shell">
<div id="container">
<div id="city">Select a city:<br><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_austin.pdf" class="txtCitylinks" target="_blank">Austin</a><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_dallas.pdf" class="txtCitylinks" target="_blank">Dallas</a><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_houston.pdf" class="txtCitylinks" target="_blank">Houston</a><br><br><a href="#" onclick="document.getElementById('shell').style.visibility='hidden'; return false;" class="txtCityLinksSmall">[hide]</a>
</div>
<div id="tagPDF">.PDF</div>
</div>
</div>
<div id="shellSWF">
<div id="containerSWF">
<div id="citySWF">Select a city:<br><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_austin.swf" class="txtCitylinks" target="_blank">Austin</a><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_dallas.swf" class="txtCitylinks" target="_blank">Dallas</a><br><a href="http://www.newcenturyliving.com/documents/ncl_ratings_houston.swf" class="txtCitylinks" target="_blank">Houston</a><br><br><a href="#" onclick="document.getElementById('shellSWF').style.visibility='hidden'; return false;" class="txtCityLinksSmall">[hide]</a>
</div>
<div id="tagSWF">.SWF</div>
</div>
</div>
</td>
</tr>
</table>
[FONT=Trebuchet MS]thanks in advance for your input.
my best,
david[/FONT]
