IE HTML Troubleshooting

[Coolnat2004]

If anyone could help me ASAP that would be awesome! I just launched a website and while the code being very massive (thanks to the design they had me use) and frowned upon (tables to organize images.. yeah I know).. it looks perfect in every browser BUT Internet Explorer.

These are minor issues - gaps in the images. I have attached the screenshots in IE and Firefox (under windows) so you can see the difference.

If ANYONE has ANY idea on how to get IE to display the page correctly, please let me know!!

Thank you!!

 

[CanadaRAM]

For this type of design, you don't want any table cells to be undefined or percentage widths. Go through it with a fine toothed comb and make sure your cell widths and heights are all set, and that they all add up to EXACTLY the table width and height. Use Align=Top and Align=Bottom (and Right/Left) to make two images kiss in the middle. Set all your Page margin tags to 0 even if it is unsupported in other browsers.


<Ya right - I'm looking at the screenshot, clicking and clicking and muttering #%$@ing thing won't scroll. Doh...>

Needless to say, make sure you have the alignment in each table cell set the same for a series of horizontal images that are supposed to line up. Don't rely on the login button to set height. Use an invisible GIF set to the correct height or width to force the cell if you have to. Don't rely on text size, either. Are you not usiing a stylesheet with fixed pixel sizes on type? the IE version seems to have larger type.

 

[Coolnat2004]

Well, almost every image on the page is a cell background, and the cells are set to the same dimensions of the images (some only explicitly set one dimension, but they are meant to inherit the other dimension from the cells around them..).

I realize that this is a horrible way to code it, but it's not like I can start over. I thought that something might be pushing the cells out of alignment, but I added/removed things and it ended up the same. I don't know why IE has to be so difficult! It's supposed to render bad code the right way! Hahah..

I went in and started defining every dimension on every cell, but there are many cells that span columns and rows.. which is increasingly confusing.

The design is live at http://www.madhatterclub.com if you'd like to take a look at the code. I'm super lazy and I've been trying to solve this for several hours.

A blank layout that ends up the same (no content) is at http://www.madhatterclub.com/findex.html

 

[Coolnat2004]

I went through and set the cells to exact height and width. That did nothing. I pulled it into Dreamweaver and messed with it and colored the cells that have incorrect sizes (though the green one in the top-right is fine).

This page is slightly mishapen but if I can get the IE-specific misalignment fixed, I'm sure I can get it all back together ( http://www.madhatterclub.com/findex.html ).

I've attached an IE screenshot and a Firefox screenshot. You can see the difference in affected cells.

Any other ideas?

 

[c-Row]

For the tables and cells, did you use width="..." and height="...", or style="width: ...; height: ...;"? I think IE follows CSS style settings much closer than HTML width/height settings.

 

[jeremy.king]

Use CSS for height/width. Also seems you have some unquoted attributes.

Validate!

 

[CanadaRAM]

Well, almost every image on the page is a cell background, and the cells are set to the same dimensions of the images (some only explicitly set one dimension, but they are meant to inherit the other dimension from the cells around them..).

That's part of the problem there. When using BG images, if the image is suitable make the images larger to the right and bottom than the intended call. That way, if the cell opens larger, you still have some content in it, rather than a repeat or whitespace.
Don't assume that IE will inherit dimensions the way you think.

 

[Styrofome]

Worked for me...

Hi Coolnat,

Until recently I was having a very similar problem to yours - my cells would all align perfectly except in the newest version of explorer (thanks microsoft). The previous posters are right about explorer heeding css commands closer than html.

Nothing worked until I collapsed my table's borders in css:

table.one {
border-spacing: 0px;
width: 640px;
border-collapse: collapse;
border-width: 0;
}

I'm not sure if the other parameters are redundant, but the collapse command seems to have special explorer powers. Hope that helps!