Help making HTML render correctly in different browsers
I'm having some trouble with html rendering differntly in differnet browsers. This is the code i am using:
[code]
<table width="500" border="0" cellpadding="0" cellspacing="0">
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan="4">
\t\t\t\t\t\t\t<img src="images/left.jpg" width="223" height="55" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td rowspan="3">
\t\t\t\t\t\t\t<img src="images/right.jpg" width="277" height="85" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="Default.HTM"> <img src="images/home_selected.jpg" width="60" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="pics.html"> <img src="images/pics.jpg" width="62" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="roster.html"> <img src="images/team.jpg" width="48" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="video.html"> <img src="images/video.jpg" width="53" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan="4">
\t\t\t\t\t\t\t<img src="images/bottom.jpg" width="223" height="6" border="0" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t</table></pre><hr></blockquote>
This is the result in OmniWeb and IE 5.2.1 (OSX):
This is how the image should look.
Unfortunately when rendered with mozilla, Internet exporer for windows and any other mozilla based browser the image appares like this:
Cany anyone tell me why my tables are behaving like this and how to fix it?
The tables are in use at <a href="http://www.cheermarkham.com" target="_blank">www.cheermarkham.com</a> .
[ 09-12-2002: Message edited by: Cosmo ]</p>
[code]
<table width="500" border="0" cellpadding="0" cellspacing="0">
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan="4">
\t\t\t\t\t\t\t<img src="images/left.jpg" width="223" height="55" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td rowspan="3">
\t\t\t\t\t\t\t<img src="images/right.jpg" width="277" height="85" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="Default.HTM"> <img src="images/home_selected.jpg" width="60" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="pics.html"> <img src="images/pics.jpg" width="62" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="roster.html"> <img src="images/team.jpg" width="48" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t\t<td>
\t\t\t\t\t\t\t<a href="video.html"> <img src="images/video.jpg" width="53" height="24" border="0" alt=""></a>
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t\t<tr>
\t\t\t\t\t\t<td colspan="4">
\t\t\t\t\t\t\t<img src="images/bottom.jpg" width="223" height="6" border="0" alt="">
\t\t\t\t\t\t</td>
\t\t\t\t\t</tr>
\t\t\t\t</table></pre><hr></blockquote>
This is the result in OmniWeb and IE 5.2.1 (OSX):
This is how the image should look.
Unfortunately when rendered with mozilla, Internet exporer for windows and any other mozilla based browser the image appares like this:
Cany anyone tell me why my tables are behaving like this and how to fix it?
The tables are in use at <a href="http://www.cheermarkham.com" target="_blank">www.cheermarkham.com</a> .
[ 09-12-2002: Message edited by: Cosmo ]</p>
Comments
[code]<table width="500" height="85" border="0" cellpadding="0" cellspacing="0">
\t<tr>\t\t\t\t\t\t\t
\t\t<td height="55" colspan="4"><img src="images/left.jpg" width="223" height="55" alt=""></td>\t
\t\t<td width="277" height="85" rowspan="3"><img src="images/right.jpg" width="277" height="85" alt=""></td>
\t</tr>
\t<tr>
\t\t<td width="60" height="24"><a href="Default.HTM"><img src="images/home_selected.jpg" width="60" height="24" border="0" alt=""></a></td>
\t\t<td width="60" height="24"><a href="pics.html"><img src="images/pics.jpg" width="62" height="24" border="0" alt=""></a></td>
\t\t<td width="48" height="24"><a href="roster.html"><img src="images/team.jpg" width="48" height="24" border="0" alt=""></a></td>
\t\t<td width="53" height="24"><a href="video.html"><img src="images/video.jpg" width="53" height="24" border="0" alt=""></a></td>
\t</tr>
\t<tr>
\t\t<td height="6" colspan="4"><img src="images/bottom.jpg" width="223" height="6" border="0" alt=""></td>
\t</tr>
</table></pre><hr></blockquote>
Your code is full of spaces (not tabs) which are interpreted as &nbsp; in some browsers and not in others...
[ 09-12-2002: Message edited by: The Pie Man ]
[ 09-12-2002: Message edited by: The Pie Man ]</p>
Avoid COLSPAN and ROWSPAN. Browsers do crazy shit when they see that.
Code it without those and then see how it goes.
If there is still a prob email me at [email protected].
<strong>Without even trying the code I'll tell you this.
Avoid COLSPAN and ROWSPAN. Browsers do crazy shit when they see that.
Code it without those and then see how it goes.
If there is still a prob email me at [email protected].</strong><hr></blockquote>
Hmm i didn't even realize the   was there...golive must have put it in (i've since switched to bbedit. How can i code this withough colspan and rowspan? some of the images need to span more than one row and/or colum?
And, FWIW, I've never had problems with colspan or rowspan attributes before. If you really do want to get rid of them, though, you would probably have to cut up the left, right, and bottom images to fit into more cells.
[ 09-12-2002: Message edited by: Brad ]</p>
<strong>
Hmm i didn't even realize the   was there...golive must have put it in (i've since switched to bbedit. How can i code this withough colspan and rowspan? some of the images need to span more than one row and/or colum?</strong><hr></blockquote>
It renders correctly in Opera 6 for winblows but not in Netscape 6.2. It's based on mozilla so I don't see what is f**king it up in netscape.
[ 09-12-2002: Message edited by: BR ]</p>
<strong>It renders correctly in Opera 6 for winblows but not in Netscape 6.2. It's based on mozilla</strong><hr></blockquote>
Um, no, unless they have changed something recently, Opera is not based on Mozilla. It uses its own custom engine.
<strong>Without even trying the code I'll tell you this.
Avoid COLSPAN and ROWSPAN. Browsers do crazy shit when they see that.</strong><hr></blockquote>
I gotta say thats insane. Colspan and Rowspan are the most basic of all HTML - they are rendered completely similarly in any browser all the way back through version 3 browsers. These just tell a browser that a cell spans rows or columns. The colspan and rowspan problems come into play when you aren't constructing they layout of your tables correctly - if you are spanning cells in incorrect ways.
There is absolutely no rendering differences in Colspan and Rowspan across browsers.
I've run into an issue with Netscape 7b and the Mozilla 1.0 release where I cannot get images to sit on the very bottom of a table cell when doing image stacking in tables. However, I found that if I forgot to close a table row, it would sometimes work. If I tried rendering the same code in question inside of Netscape 6.2.1, it rendered fine. My code was perfect, I showed it to a few engineers,, and am currently talking to someone at Mozilla.org because this appears to be a bug.
Annnnyhow, instead of putting each image in a separate table cell, maybe try putting them all within one table cell, one next to the other.
*shrugs*
Again, I just sort of skimmed over your code, I just spent six hours in the darkroom, I'm a little tired If none of this made sense, I'll take a closer look at it later.
<strong>now, I didn't look *too* closely, but there used to be/still is an old rendering bug where if you don't put a <br> after an image, it won't snap to the bottom of the table cell. And it makes sense, sort of, because you need to tell the renderer that you're done with that "line".
I've run into an issue with Netscape 7b and the Mozilla 1.0 release where I cannot get images to sit on the very bottom of a table cell when doing image stacking in tables.</strong><hr></blockquote>
You both might want to check out this: <a href="http://devedge.netscape.com/viewsource/2002/img-table/" target="_blank">images, tables, and mysterious gaps</a>
I don't have time to look at your code right now but try turning on table borders to see exactly what is going on in the layout, this should help you pinpoint the cause.
As you can see, the image in Column 'B' is sort of floating there.
A quick way to fix this is to set a height attribute for your table, the same way that you set the width at 500. Make sure the height is same height as the image you originally sliced.
GL
You have non breaking spaces in your code.
<strong>
I gotta say thats insane. Colspan and Rowspan are the most basic of all HTML - they are rendered completely similarly in any browser all the way back through version 3 browsers. These just tell a browser that a cell spans rows or columns. The colspan and rowspan problems come into play when you aren't constructing they layout of your tables correctly - if you are spanning cells in incorrect ways.
There is absolutely no rendering differences in Colspan and Rowspan across browsers.</strong><hr></blockquote>
I have to say your opinion doesn't seem to be all that great considering your own site doesn't render properly in older browsers on the PC and Mac side.
---------------------------
Either way, looks like you found a solution.
If you want any help feel free to drop me a line though.
<strong>I have to say your opinion doesn't seem to be all that great considering your own site doesn't render properly in older browsers on the PC and Mac side.</strong><hr></blockquote>
Don't take it personally, it's just a fact that rowspan and colspan are not rendered any differently in browsers - this has been true since day 1. I could have said it differently instead of "thats insane" and I actually almost went back and changed it when I saw it posted... Didn't though - that was my initial reaction.
The only thing that rowspan and colspan do is to tell a browser that a certain cell spans a certain number of rows or columns. There are certain inherent limitations in the way cells can be spanned and that is where problems arise.
If my site isn't rendering properly I would guess it is because flash isn't installed. If that isn't it, who knows, maybe my code sucks. I haven't really looked at my personal sites in a long time - no one pays me to do them. But I guarantee that any rendering problems are not stemming from rowspans or colspans.