odd rendering problem in IE8 with a complex table

**Desolator144** · Jun 29th, 2009, 12:16 AM

I hope this is just my browser doing this for some odd reason (maybe the dual monitors?) but approximately 50% of the time I hit refresh on this page I made for a customer:

http://atgseries.com/

the GIFs go out of alignment a bunch of pixels. It's a really simple table with absolutely zero whitespace in the TDs and all GIFs. I used slicing in photoshop to make it so there's a lot of colspan and rowspan but I made it as geometrically simplistic as possible. What really tells me this is a glitch is as soon as you mouse over and of the links, it magically renders correctly. Grrrr! So right now I put a warning on the page about using compatibility view to make it look right and tada, it works 100% of the time then. IE7 shows it correctly too.

Take a look and tell me if you know what causes this and if there's a way to fix it or not. I already removed all whitespace inside the table and added a vertical-align:top property to the style of the entire table. That still did nothing. Is there some forced refresh command I can use to basically do the same as mousing over a link? Or is there some different way to do some of the tags that gets around this glitch?

**Nightwalker83** · Jun 29th, 2009, 03:25 AM

For IE8 you will need to create a new style sheet with new dimensions that is unless you use the IE7 compatibly tool built-in to IE8. I have never been able to get the compatibility tool in IE8 to work. Hopefully, someone else here can tell use both how to use it.

**SambaNeko** · Jun 29th, 2009, 09:42 AM

I think I see your problem, but when I saved a local copy of your page to try a solution, the local copy won't produce the same issue. Which is, indeed, odd.

One thing I'd try is to make images display as "block" type:

Code:

table img{display:block;}

I've had a similar issue with images inside table cells because the default display type of images is "inline," which can leave a bit of space around images (which is not desirable when they're supposed to be a tight-fit in a box). I'm not sure if this is your problem or if the above suggestion will help, though.

If you want to simply trigger IE7 rendering, you can add this to your <head> area:

Code:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

**Desolator144** · Jun 29th, 2009, 11:38 AM

thanks samba! I'm totally adding the meta tag that tells it to render that way by default until I get this fixed. I think you have block and inline backwards though. Inline puts no space around it and block puts a break after it and sometimes before it like with <h1> tags. I will try different display properties though like inline-block. Who knows what that does :P

If that doesn't work, I was thinking since rolling over any rollover fixes it I could put in a javascript code that swaps out an image at the end of the table with an exact copy of the image and see if that forces it to redraw itself correctly. I have no idea how to make the javascript function run exactly when the page is done loading though.

Oh and nightwalker, instead of in a CSS file, I just put style="height:__px; width:__px" for every single TD earlier and that didn't force it to stop sizing them incorrectly

**SambaNeko** · Jun 29th, 2009, 12:30 PM

Originally Posted by Desolator144

I think you have block and inline backwards though.

Nah. As quoted from Quirksmode:

An image has display: inline by default. Therefore it has a slight space below it, because the image is placed on the baseline of the text. Below the baseline there should be some more space for the descender characters like g, j or q.

I know the extra space in your problem is above the image rather than below, but there could be some positioning nuttiness with IE.

I have no idea how to make the javascript function run exactly when the page is done loading though.

I think that goes like:

Code:

window.onload = function(){
  //put whatever you want to happen here
}

...but that (redrawing everything on load) just doesn't seem like a wonderful solution, if it can be avoided.

**Desolator144** · Jun 29th, 2009, 02:27 PM

I'm used to VB so I gotta ask, does that onload function fire when it gets done loading or like in VB where it does it as soon as the form starts loading?

Anyway, for the forcing compatibility mode, I've been to some medium sized sites that all of a sudden tell me there's in compatibility view without ever having me click the button for it so I assume the meta tag works. I added the one posted here and it didn't force mine into compatibility mode and so I assumed there was a typo and googled it and came up with a slightly different meta tag everywhere else so I tried that one and still nothing so now I have them both there:

<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

and it's still not doing anything even on the web server instead of loaded locally. My theory is that's because I already turned compatibility view for that page on and off a couple times so it's remembering my preference and overriding the meta tag. So anyone here who DIDN'T click on compatibility view at any point for that page, go look at it now and tell me if it forces it into compatibility view or not.

**Desolator144** · Jun 29th, 2009, 02:51 PM

I just realized I can jump on my other computer and try it :P so I did and on the first load, it rendered it regularly with IE8 mode. Then every time I refreshed it, it popped up a little balloon telling me pages in general might look better with the compatibility view button and pointed to it. I think that's because the main user of my other computer just never turned it on and off once to get it to shut up lol. So apparently it's not forcing it into compatibility mode like other websites I've seen. Is that because they're in that big, master database Microsoft has for sites that do and don't work? So then what does the tag even do? Does it not like that I have the tags doubled up like that? Actually maybe tripled I guess cuz it's:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

I don't recall specifically what that format of meta tags do or how the browsers react to them. I mean the first one is kinda obvious but I dunno what "http-equiv" means and why that's a property name and not a property value. Anyway, is everyone else experiencing the same thing even with my meta tags there?

**SambaNeko** · Jun 29th, 2009, 03:18 PM

Javascript's window.onload occurs when the page is finished loading.

If you view the source of Microsoft.com, it has the "EmulateIE7" tag, and if you look at MSN.com, it has the "IE=7" version - so that lends weight to both versions being valid, and that you only need one. You might try putting the meta tag above the CSS include (not sure if it makes a difference or not).

If I can figure out any better suggestions, I'll post 'em. Not really sure at the moment.

**Desolator144** · Jun 29th, 2009, 04:32 PM

holy crap, I think moving it actually worked. I put it above the CSS link and above the standard meta http-equiv and now I refreshed the page 50 times and it looked right all 50 times and the compatibility view buttons is just plain gone. I think it's in IE7 mode permanently now that it read it in correctly and won't even let them turn it off since I'm the webmaster and I said use IE7 always or it won't look right. Hurray!

**Nightwalker83** · Jun 29th, 2009, 08:04 PM

Originally Posted by Desolator144

Oh and nightwalker, instead of in a CSS file, I just put style="height:__px; width:__px" for every single TD earlier and that didn't force it to stop sizing them incorrectly

You should use stylesheets so you don't have to fuss around with the styles on each individual page. Using stylesheets it is possible to change the the layout of the individual page/object you want rather than the whole website, just use the id or class method to call the individual object in the stylesheet.

Thread: odd rendering problem in IE8 with a complex table

Thread Tools

Display

odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Re: odd rendering problem in IE8 with a complex table

Posting Permissions