View Full Version : Website Problem (Only in IE)
[JSH]John 10-07-2009, 05:06 PM I seem to have a problem with my website, whenever I use Internet Explorer 8 to view the website, it seems to get all messed up. I've attached the screenshots of what it looks like. If you visit the website using Firefox it looks perfectly fine.
Firefox (The way it's meant to look): http://img203.imageshack.us/img203/7940/firefoxer.jpg
IE8 (Shared Page): http://img3.imageshack.us/img3/3001/ie1k.jpg
IE8 (Reseller Page): http://img194.imageshack.us/img194/7673/ie2e.jpg
If anyone could help me fix this it would be appreciated. When I say fix it, I don't mean to recode the entire site, I'm just looking for suggestions on how this could be fixed as I haven't seen this happen before. It's coded in tables, nothing fancy.
Thanks :).
Darkie80 10-08-2009, 06:22 AM I would advise you to check the source code and make sure that in your table properties the dimensions of cells, rows and columns are properly defined. I would also recommend you an article on website browser compatibility. Unfortunately, I am a new member here, so I cannot post links yet. In order to read it go to the GoArticles.com directory >> Web Development category. Find the article titled "How to Make a Website Browser Compatible" (it's supposed to be on the first page). There you'll find some tips on the topic.
include 10-08-2009, 06:34 AM Can't check the code myself as i'm at a station with IE 7, but i think you can add the following line of code into the header
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Which should force it to run in Compatibility mode (this makes it run using IE7's rendering engine, which your site does work in) - i know its not an ideal fix, but at least it gives you time to look into the problem.
Cheers
C.
dennisthompson 10-08-2009, 08:19 PM You could make a new stylesheet using conditional statements within the <head> tags.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie8fix.css" />
<![endif]-->
and then to try to fix the problem, just put in
tr {min-width:150px;} or something along those lines. Also, the reason why it looks different in IE is because Microsoft decided to let Internet Explorer have its own special "box model" you see..
Here is the regular box model that Safari, Google Chrome, Opera, and Firefox follow: http://www.w3schools.com/css/css_boxmodel.asp.
Here is the box model that IE follows: http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug.
You can see there are substantial differences that are very aggravating to the common user and web designer. I recommend creating the separate stylesheet just for IE and playing around with it until it's just the way you want it. I'd also recommend downloading this: http://my-debugbar.com/wiki/IETester/HomePage so you can see what you site looks like in all relevant versions of IE (Internet Explorer 6 and beyond).
I hope this helps you! :)
[JSH]John 10-08-2009, 08:56 PM Thanks guys :) It's just typical of microsoft to want to do things differently :P.
larwilliams 10-08-2009, 08:58 PM None of these answers are correct.
The problem is in your HTML code.
There is a line that says:
<td width="78%" valign="top">
That limits the width of the content area to 78%, which other browsers incorrectly (or correctly, in some people's opinion) expand to fit the content.
It appears around line 70 in most of your pages.
Simply replace with
<td width="100%" valign="top">
Presto it is fixed :)
larwilliams 10-08-2009, 08:59 PM I tested my solution in IE8 and it works properly. This is one case where the problem is not IE, but rather the code being provided to it.
larwilliams 10-08-2009, 09:03 PM There is another problem where your background image for the Shared Hosting page is repeated. This is due to margins and padding on the P tag that contains:
"UK Web Hosting
Perfect for hosting multiple websites."
Just use CSS to set "margin:0px; padding:0px" on the appropriate P tag and it should fix that problem as well.
dennisthompson 10-08-2009, 09:08 PM Also in the body selector you can omit the 0px technically...
body {margin: 0; padding: 0} not paramount but just letting you know :)
larwilliams 10-08-2009, 09:10 PM Also in the body selector you can omit the 0px technically...
body {margin: 0; padding: 0} not paramount but just letting you know :)
Not really. Some browsers stick on a default padding. This is a case of better to be explicit than to assume.
dennisthompson 10-08-2009, 09:15 PM Not really. Some browsers stick on a default padding. This is a case of better to be explicit than to assume.
True.. Although I did that it still works fine on all modern browsers and IE 6 and 7
veeblox 10-08-2009, 10:42 PM Also in the body selector you can omit the 0px technically...
body {margin: 0; padding: 0} not paramount but just letting you know :)
All very true my friend :) Sort that and your site will be a gem :) All very easy fixes sometimes but just hard to figure out :P Anyway Good Luck :)
- Many Thanks,
larwilliams 10-09-2009, 12:45 AM All very true my friend :) Sort that and your site will be a gem :) All very easy fixes sometimes but just hard to figure out :P Anyway Good Luck :)
- Many Thanks,
Exactly, it is funny how so many people are quick to blame IE for all rendering errors. In this case, the OP's code is to blame, and the fix I posted (correcting the width %) fixes his coding error and the problem.
Is it still fashionable for Firefox zealots to bash IE at every turn? :)
| 