Cross-browser compatability

[OrionSuperman]

Hello everyone!

 

I have just finished my first HTML/CSS class, so I have a lot left to learn. One of the unfortunate things that was not covered at all in my class was cross-browser compatability. I made my website where it looked good in Chrome, but had things broken in IE and FireFox. A friend suggested I try converting some of my 'loose html5 coding' to the more strict XHTML. 

 

Any feedback or suggestions would be very welcome overall, and specifically checking how this looks across browsers. I'm currently at work where I'm stuck using Win XP with IE7. It looks so broken on IE 7 I wouldn't know where to start.

 

www.rusticspices.com/ (original project)

 

www.rusticspices.com/xhtmltest.html (testing xhtml changes)

 

xhtmltest.html

[possien]

You're probably right.  HTML5 wasn't around when IE7 was created.  Here is a helpful site for different versions: http://quirksmode.org.  There are several tags and CSS selectors that don't work on IE7.

Edited March 28, 2014 by possien

[Strider64]

Another approach would be to use Modernizr : http://modernizr.com/ which lends itself to support older browser versions.

 

I also found out when dabbling with JavaScript to use a library (I know I'm going to get slammed by JavaScript purists) such as JQuery, that way what looks good in Firefox looks good in Chrome, etc...(Well, 99 percent of the time). Another thing I  have learned over the last couple of years is even though I might be writing in HTML5, I still write as if I'm using a stricter mode of HTML (one of my first college instructors even taught that way). This lends to writing cleaner code in the long run and staying away from bad habits that HTML5 tends to lend itself to in my opinion. 

Edited March 28, 2014 by Strider64

[snoopytamp]

Thanks guys! I'll look into quirksmode and moderniz too. Like OrionSuperman, I'm also a newbie in HTML/CSS. This will help me a lot.