Internet Explorer killed my site?

MarkW7

MarkW7

MarkW7

Permabanned
Joined
30 Nov 2008
Posts
731
Location
Manchester
I don't use internet explorer myself but as i am setting up a computer based site and most of my viewers will be using IE, i don't want the site to be ruined for them and for them to leave.

Website:

// Yes, i am buying a .co.uk when everything is sorted.

Any ideas? Seems fine in FF.
 
Last edited:
You have a fairly normal case of IE interpreting your CSS file differently to other browsers. The solution: make a new IE-only CSS file.

<!--[if gte IE 6]><link rel="stylesheet" href="/css/styleie.css" type="text/css" media="screen"><![endif]-->
 
Well google how to center a div in ie first :)

iirc you also have the double padding bug in effect here too :)
 
The problem is that your site isn't HTML validated (it doesn't confirm to the HTML specification). This means that IE uses 'quirks' mode which ruins the look of the site. In IE8 press F12 to go to the developer toolbar then set the 'Document mode' to IE7/IE8 Standards at the top right; you'll notice your site looks fine.

So, to fix your site do this:
Line1: Replace <html> with:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
Line 30/32/34: change … to ... (3 actual dots)
Line 66: Change © to &copy;
Line 71: delete </body></html>
Line 78: replace with:
Code: 
<noscript><div><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></div></noscript>
LIne 81 (last line in the file) add </body></html>

Congratulations.. you're now XHTML strict compliment :p and IE8 works fine.

Is that counter something you've added or something your hosting (hosting24) adds automatically? If it's automatic it might keep causing problems unless you disable it.

Full code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<title>Manchester Compute</title>
 
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="mancompute.css" rel="stylesheet" type="text/css" />
</head>
 
<body>
<div id="header">
<h1><a href="#"> </a></h1>
<h2><a href="#"> </a></h2>
</div>
<div id="menu">
<ul>
<li class="active"><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">Services (Drop down)</a></li>
<li><a href="#" accesskey="3" title="">Shop</a></li>
<li><a href="#" accesskey="4" title="">Links / Downloads</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="colOne">
<h2>Recent Updates</h2>
<h3>Update one</h3>
<p>Manchester Compute is back online! And has undergone a brand new layout which includes graphics and coding! <a href="#">More...</a></p>
<h3>Update 2</h3>
<p>Put update two in here. <a href="#">More...</a></p>
<h3>Update 3</h3>
<p>Put update 3 in here. <a href="#">More...</a></p>
</div>
<div id="colTwo">
<h2>Welcome to Manchester Compute!</h2>
<p><em><strong>Manchester Compute</strong></em>
is a local business that offers top quality computer related services on your doorstep. <a href="http://www.websitehereifneed.com/"><strong>Website link name</strong></a> </p>
<p> Paragaph 2 in Column two. - Writing, upto here.</p>
<p> Paragaph 3 in Column two. - Writing, upto here.</p>
<ul>
<li><a href="#">Link one.</a></li>
<li><a href="#">Link two.</a></li>
<li><a href="#">Link three.</a></li>
</ul>
<p>Paragaph 4 in Column two. - Writing, upto here..</p>
</div>
<div id="colThree">
<h2>Header1, column three</h2>
<ul>
<li><a href="#">Link one.</a></li>
<li><a href="#">Link two.</a></li>
<li><a href="#">Link three - etc...</a></li>
</ul>
<h2>Header 2, colum three</h2>
<ul>
<li><a href="#">Link one.</a></li>
<li><a href="#">Link two.</a></li>
<li><a href="#">Link three.</a></li>
</ul>
</div>
<div style="clear: both;">&nbsp;</div>
</div>
<div id="footer">
<p>Copyright &copy; 2009 Manchester Compute. Designed by <a href="http://www.manchestercompute.co.cc/"><strong>Me.</strong></a></p>
</div>
 
<!-- <div style="font-size: 0.8em; text-align: center; margin-top: 1em; margin-bottom: 1em;">
Design provided by <a href="http://www.freewebtemplates.com/">Free
Web Templates</a> - your source for free website templates<br />
Supported by <a href="http://www.hosting24.com/" target="_blank">Hosting24.com</a></div> -->
<!-- www.000webhost.com Analytics Code -->
<script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
<noscript><div><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></div></noscript>
<!-- End Of Analytics Code -->
</body></html>
 
Last edited:
Nice :).

I'm not a designer but it looks pretty good to me. Some of the text on the buttons seems to be getting clipped though, i.e. on links/downloads I think there should be more of a margin on either side of the text.
 
Pho said:
Nice :).

I'm not a designer but it looks pretty good to me. Some of the text on the buttons seems to be getting clipped though, i.e. on links/downloads I think there should be more of a margin on either side of the text.
Click to expand...

Yep, i'm going to have it as 'downloads' so it'll fit on :)
 
You must log in or register to reply here.
Back
Top Bottom