Help making HTML render correctly in different browsers

Posted:
in Genius Bar edited January 2014
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&lt;/table&gt;</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

  • Reply 1 of 15
    Try this:



    [code]&lt;table width="500" height="85" border="0" cellpadding="0" cellspacing="0"&gt;

    \t&lt;tr&gt;\t\t\t\t\t\t\t

    \t\t&lt;td height="55" colspan="4"&gt;&lt;img src="images/left.jpg" width="223" height="55" alt=""&gt;&lt;/td&gt;\t

    \t\t&lt;td width="277" height="85" rowspan="3"&gt;&lt;img src="images/right.jpg" width="277" height="85" alt=""&gt;&lt;/td&gt;

    \t&lt;/tr&gt;

    \t&lt;tr&gt;

    \t\t&lt;td width="60" height="24"&gt;&lt;a href="Default.HTM"&gt;&lt;img src="images/home_selected.jpg" width="60" height="24" border="0" alt=""&gt;&lt;/a&gt;&lt;/td&gt;

    \t\t&lt;td width="60" height="24"&gt;&lt;a href="pics.html"&gt;&lt;img src="images/pics.jpg" width="62" height="24" border="0" alt=""&gt;&lt;/a&gt;&lt;/td&gt;

    \t\t&lt;td width="48" height="24"&gt;&lt;a href="roster.html"&gt;&lt;img src="images/team.jpg" width="48" height="24" border="0" alt=""&gt;&lt;/a&gt;&lt;/td&gt;

    \t\t&lt;td width="53" height="24"&gt;&lt;a href="video.html"&gt;&lt;img src="images/video.jpg" width="53" height="24" border="0" alt=""&gt;&lt;/a&gt;&lt;/td&gt;

    \t&lt;/tr&gt;

    \t&lt;tr&gt;

    \t\t&lt;td height="6" colspan="4"&gt;&lt;img src="images/bottom.jpg" width="223" height="6" border="0" alt=""&gt;&lt;/td&gt;

    \t&lt;/tr&gt;

    &lt;/table&gt;</pre><hr></blockquote>



    Your code is full of spaces (not tabs) which are interpreted as &amp;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>
  • Reply 2 of 15
    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].
  • Reply 3 of 15
    cosmocosmo Posts: 662member
    [quote]Originally posted by Eyedea:

    <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 &nbsp 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?
  • Reply 4 of 15
    This may not be the best solution, but you could just make all that stuff into a single image and then use a map for the links.



    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>
  • Reply 5 of 15
    brbr Posts: 8,395member
    [quote]Originally posted by Cosmo:

    <strong>





    Hmm i didn't even realize the &nbsp 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>
  • Reply 6 of 15
    [quote]Originally posted by BR:

    <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.
  • Reply 7 of 15
    [quote]Originally posted by Eyedea:

    <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.
  • Reply 8 of 15
    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 &lt;br&gt; 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. 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.
  • Reply 9 of 15
    [quote]Originally posted by M3D Jack:

    <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 &lt;br&gt; 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.
  • Reply 10 of 15
    This is a graphic representation of your tables (Dreamweaver). The dotted lines show the sizes, the grey areas show where the images are lining up.





    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
  • Reply 11 of 15
    If you simply enter height and widths into the table cells it still won't fix the problem. Trust me.



    You have non breaking spaces in your code.
  • Reply 12 of 15
    Yea, I see Pie Man set a height like I suggested, but he's right. That alone didn't do it. I guess it really was the non-breaking spaces. You can see the difference here:



  • Reply 13 of 15
    torifiletorifile Posts: 4,024member
    This is a problem that's plagued me as well. I'm glad I'm not the only one. (But, it looks right in Mac browsers, so that's all that matters, right? Just kidding....)
  • Reply 14 of 15
    [quote]Originally posted by The Pie Man:

    <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.
  • Reply 15 of 15
    [quote]Originally posted by Eyedea:

    <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.
Sign In or Register to comment.