...

View Full Version : CSS/IE Problems



FuZion
10-25-2008, 08:18 PM
Hi there,

I'm having some problems getting this website to display correctly in IE..

The HTML..

<!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>
<title>Northville High School Womens Basketball | Northville, MI</title>
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/girls/global/style2.css" media="screen" />
</head>
<body>
<div id="container">
<div id="top">
<img id="logo" src="/girls/images/logo.gif" />
<img id="title" src="/girls/images/title.gif" alt="Northville Mustang Girls Basketball" />
</div>
<div id="leftnav">
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Information</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Alumni</a></li>
<li><a href="#">Camps & Clinics</a></li>
<li><a href="#">Links</a></li>
</ul>
</div>
</div>
<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="content-home">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 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.
</p>
<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>
<div id="footer">
</div>
</div>
</body>
</html>

The CSS..

body {
font-family: Arial, Helvetica, sans-serif;
background: #CECECE;
}

#container {
width: 900px;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid grey;
line-height: 130%;
}

#top {
background: url(/girls/images/top3.jpg);
background-color: #ddd;
height: 100px;
}

#top h1 {
padding: 0;
margin: 0;
}

#top #title {
position: relative;
bottom: 30px;
left: 5px;
}

#top #logo {
margin-top: 4px;
width: 130px;
height: 84px;
}

#leftnav {
float: left;
width: 140px;
margin: 0;
}

#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 10px;
}

#content {
margin-left: 140px;
border-left: 1px solid black;
padding: 15px;
width: 550px;
}

#content-home {
margin-left: 140px;
margin-right: 160px;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 15px;
width: 550px;
}

#footer {
clear: both;
margin: 0;
background: url(/girls/images/bottom.jpg);
height: 75px;
color: #333;
background-color: #ddd;
border-top: 1px solid black;
}

#leftnav p, #rightnav p {
margin: 0 0 1em 0;
}

#content h2, #content-home h2 {
padding: 10px;
}

#menu {
clear: both;
width: 140px;
font-size: 14px;
}

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

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #CCC;
display: block;
background: url(/girls/images/menu4.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #FFF;
background: url(/girls/images/menu4.gif) 0 -32px;
padding: 8px 0 0 10px;
}

For some reason the content-home div is not moving all the way up to the top. I think its my misunderstanding of floats that is causing the problem. How can I fix this?

Also, is it possible to get the content of content-home to appear a little higher? I've played around with the padding but it messes up the borders.

Thanks in advance!

FuZion

FuZion
10-25-2008, 09:10 PM
Also, the website is http://northvillebasketball.com/girls/index2.php



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum