Internet Explorer Issues

Welcome to the biggest nightmare in web design

The other browsers you mentioned all follow the CSS spec with somewhere around 90% consistency, whereas IE is only in the 50% range. The most common problems are typically with margins on floated elements, but there's tons of documented bugs. Try to isolate your problem down to one specific element (use an add-on that helps you inspect specific HTML elements or just start putting border: 1px solid red; on things until you find the problem), and then google for the issue you're seeing. For example, searching for "IE margin bug" gives you a ton of info about margin bugs if what you're seeing in IE is a margin different from the other browsers.

I don't have access to IE on all my machines, and I imagine not everyone here does. It might help if you can post screenshots.

 

I would think that the easiest thing to fix this would be to put it all in a wrapper.

 

You would put a div around all the content, and then set the width and margin on that. Everything else inside it -- the nav, the main graphic, the content area -- wouldn't each need to be positioned then. For example,

HTML:

<div id="wrapper">
...all your stuff...
</div>

Then in the CSS...

Code:

#wrapper {
  width: 960px;
  margin: 10px auto;
}

This will give you a container that's 960px wide, with a 10px margin on the top and bottom and auto margins on the left and right (which will center it on the page). Adjust the numbers as you see fit.

EDIT: I should also mention that the "good" screenshot you posted looks like it has some width consistency issues as well.

 

That thread titles sends shivers down my spine.
One day… I will get around to making my sites IE friendly.
In the back of my mind I think that one day, IE 8 will be commonplace and I won't need to worry.
</end dream>

It's a pain.

You could manually put IE correcting code in your CSS file (that only targets IE), might take a while.
Does anyone know of any smart tools what will look at a CSS file and automatically insert IE correcting styles?

 

Say thanks to Ballmer, besides IE is "standard compliant"

 

I would say if you hold a 90+% market share (such as IE did at one time), you can set whatever "standard" you want. Whether its a good or bad "standard" doesn't really matter when you have market share.

Now that IE's market share is dropping (below 80% now), I think we will see more compliance with web standards.

Unfortunately for me, I use websites daily that are coded for IE only, many of which use ActiveX. Grr.

 

IMO, they can set whatever standard they want, but along with security, site display is one of the reasons IE is being abandoned. MS got used to setting their own rules because they were the monopoly at one point so expected everyone else to play along, designers included, now that they've got competition from all sides (firefox, google, opera, etc.), they're seeing their strategy fall apart.

 

use www.browsershot.org to test all web browsers easily and fast on your site.

 

Look here:

http://www.sohtanaka.com/web-design/css-fixes-tools-hacks-cross-browser-solutions/

Then read this:

View Features

In terms of tools like you asked remember there are at least 3 versions of CSS to account for, and not all MSIE browsers support all features - not even V8. So Microsoft has dug itself a big hole. Of course other browsers aren't perfect, but most of them support both CSS1 and CSS 2.1 these days (2.1 being the "standard" at present date and time) and nobody should be using CSS 3.0 if you want wide support.

View CSS 2.1 and CSS 3 support by browsers (excellent, a must read to see what level of CSS is supported per browser type)

I included the links to help you identify problems in advance.

-jim

 

Nice site btw.

First off validate your code. You have 8 errors. It normally helps.

Other stuff I do when trying to solve this sort of problem:

Set the whole thing in a frame or wrapper (as mentioned above)

Identify the element with webdeveloper plugin for firefox and reset it's margins. If it doesn't work, reset every elements margins and work on the float and positioning of of elements.

If I'm sure I've got solid code, I would probably have a look at Position is everything or conditional commenting.

As a last resort, say you don't support ie6. I have several sites that break in ie6 but work in ie7. Why support it if microsoft doesn't?

Just some random thoughts...Good luck.