IE HTML Troubleshooting

Discussion in 'Web Design and Development' started by Coolnat2004, Jun 5, 2006.

  1. Coolnat2004 macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #1
    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!!
     

    Attached Files:

  2. CanadaRAM macrumors G5

    CanadaRAM

    Joined:
    Oct 11, 2004
    Location:
    On the Left Coast - Victoria BC Canada
    #2
    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.
     
  3. Coolnat2004 thread starter macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #3
    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
     
  4. Coolnat2004 thread starter macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #4
    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?
     

    Attached Files:

  5. c-Row macrumors 65816

    c-Row

    Joined:
    Jan 10, 2006
    Location:
    Germany
    #5
    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.
     
  6. jeremy.king macrumors 603

    jeremy.king

    Joined:
    Jul 23, 2002
    Location:
    Fuquay Varina, NC
    #6
    Use CSS for height/width. Also seems you have some unquoted attributes.

    Validate!
     
  7. CanadaRAM macrumors G5

    CanadaRAM

    Joined:
    Oct 11, 2004
    Location:
    On the Left Coast - Victoria BC Canada
    #7
    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.
     
  8. Styrofome macrumors newbie

    Joined:
    Jul 14, 2008
    #8
    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!
     

Share This Page