Forum Moderators: not2easy
I tried to apply it on a test page I'm working on (see code below - you can find *** where I deleted some unnecessary code to make your reading easier). Everything looks fine if viewed with:
* Safari 3 (Mac)
* Firefox 2 Mac
However, when viewed with Firefox 2 for Windows XP, there is about 20px additional space at the bottom, that causes the bottom text to disappear below the page and the dreadful appearence of the right scrollbar.
Even worse, when viewed on Internet Explorer 6 for Windows, there is a huge blue gap at the bottom of the page, and the bottom text is aligned at the top of its cell, while the right background image continues (that's OK) to the bottom of the page.
I know my HTML code and CSS are rough, but I would really, really, really appreciate if someone can have a look at them, because I strongly need some good advice on how to get rid of the viewing problems with Windows browsers.
Any help would be greatly appreciated!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento senza titolo</title>
<style type="text/css">
<!--
body {
background-color: #0069b5;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(images/sfondo.gif);
}
html, body{height:100%}
table.center {margin-left:auto; margin-right:auto;}
.container {
position:relative;
width: 602px;
min-height: 100%;
}
***
.titolo_blu {
color: #0068b4;
font-weight: bold;
font-size: 15px;
}
.titolo_bianco {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
}
.copyright {
font-family: "Trebuchet MS", Tahoma, Helvetica, sans-serif;
color: #CBCBCB;
font-size: 10px;
text-align: right;
padding-right:12px;
padding-bottom:5px;
}
#satellite_terminal {
position:absolute;
width:114px;
height:118px;
z-index:1;
top: -32px;
left: 11px;
}
#flyaway {
position:absolute;
width:116px;
height:118px;
z-index:1;
top: -32px;
left: 127px;
}
#wi_sys {
position:absolute;
width:117px;
height:118px;
z-index:1;
top: -32px;
left: 244px;
}
#smart_nw {
position:absolute;
width:117px;
height:118px;
z-index:1;
top: -32px;
left: 361px;
}
#sys_int {
position:absolute;
width:117px;
height:118px;
z-index:1;
top: -32px;
left: 478px;
}
#main_hp {
padding-top:60px;
}
-->
</style>
***
</head><body***>
<table width="1052" height="100%" border="0" cellpadding="0" cellspacing="0" class="center">
<tr>
<td width="113" valign="top"><img src="images/bordo_hp_sx.jpg" alt=" " width="113" height="568" /></td>
<td width="826" valign="top"><table width="826" height="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="224" bgcolor="#FFFFFF"><img src="images/logo_sup_sx.jpg" alt="logo" width="224" height="237" /></td>
<td colspan="2" bgcolor="#FFFFFF"><img src="images/onda_top.jpg" alt="wave" width="602" height="236" /></td>
</tr>
<tr valign="top" height="30">
<td bgcolor="#e2e7eb"><a href="arab/index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Arabo','','images/arabo_on.gif',1)"><img src="images/arabo_off.gif" alt="Website in Arab" name="Arabo" width="75" height="30" border="0" id="Arabo" /></a>***</td>
<td colspan="2" bgcolor="#FFFFFF">
<div class="container">
<div id="satellite_terminal"><a href="products/pss.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Portable Satellite Systems','','images/pss_on.gif',1)"><img src="images/pss_off.gif" alt="Portable Satellite Systems" name="Portable Satellite Systems" width="114" height="118" border="0" id="Portable Satellite Systems" /></a></div>
***
</div></td>
</tr>
<tr valign="top" height="18">
<td bgcolor="#e2e7eb"> </td>
<td colspan="2" bgcolor="#FFFFFF"></td>
</tr>
<tr valign="top" height="270">
<td bgcolor="#e2e7eb"><p><img src="images/home_sw.gif" alt="Home" width="224" height="29" /><br /><img src="images/divisore_blu.gif" alt=" " width="224" height="1" /><br />
<a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About Us','','images/about_us_on.gif',1)"><img src="images/about_us_off.gif" alt="About Us" name="About Us" width="224" height="29" border="0" id="About Us" /></a><br /><img src="images/divisore_blu.gif" alt=" " width="224" height="1" /><br />***</p></td>
<td width="356" bgcolor="#FFFFFF">
<div class="round_orange">
<div class="roundedcornr_box_996248">
<div class="roundedcornr_top_996248"><div></div></div>
<div class="roundedcornr_content_996248">
<p class="content_round"><img src="images/spotlight.gif" alt="Spotlight" width="77" height="35" /><br />
<span class="Stile3"><img src="images/el_hp.jpg" alt="EasyLINK" width="150" height="260" align="right" /></span><span class="titolo_blu">XYZ</span><br />
ABC.</p>
<p class="content_round"><span class="Stile3"><img src="images/efs_hp.jpg" alt="EasyFLYSAT" width="175" height="169" align="right" /></span><span class="titolo_blu">ZXY - SP</span><br />
ABC.</p>
</div>
<div class="roundedcornr_bottom_996248"><div></div>
</div></div></div></td>
<td width="246" bgcolor="#FFFFFF">
<div class="round_grey">
<div class="roundedcornr_box_715969">
<div class="roundedcornr_top_715969"><div></div></div>
<div class="roundedcornr_content_715969">
<p class="content_news"><img src="images/news.gif" alt="News" width="77" height="35" /><br />
<img src="images/XYZ2008logo.jpg" alt="XYZ" width="100" height="77" align="right" />
ABC.</p>
</div>
<div class="roundedcornr_bottom_715969"><div></div></div>
</div></div><br />
<div class="round_bottom">
<div class="roundedcornr_box_177412">
<div class="roundedcornr_top_177412"><div></div></div>
<div class="roundedcornr_content_177412">
<p class="content_orange"><span class="titolo_bianco">Lorem ipsum<br />
</span><br />
ABC.</p>
</div>
<div class="roundedcornr_bottom_177412"><div></div></div>
</div></div>
</p> </td>
</tr>
<tr height="100%">
<td bgcolor="#e2e7eb"> </td>
<td colspan="2" valign="bottom" bgcolor="#FFFFFF" class="copyright">© 2008 XYZ • Website Design & Hosting by XYZ</td>
</tr>
</table> </td>
<td width="113" valign="top" background="images/bordo_sf_dx.gif"><img src="images/bordo_hp_dx.jpg" alt=" " width="113" height="237" /></td>
</tr>
</table>
</body>
</html>
[edited by: SuzyUK at 10:29 am (utc) on Feb. 26, 2008]
[edit reason] No URI's per Charter, thanks [/edit]
way too much code! - I think you've got a bit more problems than just getting a 100% height suggestion to work ;)
The "trick".. all that's needed is the html and body declarations set to be to 100% - re: the tutorial which then suggested a container div set to min-height: 100% - though that container is not even in your HTML so it's not min-heighting anything for you, instead of a container you have a parent table set to 100% height which is your "container" and should be OK as tables stretch anyway,
however from that point on you have a table height inheritance hurdle to get over - check out the HTML forum for threads about rows heights and this recent thread [webmasterworld.com] about x-browser table heights .. I suggest you strip your master table and it's nested one back to just cells with plain content, put some background colors on the cells so you can which cells are where..
browsers render tables differently and the specs allow a lot of leeway, to avoid conflicting instructions which could cause crashes - in your table this is occuring when you tell your nested table to be 100% of its parent cell <td>. The browsers do not know the height of that parent cell until the rest of the parent table has rendered, it can't render until the content in the nested table renders - so that little instruction is creating a loop calculation!
It's very likely some of the browsers will just except and in order to not crash will not honour the height - rule of thumb if you can't work out the maths, then mostly neither will browsers.. so for example where you have four rows in your nested table
tr height = 30
tr height = 18
tr height = 270
tr height = 100%
that would even if the browsers believed you.. add to 100% + 318px, it's not going to = 100%
it's a moot point though, it's because of the fact that conditions like this cannot be met even if the maths is right that browsers have chosen to handle tables the way they have.
sorry, not an answer more a maths lesson, but it's maths that's important when CSS comes into the equation, so I think a rewrite of your code and/or not worrying about 100% height yet is possibly something to look at?
-Suzy
[edited by: SuzyUK at 2:12 pm (utc) on Feb. 26, 2008]
