Forum Moderators: open
I am new to this forum, so greetings to all.
I have a problem with IE (who doesn't?). As the subject says, IE messes up my table.
Here is the HTML: (I have replaced the cell content with CAPSED note)
<table width="990" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" width="810" valign="top" class="td_banner">BANNER IMAGE
</td>
<td width="180" valign="top" class="td_banner_right">RIGHT FILLING IMAGE
</td>
</tr>
<tr>
<td rowspan="6" class="td_right_info">PHP RIGHT INFO
</td>
</tr>
<tr>
<td class="td_navi">PHP RENDERING NAVIGATION</td>
</tr>
<tr>
<!-- Content -->
<td class="td_content">
<div class="div_content">
CONTENT
</div>
</td>
<!-- content -->
</tr>
<tr>
<td class="td_bottom_info">CONTACT INFO</td>
</tr>
</table>
<!-- END FRAME -->
So this is a template that is loaded on every page. The problem with IE is that the browser does not start the cell containing PHP RIGHT INFO below the cell containing RIGHT FILLING IMAGE but makes this filling cell as high as the BANNER IMAGE cell.
This problem does not occur with Opera 9.21 or Firefox 2.0.0.6., only with IE 6.
If anyone got what I was trying to say, I would really appreciate the help.
+-------------------------------------------+
¦ td_banner `````````` ¦ td_banner_right `` ¦
¦......................+--------------------+
¦ `````````````````````¦ td_right_info ```` ¦
+----------------------+....................¦
¦ td_navi ```````````` ¦ `````````````````` ¦
+----------------------+....................¦
¦ td_content ````````` ¦ `````````````````` ¦
+----------------------+....................¦
¦ td_bottom_info ````` ¦ `````````````````` ¦
+----------------------+....................¦
¦ ,,,,,,,,,,,,,,,,,,,, ¦ `````````````````` ¦
+----------------------+....................¦
¦ ,,,,,,,,,,,,,,,,,,,, ¦ `````````````````` ¦
+----------------------+--------------------+
Note, your right column is 2 rows longer than your left.
When I view this in IE and Firefox, it looks more like this:
+-------------------------------------------+
¦ td_banner `````````` ¦ td_banner_right `` ¦
¦......................+--------------------+
¦ `````````````````````¦ td_right_info ```` ¦
+----------------------+....................¦
¦ td_navi ```````````` ¦ `````````````````` ¦
+----------------------+....................¦
¦ td_content ````````` ¦ `````````````````` ¦
+----------------------+....................¦
¦ td_bottom_info ````` ¦ `````````````````` ¦
+----------------------+--------------------+
But that's only because the content in the td_right_info isn't long enough to push the cell down.
Here's the code I tested with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
.td_banner { background-color: #eee; }
.td_banner_right { background-color: #ddf; }
.td_right_info { background-color: #ccd; }
.td_navi { background-color: #fdd; }
.td_content { background-color: #dcc; }
.td_bottom_info { background-color: #cbb; }
</style>
</head>
<body>
<table width="990" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2" width="810" valign="top" class="td_banner">BANNER IMAGE</td>
<td width="180" valign="top" class="td_banner_right">RIGHT FILLING IMAGE</td>
</tr>
<tr>
<td rowspan="6" class="td_right_info">PHP RIGHT INFO</td>
</tr>
<tr>
<td class="td_navi">PHP RENDERING NAVIGATION</td>
</tr>
<tr>
<td class="td_content">
<div class="div_content">CONTENT</div>
</td>
</tr>
<tr>
<td class="td_bottom_info">CONTACT INFO</td>
</tr>
</table>
</body>
</html>
fotiman, I was just having a look at this too, agree that the rowspans are not quite right - at a quick glance I think it should be 5 rows with the top banner image spanning 2 rows then the bottom right spanning 4 rows..
however if you place an image/div - @ 100px high in the 'banner image' cell you will see what I think deMorte is trying to explain.. I can see it in IE7 as well as IE6
IE solutions for row/cell spans are usually to nest a table however I'll see if there's anything else I can dig up/remember ;)
short answer =
use CSS to make filler image display: block; and then put the PHP Info in a div rather than a separate cell, put it in the same cell as the filler image and have the whole right side rowspan the 4 left cells
the table solution is to use nested tables if you'd prefer that route
short technical explanation.. table-layout is very lax in it's rules and the browser manufacturers are allowed to interpret them to suit themselves - as far as I can see IE takes two passes which is not enough to incorporate cell height (height is a deprecated attribute anyway) other browsers take 3 passes the third being the one that allows the (still deprecated) height attribute to calculate - I personally think that MS will win the day as far as table attributes are concerned so my attitude is not who's right or wrong but rather get used to both just in case!
basically tables do not work perfectly any more either ;)
by way of visual explanation.. my code, using fotimans code above would be something like..:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
html, body {margin: 0; padding: 0;}
table {border-collapse: collapse;}
td {border: 1px solid #f00;}
.td_banner { background-color: #eee; }
.td_banner_right { background-color: #ddf; }
.phpinfo { background-color: #dad; border: 1px solid #f00;}
.td_navi { background-color: #fdd; }
.td_content { background-color: #dcc; }
.td_bottom_info { background-color: #cbb; }.b-img {width: 200px; height: 100px; background: #0f0;}
.rf-img {height: 50px; background: #0f0; /* display: block; if this is an actual image */}</style>
</head>
<body>
<table width="990" cellpadding="0" cellspacing="0">
<tr>
<td width="810" valign="top" class="td_banner"><div class="b-img">faux image holder</div></td>
<td width="180" rowspan="4" valign="top" class="td_banner_right">
<div class="rf-img">faux image holder</div>
<div class="phpinfo">PHP RIGHT INFO</div>
</td>
</tr>
<tr><td class="td_navi">PHP RENDERING NAVIGATION</td></tr>
<tr><td class="td_content"><div class="div_content">CONTENT</div></td></tr>
<tr><td class="td_bottom_info">CONTACT INFO</td></tr>
</table>
</body>
</html>
[edited by: SuzyUK at 7:27 pm (utc) on Aug. 7, 2007]
In my first post I forgot to mention that a part of the problem is that I want the banner image and the filling image to appear as one image, shaped like:
_________________
¦ ______¦
¦__________¦
And I want the right_info column to have right, left and bottom borders. But the right filling image should not have left border. So the actual visible borders should be as such:
__________________
¦banner _____¦
¦____________¦ ¦
¦____________¦rig ¦
¦ ¦ht ¦
¦ content ¦info¦
¦____________¦ ¦
¦____________¦____¦
The small colums are navi (top) and bottom_info (bottom).
This is one reason I can't put all the elements on the right on the same cell and define their heights with css or create a nested table (border definitions go wrong).
I am thinking of setting the right filling images background color equal as the one on right info. It displays as I want on FF and Opera. And on IE the only problem is that the right info starts a bit lower than on the other browsers. And this is caused by a top padding on right_info cell. This can be fix this by creating a IE specific CSS-file, right?
If someone comes up with a better solution, I'm open to suggestions.
_____________________
¦............._______¦
¦_____________¦......¦
¦_____________¦......¦
¦.............¦......¦
¦.............¦......¦
¦_____________¦......¦
¦_____________¦______¦
I hope this prints out right. The contents are the same as previous post.
[pre]......[/pre]how tall are your banner and right images?
[edited by: SuzyUK at 8:19 am (utc) on Aug. 8, 2007]
_____________________
¦..banner......______¦
¦______________¦.....¦
¦______________¦right¦
¦...content....¦info.¦
¦..............¦.....¦
¦______________¦.....¦
¦______________¦_____¦
Let's hope it displays correctly now.
Banner image is 810x100 px and right filling image is 180x47 px. As I previously mentioned, I figured a way around this problem but I am yet to implement the IE specific CSS.
Another problem that I have is that IE ignores CSS definition min-height on a cell. I think this is because of the height-issue that SuzyUK mentioned earlier. Min-height works fine on FF&Opera.
I think I should also mention the problem I have with navi and bottom cells. I want them to be of certain height but IE ignores CSS height definitions in both TD and DIV.
As you can see, this page has a long way to go before it is IE compliant.
sorry I missed further question on this one..
there shouldn't be a problem setting heights on the rows, but perhaps that's it, have you tried using height instead of min-height - Table cells will stretch. btw.. that's the way IE has always treated height, which was only correct for table cells anyway.
and just to follow, though you say you have a solutuion
..my suggestion for the whole solution (no IE specific CSS required) would've been to split the banner image differently - rather than a vertical (left/right) split I would be tempted to rejoin it and then splice horizontally (top/bottom), then you can have the whole top portion col spanning 2 columns and the bottom portion goes in it's own row with the second cell being the top of the right info, you can then still use borders which I think was your other concern..
anyway here's summary code showing this theory (image splices substituted with faux divs) and row heights at works too.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>Rowpsan - Height</title>
<style type="text/css">
html, body {padding: 0; margin: 0;}
table {
border: 1px solid #000;
/* border-collapse: collapse;*/
/*
border-collapse would be the logical thing to use
but you can't use because of the rowspan,
if you do you get a gap between the image slices
*/
}
td {vertical-align: top; padding: 0; border: 0 solid #000;}
.banner-top {width: 990px; height: 47px;}
.banner-top div {width: 990px; height: 47px; background: #0f0;}
.banner-bottom {width: 810px; height: 53px; border-width: 0 0 1px 0;}
.banner-bottom div {width: 810px; height: 53px; background: #0e0;}
.right-info { width: 180px; border-width: 1px 0 0 1px;}
.content { border-width: 1px 0;}
.top-nav, .bottom-info {height: 80px; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<table width="990" cellspacing="0" summary="#">
<tr>
<td class="banner-top" colspan="2"><div>faux image holder PT1</div></td>
</tr>
<tr>
<td class="banner-bottom"><div>faux image holder PT2</div></td>
<td class="right-info" rowspan="4" valign="top">RIGHT INFO</td>
</tr>
<tr><td class="top-nav">TOP NAVIGATION</td> </tr>
<tr><td class="content"><div>CONTENT<br> more content</div></td></tr>
<tr><td class="bottom-info">CONTACT INFO</td></tr>
</table>
</body>
</html>
