dlederman Posted February 1, 2012 Report Share Posted February 1, 2012 I've just finished building my first website and am having issues viewing it correctly in Internet Explorer 7 and 8. I hand-coded the site in html, thanks to the resources on killerwebsites, among others. It looks great when viewed in Google Chrome (which is what I used to develop it), as well as in Firefox and Safari. The problem is with Internet Explorer. The layout is altered and the alignment of images and text is lost. Certain images also don't display correctly. For example, a .gif file that has no border suddenly has one in IE. Is there a way to correct this without making it worse in the other browsers? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted February 1, 2012 Report Share Posted February 1, 2012 The first thing I'd suggest you do is validate the site to check for any mistakes in the coding. Different browsers interpret errors within the code differently, and inconsistencies between browsers often come down to a missing doctype, closing tags or similar things. http://validator.w3.org Once you've validated the website and fixed any errors that you can, perhaps you can post a link so we can take a look? Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 1, 2012 Report Share Posted February 1, 2012 In addition to what Ben said, make sure you have a doctype at the top of your html file, before the <html> tag from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html as IE seems to be more affected by a missing or incomplete doctype than other browsers. I suggest that you get it right in Firefox (which you seem to have done) as IE differences can be sorted if necessary with a conditional comment that only IE will apply. So you can choose all IE versions or just a particular version and apply different styles just for that. See http://www.javascriptkit.com/howto/cc2.shtml but this can usually be avoided if you have a doctype and code correctly. Quote Link to comment Share on other sites More sharing options...
benjaminmorgan Posted February 1, 2012 Report Share Posted February 1, 2012 Also to take off the border add this to your CSS. img { border: 0px; } Quote Link to comment Share on other sites More sharing options...
dlederman Posted February 2, 2012 Author Report Share Posted February 2, 2012 The first thing I'd suggest you do is validate the site to check for any mistakes in the coding. Different browsers interpret errors within the code differently, and inconsistencies between browsers often come down to a missing doctype, closing tags or similar things. http://validator.w3.org Once you've validated the website and fixed any errors that you can, perhaps you can post a link so we can take a look? Thanks for the validator tip. There were a lot of mistakes, particularly in the doctype. The site now displays nicely in IE, as well as Chrome, Firefox, and Safari. You can see the finished product at www.streetwood.com. Thanks again. Quote Link to comment Share on other sites More sharing options...
dlederman Posted February 2, 2012 Author Report Share Posted February 2, 2012 In addition to what Ben said, make sure you have a doctype at the top of your html file, before the <html> tag from here:- http://www.w3.org/QA/2002/04/valid-dtd-list.html as IE seems to be more affected by a missing or incomplete doctype than other browsers. I suggest that you get it right in Firefox (which you seem to have done) as IE differences can be sorted if necessary with a conditional comment that only IE will apply. So you can choose all IE versions or just a particular version and apply different styles just for that. See http://www.javascriptkit.com/howto/cc2.shtml but this can usually be avoided if you have a doctype and code correctly. Turns out the problem was mostly in the doctype. Fortunately I didn't have to get into writing a conditional comment for IE. Thanks for your suggestion and assistance. Quote Link to comment Share on other sites More sharing options...
dlederman Posted February 2, 2012 Author Report Share Posted February 2, 2012 Also to take off the border add this to your CSS. img { border: 0px; } Worked great. Thanks. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.