Hey guys, Just wondering if it is possible to design a site that is cross browser compatable. I am having some troubles with this as when I look at one of my websites in Internet explorer it is fine, but when I switch to Google Chrome it is a mumbled up and it looks really messy and out of order. Any way to fix this or reason as to why this happens?? Thanks!
1) Always write markup using web standards. 2) Test your markup in a modern browser (anything but IE) 3) Then test your markup in IE to see if/when it screws things up; but the quirks and bugs in IE are well known, as are the hacks to fix it. Never, ever trust IE to do anything right. Obviously, you trusted IE first. A guarantee your page won't work in more modern browsers.
Pretty much MoeLarry (or is that curlyLarry) covered the heart of your mistake. Coding and entire layout to any one browser and then only testing once done is pretty much just begging for /FAIL/, ESPECIALLY when that one browser is, as his signature says 11 years behind the standards (as opposed to Firefox's 10 years). Do you have a code example of what's breaking? Some common mistakes if you only code to IE: Do you have a valid doctype? Failing to include one means IE uses a different box model than everyone else, and there are other 'quirks' in other browsers that can crop up without one as well. Are you still using presentational and/or transitional markup? If so, get that ****otry the heck out of your markup into the external CSS where it belongs. That means FONT, CENTER, ALIGN, VALIGN, BORDER, BGCOLOR, ALINK, VLINK and a whole host of other rubbish that doesn't belong in modern markup. Your markup should say what things are, NOT how they are going to appear. Likewise for presentational images (borders, images for text sections) which should also be offloaded to the CSS. But for the most part if you write so that FF/Opera/Safari display ok, IE8 and usually IE7 will be ok, and all you have to hack for is IE6... in which case, learn about margin doubling, haslayout, unpositioned rendering quirks, and comment created render bugs. See this post I just made a few hours ago http://forums.digitalpoint.com/showpost.php?p=12876731&postcount=8 For more information on those quirks. If you post up some sample code, we can likely rip it apart and tell you what you are doing wrong - there's no shame in doing it wrong, sounds like you are still learning... and I'm willing to bet up to now you've been learning from resources a decade out of date.
To obtain cross browser compatibility, 1. Application done for Firefox/Safari/Opera will work 99% for IE 2. Use JQuery or DOJO tools which support cross browser compatibility
WOW /FAIL/ HARD Yeah, throw a 20K of javascript at problems that can be solved by maybe 5 lines of CSS over an entire layout. Mein Gott, DrHowardDrFine was right on that count...
Just last week, a guy somewhere was trying to add a border to some element. Yes, all it required was 'border:1px solid' yet someone gave a jquery solution.