or Connect
AppleInsider › Forums › General › Genius Bar › Help making HTML render correctly in different browsers
New Posts  All Forums:Forum Nav:

Help making HTML render correctly in different browsers

post #1 of 16
Thread Starter 
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>
post #2 of 16
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>
Anyone for pie?
Reply
Anyone for pie?
Reply
post #3 of 16
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 ey3d34@hotmail.com.
post #4 of 16
Thread Starter 
[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 ey3d34@hotmail.com.</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?
post #5 of 16
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>
post #6 of 16
[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>

 

“The nitrogen in our DNA, the calcium in our teeth, the iron in our blood, the carbon in our apple pies were made in the interiors of collapsing stars. We are made of starstuff.” 
-Sagan
Reply

 

“The nitrogen in our DNA, the calcium in our teeth, the iron in our blood, the carbon in our apple pies were made in the interiors of collapsing stars. We are made of starstuff.” 
-Sagan
Reply
post #7 of 16
[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.
post #8 of 16
[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.
Anyone for pie?
Reply
Anyone for pie?
Reply
post #9 of 16
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.
post #10 of 16
[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.
a flirt with mediocrity comes with heavy penalty
Reply
a flirt with mediocrity comes with heavy penalty
Reply
post #11 of 16
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
Robots are everywhere, and they eat old people's medicine for fuel.
Reply
Robots are everywhere, and they eat old people's medicine for fuel.
Reply
post #12 of 16
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.
Anyone for pie?
Reply
Anyone for pie?
Reply
post #13 of 16
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:

Robots are everywhere, and they eat old people's medicine for fuel.
Reply
Robots are everywhere, and they eat old people's medicine for fuel.
Reply
post #14 of 16
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....)
post #15 of 16
[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.
post #16 of 16
[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.
Anyone for pie?
Reply
Anyone for pie?
Reply
New Posts  All Forums:Forum Nav:
  Return Home
  Back to Forum: Genius Bar
AppleInsider › Forums › General › Genius Bar › Help making HTML render correctly in different browsers