Forum Moderators: not2easy
the CSS is here:
/**************** Content area styles ****************/.centrecontent
{
position: absolute;
float:left;
background:#fafafa;
overflow: hidden;
top: 10%; left:10%; height: 100%; width: 70%;
min-height:100%;
font-size: 10pt; color: black;
line-height: 16pt;
padding: 5px 40px;
text-align: left; font-family: Verdana,Tahoma,sans-serif;
border: thin 1px black;
margin-bottom:2px;
}
html>body .centrecontent{height:auto;}
.topcontent
{
position: relative;
background:#fafafa;
overflow: hidden;
top: 0%; left:0%; height: 35%; width: 100%;
font-size: 10pt; color: black;
line-height: 14pt;
text-align: left; font-family: Verdana,Tahoma,sans-serif;
}
html>body .topcontent{height:35%;}
.contentarea
{
position: absolute;
float:right;
background:#fafafa;
overflow: hidden;
top: 40%; left:25%; height: 100%; width: 79%;
min-height:100%;
padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;
margin:-5px;
}
html>body .contentarea{height:auto;}
/************************************vertical menu*******************************/
.leftmenu
{
position: absolute;
float:left;
background:#fafafa;
overflow: visible;
top: 40%; left:0%; height: 100%; width: 20%;
min-height:100%;
padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px;
}
html>body .leftmenu{height:auto;}
#navcontainer { margin-right: 10px; float:left;}
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}
#navcontainer li { margin: 0 0 1px 0; }
#navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #fff;
background-color: #036;
text-decoration: none;
}
#navcontainer a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
#navcontainer ul ul li { margin: 0 0 1px 0; }
#navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #fff;
background-color: #369;
text-decoration: none;
}
#navcontainer ul ul a:hover
{
color: #fff;
background-color: #69C;
text-decoration: none;
}
.carpfeed {
text-align:left;
font-size:1em;
}
.carpfeed a {
background-color:transparent;
color:#c00;
}
.right
{
float: right;
}
.left
{
float: left;
}
.centre
{
position:relative;
left:50px;
}
.zindex
{
z-index:-1;
}
hr {
border: 1px;
width: 98%;
color: silver;
background-color: silver;
height: 1px;
}
/*************************horizontal menu*************************/
#nomargin
{
margin: 0;
}
#vdividermenu ul{
margin: 0;
margin-right:20px;
padding: 0;
padding-left:10px;
margin-bottom: 1em;
float: left;
font-family: verdana, arial, Helvetica, sans-serif;
width: 90%;
border: 1px solid black;
background-color: #036;
}
* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 89%;
}
#vdividermenu ul li{
display: inline;
}
#vdividermenu ul li a{
float: left;
color: #fff;
padding: 2px 8px;
text-decoration: none;
background: transparent url(images/vertical.gif) center right no-repeat;
}
#vdividermenu ul li a:visited{
color: #fff;
}
#vdividermenu ul li a:hover{
color: #fff;
background-color: #69C;
}
and the HTML:
<body><div class="centrecontent">
<div class="topcontent">
<div class="left">
<div class="zindex">
<img src="../images/nanologo_with_writing.gif" width="340" height="120" />
</div>
</div>
<p align="right" class="style8"> </p>
<p align="right" class="style10">Company S.L.N.E</p>
<p align="right" class="style10">Sreet Name/p>
<p align="right" class="style10">Zip</p>
<p align="right" class="style10">Hospitalet de example</p>
<p align="right" class="style10">Tel: 012 34 56 78/012 34 56 79 </p>
<p align="right" class="style10"> Fax: 00 000 0 000</p>
<p align="right" class="style17"><a href="mailto:" target="_blank" class="style18">e-mail: info@example.com</a></p>
<p align="right" class="lineheight">IDIOMAS <a href="/"><img src="../images/flag_en.gif" alt="ingles" width="13" height="13" border="0" /></a> <a href="/"><img src="../images/flag_es.gif" alt="espanol" width="13" height="13" border="0" /></a></p>
<p> </p>
</div>
</br>
<div class="leftmenu">
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Casa</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Maderas</a></li>
<li><a href="#">Piedra y Concreto</a></li>
<li><a href="#">Cristales</a></li>
<li><a href="#">Textiles y Cuero</a></li>
</ul>
</li>
<li id="active"><a href="#" id="current">Nautic</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Cubiertas de Teka</a></li>
<li><a href="#">Cristales</a></li>
<li><a href="#">Textiles y Plasticos</a></li>
<li><a href="#">Casco</a></li>
</ul>
<li id="active"><a href="#" id="current">Coche</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Cristales</a></li>
<li><a href="#">Carrocerias</a></li>
<li><a href="#">Interior</a></li>
<li><a href="#">LLantas</a></li>
</ul>
</ul>
</div>
</div>
<div class="contentarea">
<hr />
<div id="vdividermenu">
<div align="left">
<ul>
<li><a href="#" class="style20">Home</a></li>
<li><a href="#" class="style20">Empresa</a></li>
<li><a href="#" class="style20">Nanotecnologia</a></li>
<li id="current"><a href="#" class="style20">Distribuidores</a></li>
<li><a href="#" class="style20">Productos</a></li>
<li><a href="#" class="style20">Servicios</a></li>
</ul>
</div>
</div>
<p> </p>
<div class="imagepad">
<p align="center"> </p>
<p align="center" class="caption"> </p>
</div>
<div class="imagepad">
<p align="center"><a href="#"><img src="boat_test.jpg" alt=" " width="130" height="87" border="0"/></a></p>
<p align="center" class="caption style19">Example Nautic</p>
<p align="center" class="caption style19"> </p>
<p align="center" class="caption">Revestimiento</p>
<p class="caption" align="center">de barcos</p>
</div>
<div class="imagepad">
<p align="center"><a href="brick.htm"><img src="house_sm.jpg" alt=" " width="130" height="86" border="0"/></a></p>
<p align="center" class="caption style19">Nanotek Casa</p>
<p align="center" class="caption style19"> </p>
<p align="center" class="caption">Revestimiento</p>
<p class="caption" align="center">de casas </p>
</div>
<div class="imagepad">
<p align="center"><a href="screen.htm"><img src="car_sm.jpg" alt=" " width="130" height="86" border="0"/></a></p>
<p align="center" class="caption style19">Example Coche</p>
<p align="center" class="caption style19">y Moto </p>
<p align="center" class="caption style19"> </p>
<p align="center" class="caption">Revestimiento</p>
<p class="caption" align="center">de coche y moto </p>
</div>
I know its a bit bad putting a big lump of code on here, but i'm at my wits end here, so any help would be appreciated.
Rich
[edited by: SuzyUK at 6:50 am (utc) on Sep. 20, 2006]
[edit reason] examplified code and removed URL perTOS [/edit]
.centrecontent {
...
height:100%;
...
}
html>body .centrecontent{height:auto;}In .topcontent, you are setting the height to 35% (for both IE and FF) - this is 35% of the height of the parent container, which is 100% in IE, but 'auto' (height calculated by its contents) in FF. So, 35% of 100% = 35% in IE, but 35% of 'auto' = 'whatever' in FF. (?)
