Website doesn't work in IE

swinnie

swinnie

swinnie

Soldato
Joined
30 Apr 2007
Posts
3,095
Location
Kent
Hi Guys,

Just made a website, coded it by hand using XHTML Strict 1.0 and CSS. All validates fine and displays correctly in Firefox, Opera, Chrome and Safari. It totally screws up in IE.


Firefox View


IE View

HTML:

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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Love 2 Drive School of Motoring - Home</title>
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
</head>
<body>
<div id="wrapper">
<div id="banner"></div><!--//banner-->
<div id="underbanner"><img src="images/under_banner_2.jpg" alt="Under banner image" /></div><!--//underbanner-->
<div id="nav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="pricing.html">Pricing</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div><!--//nav-->
<div id="contentcontainer">
<div id="content">
<h2>Home</h2>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div><!--//content-->
</div><!--//contentcontainer-->
<div id="footer">&copy; Love 2 Drive - All Rights Reserved</div><!--//footer-->
</div><!--wrapper-->
</body>
</html>

CSS:

Code: 
html, body {
font-family: "Arial", sans-serif;
color: #000;
background-color: #ddd;
}

#wrapper {
background-color: #006699;
border: 1px solid #333;
width: 783px;
margin: 0 auto;
}

#banner {
background-image: url(images/banner.jpg);
border-bottom: 1px solid #333;
width: 783px;
height: 103px;			
}

#underbanner {
width: 783px;
height: 143px;
border-bottom: 1px solid black;
}

#nav {
background: #006699;
float: left;
width: 159px;
height: 100%;
margin-left: 0px;
margin-top: 0px;
}

ul#nav { padding: 0; margin: 0;}
li#nav { padding: 0; margin: 0;}

#nav li {
display: block;
float: left;
text-align: left;
width: 159px;
border-bottom: 1px solid white;
}

#nav ul {
list-style-type: none; 
padding: 0;
margin: 0;
}

#nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
display: block;
font-size: 11px;
padding: 5px;
}

#nav a:hover {
text-decoration: underline;
}

#contentcontainer {
background: #CCCCCC;
margin: 0 2px 0 160px;
width: 622px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}

#content { padding: 5px; }

#contentcontainer #content h2 { margin-top: 0; text-transform: uppercase;}

#footer {
clear: both;
background-color: #006699;
text-align: right;
font-size: 10px;
height: 20px;
margin-right: 10px;
margin-top: 5px;
}

Thanks in Advance.
 
Try reducing the width of the of the content slightly, it's probably just wrapping by being too long.
 
Afaik the problem is in how IE and Firefox use padding and margins.

Correct me if im wrong, but IE adds padding to the existing width, firefox subtracts.

So if you have a content width of 783px.
You then go add padding for 3px to the left and right side.

Firefox would subtract 3px from the left and right leaving a content width of 777px
IE would add 3px to the left and right increasing the content width to 789px and wrapping it, causing the content to drop down.
 
Dj_Jestar said:
Code: 
* {
  margin: 0;
  padding: 0;
}
Click to expand...

Hi DJ_Jester, do I just pop that in as it is into the stylesheet?

I've fixed it briefly by adding an IE Only stylesheet, that makes it all line up, but adds a blue border on the right hand side. I just got it to reduce the width of the #contentcontainer property.
 
Yeah, a reset style sheet is the way to go. Ours is a bit more specific to reduce render times....swings and roundabouts and all that.

Code: 
/* ---------------------------------------------
RESET.CSS
-----------------------------------------------*/

html {
	height:100%;
	margin-bottom:1px;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

:focus {
	outline: 0;
}

table {
	border-collapse: separate;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

* a:hover, * a:active {
	outline:none;
}	
		
.clear {
  clear: both;
}

li li, li p, td p, blockquote p {
	font-size:1em
}

.floatleft {
	float:left;
}

.floatright {
	float:right;
}
img.floatright{
	margin-left:10px;
}

.center {
	text-align:center;
}

.right {
	text-align:right;
}

img {
	border: 0;
	vertical-align:bottom;
}

p {
	line-height:1.5em;
	margin:0 0 1em 0
}

ol, ul {
	list-style:none; 
}

input, select{
	font-size: 11px;
}

legend {
	display:none;
}

strong {
	font-weight:bold;
}
 
Try not to use the * {} to reset everything. Resetting everything is unnecessary and can cause slower page loading times :)

Eric Meyer one is the way to go but you can make one to your exact needs
 
You must log in or register to reply here.
Back
Top Bottom