IE problems, Firefox OK

Hi Guys

Major problem with our code, we have been developing our site with Firfox in mind, recently we looked at the site via IE, it looks very bad.

Here is the site;

http://www.xytron.co.uk


Any ideas or comments where we have gone wrong, how can we rectify this?

Any help would be greatly appreciated.

Many thanks for looking and advice in advance.

Regards.

Hello,
Could you perhaps be more specific - what parts are looking bad? I just visited your site with Firefox 1.5 and IE 6 (on Windows XP) and it looks ok to me...

BTW: cross-posting is usually a bad idea...

Hi

Thanks for such a speedy reply.

Sorry for cross posting.

The site looks bad in IE 7, i dont have earlier version at the moment, looks ok in previous versions?

Thanks for your help.

I’ve looked at it with IE 6 as well (didn’t install IE 7, don’t use it anyway) and looks perfect, can’t tell if it’s pixel perfect, but I didn’t notice any difference between the looks of it in IE or FX 2.0, so that should be fine.

Yes, more detail on what exactly "looks bad" might help.

I too viewed in both and it seems fine. I don’t have IE7 on my system, so can’t really comment on that one. My guess would be if there is something based on your floated containers, though it looks like you only have a couple, but knowing that floats can be a bit tricky sometimes across browsers, or in margins or paddings... seems like IE and FF both sometimes treat some margins, margin-collapse, and padding a little differently, especially based on whether the container is marked as relative or not. Otherwise, I would assume that maybe you have some IE hacks in your CSS that are no longer valid in IE7.

http://browsershots.org/ is your friend.

I noticed you’re using conditional comments. You might want to change the line

into:


and see what happens

Hi Guys

Many thanks for all the speedy replies and help.

I will try all the sugestions now.

This really is a superb community of knowledge and help.

thanks again.

Regards to all.

It is very broken in IE7. IE7 doesn’t treat heights as min-height like IE6 does. I would get the heights for IE6 and less into another stylesheet and then use conditional comments to reference them. In addition there seems to be some unneccessary floating and spacing used in your CSS. Are you creating the CSS by hand or are you using some type of program to create the SS.

I would try losing all the height values in the style sheets and then move to play around with the floats and positionings. The design of this layout seems overly complicated for a three column design with a fixed top and bottom and actually doesn’t even require a pagewrapper like so many fixed width sites do:

You could achieve the same layout with less issues if you simplified it some.

I would also suggest using a strict DOCTYPE as there is no reason to use transitional doctypes for new sites. The idea of transitional doctypes was to handle the transition from legacy code not as an excuse to use deprecated elements in new designs. You will find that IE7 may behave differently with a strict doctype.

I actually had a problem where I built my site using IE7 and it was shit in firefox, the css didn’t work in IE 6 and Opera 9 but the site was pretty as it was supposed to be in Netscape. Css mainly... nice clean site btw