Member Avatar for guitarman5000

To start off, the site in question is my band's myspace profile:

myspace.com/hopeforthedying

Anyway, everything is absolutely working perfectly in Firefox. Not a single problem that I've seen so far. The problem is (as best as I can see) Internet Explorer, for some reason, has one of my cells out of order.

As you can probably see, this is a pretty basic design as far as websites go, and if I just use the HTML for the table outside of myspace, it works fine in both IE and Firefox (independent HTML file here).

I've searched and searched again for a solution but haven't had any luck so far. It seems to be an issue for all releases of IE that I've had access to, and the display is even worse for some older versions. But, in Firefox, Firefox for Mac, and Safari there are no problems at all (at least not that I have seen).

I realize it's probably a little bit of a messy code because we're looking at something like 41 columns and a whole mess of rows and not to mention individual images in cells, so it would have been really easy to make a mistake in the coding somewhere when I was updating everything to be published.

The only other tid bit I can determine is that the cell causing the problem (well maybe not causing problem, but whatever is causing the problem affects this cell) is the one containing the image "myspaceTemplate_40.jpg"

Any help at all is appreciated!!!

Thanks in advance,
James

Oh......I opted against posting the code for the layout in here because it's really rather lengthy....if you need me to post it, I will first thing in the morning because I have to get some sleep soon!! Thanks everybody!

  • 3 Contributors
  • 5 Replies
  • 122 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by guitarman5000

Dani AI

Generated

Brief technical summary: older versions of Internet Explorer use a different, less forgiving table-layout algorithm than Gecko/WebKit. When many cells use colspan/rowspan and not enough independent constraints exist, IE can’t reliably solve the column grid and will reflow cells in unexpected places. A standards-mode DOCTYPE helps where possible, but on hosted/profile pages you often can’t change that, so the practical fixes matter more.

Practical, non-invasive fixes to try (in order of robustness):

  • Give the browser explicit column constraints instead of relying on implicit widths. The cleanest way is a <colgroup> with per-column widths and table-layout: fixed, so the engine has a deterministic grid to work from. Example:
    <table style="table-layout:fixed; width:800px;">
<colgroup>
  <col style="width:20px">
  <col style="width:40px">
  <!-- add one <col> per column -->
</colgroup>
...
</table>
  • If the host platform strips <colgroup>, then the fallback is to add width attributes/styles to non-spanning cells and heights for tall rowspan cells (the approach that ultimately fixed the original thread).
  • Avoid colspan/rowspan “collisions” where a colspan in one row overlaps an unrelated rowspan in another; map the table grid on paper or with temporary cell numbering to verify coverage.

Debugging tips: compare the HTML you submitted with the HTML actually rendered (use IE’s Developer Tools / View Source). Host platforms sometimes sanitize or truncate long absolute image URLs; if that happens use the platform’s image upload or shorter/relative paths. For a long-term fix, consider replacing image-sliced table layouts with CSS backgrounds/sprites or simple CSS-based layouts to reduce fragility.

Further reading: MDN on the colgroup element and on table-layout gives clear, current guidance for these techniques (colgroup, table-layout). Thanks to for the key diagnosis and to for isolating the problem.

Recommended Answers

All 5 Replies

Member Avatar for MidiMagic

I had the same problem. IE goofs up the rendering if there is not at least one cell with no colspans in it in each column.

Define column widths in cells without rowspan or colspan. Width doesn't always work right in a cell with a colspan in it.

Make sure a colspan in one cell does not collide with a rowspan in a different cell.

Make sure that every cell space is defined. IE does weird things if a cell in the middle is not defined, and cells around it are defined by colspan or rowspan.

Member Avatar for guitarman5000

I think I follow you, but I'm not exactly sure....

Correct me if I'm wrong, but I think you're saying that for every "td" that doesn't have a colspan value, I need to specify a width for that cell...yes/no/kinda/maybe??

and if I'm right about that, do I need to define the height of each cell as well?

I appreciate your response! This has been driving me nuts!!

Member Avatar for guitarman5000

I when through and added width parameters for every cell that didn't have a colspan or a rowspan, and it seems like that fixed my problem with things being out of order in IE, but now there's a new problem.

On a few of the image tags, everything will be good when I submit the code and all that jazz, but then it gets altered.

This:

<td rowspan="12">
         <img src="http://www.hopeforthedying.com/imageserver/myspace_full/images/myspaceTemplate_39.jpg" width="5" height="861">
</td>

Turns into this:

<td rowspan="12">
         ..server/myspace_full/images/myspaceTemplate_39.jpg" width="5" height="861">
</td>

It seems like the ".." replaces a different amount of the code each time, but always beyond the ""

I had a similar issue when I first started setting up this layout because for one reason or another the overall table width was set to 801 instead of 800, but once I changed that I thought everything was good until I discovered the issue with IE.

So that's where I am now.....I'm going back and double checking all my width settings to make sure they're accurate...still open to other ideas!!


Thanks for the help so far

Member Avatar for joshua.tilson

The simple answer?
Stop using myspace!

Check out some sites that promote cross browser computability
CSS Play is a particularly good one.

good luck!

Member Avatar for guitarman5000

Well I finally got it all worked out!

What I had to do was go through and make sure every cell had at least some form of size parameters (width when there wasn't a colspan, height when there was) and now it seems like everything is working as it should be.

Thanks to MidiMagic for the advice. Turns out that I read your post a little bit wrong initially, but once I went through and put in all the new parameters everything started working.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.