Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

So html and css validate with no warnings

But IE8 won't display it properly?



5:13 am on Jan 11, 2011 (gmt 0)

10+ Year Member

Trying to figure this out. I have two pages that display perfectly in Firefox, both pass validation at w3c, no warnings. CSS passes validation as well. Neither display properly in IE8. They both have Google AdSense code on them, using div float code.

When viewed on IE8, the text is on top of other text, images are in the wrong place, even h2 and h3 text is in the wrong place. If I remove the div float and AdSense code, the pages display normally.

So how is it that IE8 is supposed to be more standards compliant, yet cannot display pages that are 100% validated? I know about emulating IE7, but I'd rather fix the html instead of applying a band aid that will break at some point down the road. Also, I've tried them with and without the IE text jog fix, no difference.

I think I'm beginning to be happy that IE use is dropping worldwide.

Any ideas on fixing this? The pages are xhtml 1.0 transitional. I'd like to have the text wrap the AdSense code, as I don't like the way it looks otherwise. It's the 200x200 square ad.

Thanks in advance.


5:27 am on Jan 11, 2011 (gmt 0)

I just run my css file through validator,it is not coming with any error but more warnings are comes.


5:45 am on Jan 11, 2011 (gmt 0)

WebmasterWorld Senior Member tangor is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Check your DocType... wrong version will trip Quirks mode...


12:50 pm on Jan 11, 2011 (gmt 0)

10+ Year Member


No errors or warnings on xhtml or css on those pages, I've checked several times.


I checked DocType again, looks fine.

The strange thing is, I'm certain I checked both of these pages not long ago when I first put them online. I normally check everything with IE and Firefox, as those two browsers represent the majority of visitors to my site. They had to have been OK when published, or I would have fixed them at that point, so I'm wondering if there's another Microsoft update in the mean time that's gone awry.


2:26 pm on Jan 11, 2011 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Have you tried using the IE8 Developer Tools to inspect the elements? This can tell you which styles are being applied. That should give you a better understanding of what is going on. Perhaps there is a style being applied that you weren't aware of.


3:21 pm on Jan 11, 2011 (gmt 0)

10+ Year Member

I've never been able to get the Developer Tool to do anything. I've gone through the documentation, but apparently either don't understand how it works, or it isn't working properly on my computer.

The strange thing is, there was one page created between the two that don't display properly, and it works perfectly! That page was created by saving the first (broken) page, then deleting the content and updating it. The third (broken) page was created from the second (good) page, so all the scripts and basics are the same between the three pages, just the wording changed, one has an unordered list, etc., but that doesn't seem like it would matter much.


4:59 pm on Jan 11, 2011 (gmt 0)

10+ Year Member

I got tired of messing with this, so I made some changes to the basic layout, and it fixed the problem.

These particular pages are technical ones, using tables for layout to make sure everything aligns, since mis-matched numbers could cause problems. The table had two columns, everything in the left column displayed as it should, but the right column with the AdSense div float was awful. Text on top of text, text on top of images, h3 text out of place, and despite validating with zero warnings, that's what I got.

I split the right column into separate cells, three on one page and two on the other, and now everything is just fine. No emulate code necessary.

The only thing I can figure is that another div in that same cell was causing a problem. Div float is a basic and it seems IE ought to get it right, since it's been a problem since IE5? IE6? It would be nice to know what the problem is, for future reference, since IE9 will be out at some point (likely with a slew of new problems, too!)

Hopefully I can get some work done, now, after wasting a good part of the day yesterday on this. Thanks to those who offered advice.


6:16 pm on Jan 11, 2011 (gmt 0)

5+ Year Member

@andyA i have run into similar issues in the past if you are dealing with "exact" spacing meaning there is no padding overflow all content in the containers fit exactly to the last pixel....especially if you are floating content in list format..different browsers have different pre sets on padding and margins...so if it is not zero-ed at the beginning and there is no room for fluctuation then the floats bump each other or other containers and all hell breaks loose.
I dont know if this is your problem (sounded similar)but bottom line is i always leave a little room for fluctuation so this does not happen and make sure i *{padding:0;margin:0;}....hope this helps?


7:34 pm on Jan 11, 2011 (gmt 0)

10+ Year Member


Those pages aren't that tight, I designed them so there was wiggle room because I do like having a little space around the various elements. I'm usually pretty good at telling when things are getting too close, as they just don't "look" right to me, but I do have padding built in and there's no reason why that text couldn't have moved down in the column. Actually, there was quite a bit of room above it as well.

Someday, I may go back and remove the cells and play with it some more. Things like this really drive me crazy, and usually it's something really simple and small causing the problem. I just couldn't find anything this time, and when everything validates, that tells me it isn't an unclosed tag or something of that nature.

Thanks for the suggestion!

Featured Threads

Hot Threads This Week

Hot Threads This Month