I recently rebuilt my website (URL: http://www.low-glycemic-foods.org/) using a Coffeecup html 5 template.

It looks good and works fine in IE8&9, and Firefox and Chrome.

But the layout is messed up in IE7. Unfortunately, about 25% of my visitors still use (why I have no idea) IE7.

I think it has something to do with the doctype declaration, and there should be a workaround by inserting some sort of <--If IE7 blah blah--> into the header, but I have no idea of he correct syntax if this is indeed a viable work around.

Any help would be much appreciated.

Thanks in advance
Bill

IE7 does not support HTML5 or CSS3 which is going to be your main issue. The only ways around that is to use the new tags for loading the page in the different browsers (can't recall them right off the top of my head) where you can tell it how to show in different browsers and versions. Or you can create separate pages for those particular browsers and have the tags there still detecting the browser versions and redirect them.

Other than that, it's surprising that IE8 would not have issues also since it also doesn't really totally support the new versions of HTML and CSS.

I would suggest doing a google search on HTML5 and CSS3 and checking with http://www.w3schools.com/ and see what information you can find there for it.

Try adding the following to your page:

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=100" />
<![endif]-->

Thanks for the suggestions but no luck. The only real problem apparent with the rendering in IE7 is that for some reason the page footer appears before the main content rather than after it.

I guess its a problem with the way IE7 interprets the html div structure, but I have no idea of how to change it without creating problems in IE8,9 Chrome, Firefox, etc.

In time as IE7 goes out of use the problem will go away - I'd rather design for the future than the past.

Thanks again.

Maybe a future design will prevent the Apple from jumping all over the place with menu clicks in all browsers?

I get a css error in the branding.css

cse-branding-bottom, .cse-branding-right Property zoom doesn't exist : 1 1

OK - the problem is sol-ved.

I simply replaced the non-functional (for this purpose) snippet:


<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

with this one, that actually works:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js" type="text/javascript"></script>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js" type="text/javascript"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->


Don't ask me how or why it works - you are talking to someone who began his computing career in 1972 by entering data on IBM punch cards (inspected by some guy at IBM shipping named "B. Gates")

Anyway, this appears to be a general hack for all IE7 / HTML5 compatibility issues.

Surely not "THE" B. Gates though... As he would have only been 17, and probably doing his stint as a Congressional Page

Glad you got 'er done. And for what it's worth, the world of IE is full of "hacks".