PDA

View Full Version : Really messed up in IE



xxkylexx
Mar 29th, 2007, 07:53 PM
Hey guys,
Have a template here that a customer bought from TM. The site looks ok in Firefox, but in IE, it's like an infinite height or something. Only the header is visible at the top, and the rest of the page you can see only if you drag your scroll bar all the way to the bottom (scroll bar wont move is you use the wheel). Have a look at the link to see what I mean.

All of the code checks out as valid from the w3.org validator, so I am stuck.

Any help is greatly appreciated.

Site: http://isnturnaroundgroup.com
CSS: http://isnturnaroundgroup.com/style.css



Thanks much,
Kyle

karinne
Mar 29th, 2007, 08:01 PM
Holy DIVS Batman!!!! :eek: Wow ... that IS messed up! LMAO!!!!

Ok ... are you playing with it, just I just tried reloading it and I don't get the menu or the image anymore ... nor the infinite scrolling!

xxkylexx
Mar 29th, 2007, 08:37 PM
Good ol' horrible Template Monster coding :)

Yep, played with it for a bit and fixed the infinite height problem. Now just having an issue getting the alignment of the header right.

Again, FireFox is how it should look. Any ideas?


Thanks much,
Kyle

koyama
Mar 30th, 2007, 02:47 AM
Again, FireFox is how it should look. Any ideas?
In IE there is a small gap under your image. This is actually how it should look. Read the explanation why here: Images, Tables, and Mysterious Gaps (http://developer.mozilla.org/en/docs/Images,_Tables,_and_Mysterious_Gaps)

This is from your code:


<div style="float: left">
<img src="images/h_back1.jpg" alt="" />
</div>

The only reason why you are not seeing the gap in Firefox is because you have used a transitional doctype and not a strict doctype. Go ahead and change your doctype to a strict one and you'll suddenly see many gaps in Firefox.

The correct solution to your problem (as described in the article) is to use img {display: block} for those images.

Note, in IE you could actually just remove the whitespace around the image element in your source and the gap will disappear:


<div style="float: left"><img src="images/h_back1.jpg" alt="" /></div>

This causes IE to (incorrectly) not show the gap.

But, solve this the correct way which is to use img {display: block}. This works in both IE and Firefox (with any doctype)