IE7 Broke My Site

Followers

June 9, 201115 yr

Hi There,

I've recently been learning XHTML/CSS (hand coding) and I thought I'd start to put a simple site together - Not a genuine site, but just an exercise. I used one of the free hosts to get it online.

Here is the URL:

My link

The problem is, it works just fine on Chrome, Firefox and Safari (both on Win and Mac), but a few things break when it's viewed on IE7 (and one or two on IE8)

Dose anyone please have any ideas how I can fix these?

It should look like this:

By nomos66 at 2011-06-09

But it looks like this:

By nomos66 at 2011-06-09

June 9, 201115 yr

Each browser is different in how they look at CSS, the standards and rules they support and the way they read them, Firefox, Chrome and Safari are fairly similar to each other (in the ways stated above) but Internet Explorer doesn't share the same levels of similarity, however IE 8 was a step in the right direction and IE 9 support for CSS has bought it a lot closer towards the amount of shared/common support that the other browsers offer, anything below IE 8 however is going to cause you a little hassle from time to time due to it's fairly significant differences, the best way to get round it is simply add a conditional comment and then define specific CSS (or stylesheets if there's a lot to change) for the various versions of IE.

Bare in mind that IE 7 doesn't support CSS3 at all (the reason for the problem with the border-radius in your image above) and IE 8 only supports some features of CSS3.

Personally I don't design/build anything to support IE 6 or below, IE 7 is annoying enough as it is without having to fix problems in IE 6 as well, although I don't think there are that many people using IE 7 any more and even less using version 6.

Edited June 9, 201115 yr by Alex Seymour

June 10, 201115 yr

Author

Cheers for the reply, but I'm not using any CSS3, rounded boxes were made using two small images on each corner, each in a separate div.

I really can' see why this dosen't work in IE7, it's all just XHTML and CSS2.

If anyone can tell me how to add EI specific code I'd be eternally grateful.

June 10, 201115 yr

You are not using CSS in the way it's intended. You've pretty much replicated a tabled-based layout with divs.

If you coded this thing correctly I think it would handle being cross-browser compatible quite well.

I'd go read up on basic CSS layout. Switch to using a list for your buttons and cut down on the massive amount of divs (all with IDs or classes, none the less) and your results in IE should be much more consistent.