dlederman Posted February 1, 2012 Report 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?
falkencreative Posted February 1, 2012 Report 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?
Wickham Posted February 1, 2012 Report 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.
benjaminmorgan Posted February 1, 2012 Report Posted February 1, 2012 Also to take off the border add this to your CSS. img { border: 0px; }
dlederman Posted February 2, 2012 Author Report 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.
dlederman Posted February 2, 2012 Author Report 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.
dlederman Posted February 2, 2012 Author Report Posted February 2, 2012 Also to take off the border add this to your CSS. img { border: 0px; } Worked great. Thanks.
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now