Why does Windows Hate my Top-Level Page?

Page renders differently, depending on platform

[Constantin]

I'm a bit baffled because my intro page renders just fine on various Mac browsers, while rendering funny on Windows machines. All other pages of the site work fine on both the Mac and the PC (they have simpler formatting).

I'm using CSS and one long table for the intro page. The same CSS file is used for the intro page as for all other pages. Thus, I don't think it's the CSS (at least not by itself). And someday, this table will go to a DIV format...

My best guess is that the adjustable width JPGs (i.e. width="100%" within a table cell) are causing the following weird behavior: On a Mac, the graphics show up fine. On a windows machine, the graphics spill into adjacent table columns. Has anyone else encountered the same problem?

What is my best bet besides turning off the adjustable width graphics? See <snip> for the page.

[edited by: korkus2000 at 5:20 pm (utc) on Sep. 19, 2003]
[edit reason] No site/code reviews please [/edit]

[keyplyr]

I would start here: [validator.w3.org...]

<added> And Welcome to Webmasterworld [webmasterworld.com] Constantin </added>

[Constantin]

Well, I already tried the validator, and as usual, it comes up as valid 4.01 HTML Transitional - no errors.

Do you suppose that if I re-wrote the page to be HTML strict that the windows browsers would react differently?

[BergtheRed]

Constantin: the variable width ( and height ) may be it. if it suits the table layout, specify both the height and width of the cell based on the image size. that may be what's throwing IE off. you "could" even specify the size of height and width minus 1 ( fixed a netscape 4.x quirk i ran across ). ie:

<td align="center" height="59" width="467">
<img src="banner.jpg" height="60" width=468">
</td>

[mClarke]

Along these lines, another option is to set the td width to 1%. This should force the cell to conform to the edges if whatever is inside. Then set all your other td widths in the row so the total is 100%, set the cell where you want the most flexibility to the largest percent. (eg. if you have 3 cells you could split it 1%,1%,98%)

If your layout allows, you could install clear spacer gifs inside at the bottom of the cells (or maybe in their own spacer row) and set the hspace to stretch the table cell as wide as you need.

Not sure if this will work for your situation, but it has worked for similar spacing issues for me in the past.

[eduardo]

You could save a yourself lot of problems by using xhtml transitional. Diferent browsers render xhtml almost the same.

Of course, this has a lot of implications, but if its a possibility, take it.