PDA

Click to See Complete Forum and Search --> : browser optimization: IE showing wrong table cell heights

CyReVolt
January 30th, 2006, 06:50 PM
Hello there,

after having rewritten my XHTML template to validate at W3C, evil IE wouldn't show the page as I want. Have a look: http://dmaslowski.dyndns.org/project-orange

However, IE 6 does not seem to know the size of a pixel. Although I have defined the table cells' heights, e.g. the orange ones as 20px, IE enlarges them, I'd say scaled by a multiplier of 5 or something. Why?
IE 5 does not center my table, but shows it with correct heights and moves the text in the last cell to the right - why that? -.- And why always IE? =)

Thanks for your help.
PeejAvery
January 30th, 2006, 10:16 PM
Could you please post the code with the CSS also?
CyReVolt
January 31st, 2006, 01:16 PM
Sorry, I thought you might have found the CSS through the source code.

Here you are, this is the main template:

style.tmpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>

<title>|title|</title>

<link rel="stylesheet" type="text/css" href="src/0/style.css" />

</head>

<body>

<table class="gtable" cellspacing="0" cellpadding="0" border="0">

<tr><td class="top">
<!-- top -->
</td></tr>

<tr><td class="menu">
|menu|
</td></tr>

<tr><td class="spacer">
<!-- spacer -->
</td></tr>

<tr><td class="menu">
|submenu|
</td></tr>

<tr><td class="content">
|content|
</td></tr>

<tr><td class="footer">
<div style="float: right;">
<a href="http://********firefox.com/">
<img style="border: 0; width: 80px; height: 15px;" src="src/0/firefox.png" alt="Firefox webbrowser (recommended)!" />
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img style="border: 0; width: 80px; height: 15px;" src="src/0/w3c-xhtml10.png" alt="Valid XHTML 1.0 Strict" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check/referer/">
<img style="border: 0; width: 80px; height: 15px;" src="src/0/w3c-css.png" alt="Valid CSS" />
</a>
</div>
|foot|
</td></tr>

</table>

</body>

</html>


These two files used to create the menu might be unnecessary, but I just add them to make sure nothing went wrong :) :

menu.tmpl

<table class="mtable" cellspacing="1" cellpadding="0" border="0"><tr>
|menu_elt|</tr></table>


menu_elt.tmpl

<td class="melt"><a href="?tid=|tid|&amp;mid=|mid|&amp;pid=|pid||args|">|mname|</a></td>


Finally, the CSS file:


body, html { height: 100%; }
body { margin: 0px; padding: 0px; overflow: hidden; background-color: #AF6F00; color: #000000;
background-image: url("bg.jpg"); background-repeat: repeat-x; background-position: top; }

a:link { color: #FFAF00; background-color: #000000; text-decoration: underline; }
a:visited { color: #FFAF00; background-color: #000000; text-decoration: underline; }
a:hover { color: #FF8A00; background-color: #000000; text-decoration: underline; }
a:active { color: #FFAF00; background-color: #000000; text-decoration: underline; }

.gtable { width: 640px; height: 100%; background-color: #000000; color: #FFAF00; overflow: hidden;
margin: auto; border-left: solid 1pt #FFAF00; border-right: solid 1pt #FFAF00; }
.top { width: 640px; height: 50px; background-color: #000000; color: #FFAF00; overflow: hidden;
background-image: url("top.jpg"); background-repeat: no-repeat; }
.menu { width: 640px; height: 20px; background-color: #FFAF00; color: #000000; overflow: hidden; }
.spacer { width: 640px; height: 7px; background-color: #000000; color: #FFAF00; overflow: hidden; }
.content{ width: 640px; background-color: #000000; color: #FFAF00; overflow: auto; padding: 4px 20px;
font-family: Verdana, sans-serif; font-size: 10pt; font-weight: normal; vertical-align: top; }
.mtable { width: 640px; height: 20px; background-color: #FFAF00; color: #000000; overflow: hidden; }
.melt { width: 60px; height: 18px; background-color: #000000; color: #FFAF00; overflow: hidden;
font-family: Verdana, sans-serif; font-size: 8pt; font-weight: bold; text-align: center; }
.footer { width: 640px; height: 20px; background-color: #FFAF00; color: #000000; overflow: hidden;
font-family: Verdana, sans-serif; font-size: 8pt; font-weight: bold; padding: 0px 2px; }
PeejAvery
February 4th, 2006, 01:18 AM
Sorry I hadn't got back to you sooner. I lost your thread among the others. Well, when it comes to stylesheets I try not to format dimensions of tables with the CSS. It has caused me some problems in the past. Try changing the actual height and width within the TD and see what that does.
CyReVolt
February 7th, 2006, 02:45 PM
I had done so before but that didn`t validate on W3C so I had to set the dimensions via CSS. In the previous non-valid XHTML version it worked so far, but how will I get it working keeping the code valid?