ie css issues (code inside)
in the middle of making a site, been using firefox to test it as ive been going along. finally got to a point where im happy with the layout and decided to test it in ie. its all over the place :mad: im using xhtml and css, im sure its to do with the css posistioning. anyone have enough coding experience to take a look at my code to see if they can find the problem? here are some pictures..
firefox
ie
here is my site code..
html
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/milanfan.css" type="text/css" media="all" />
</head>
<body>
<div id="wrap">
<div id="container">
<div id="banner"></div>
<div id="nav">
<li id="nav_news"><a href="http://" class="active">news</a></li>
<li id="nav_articles"><a href="http://">articles</a></li>
<li id="nav_team"><a href="http://">team</a></li>
<li id="nav_results"><a href="http://">results</a></li>
<li id="nav_downloads"><a href="http://">downloads</a></li>
<li id="nav_forum"><a href="http://">forum</a></li>
<li id="nav_about"><a href="http://">about</a></li>
</div>
<div id="sidebar">
<div id="sidebar_top">latest result</div>
<div id="sidebar_bottom">bologna <span class="style3">0</span>:<span class="style2">2</span> milan<br />match report here</div>
<div id="sidebar_top">next fixture</div>
<div id="sidebar_bottom">milan vs messina<br />20:30 cet, 22.09.04</div>
<div id="sidebar_top">serie a</div>
<div id="sidebar_bottom_2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">pos</td>
<td width="65">team</td>
<td width="25">pld</td>
<td width="25">pts</td>
</tr>
<tr bgcolor="#BBBBBB">
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">2</td>
<td width="65">udinese</td>
<td width="25">2</td>
<td width="25">4</td>
</tr>
<tr>
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">3</td>
<td width="65">lecce</td>
<td width="25">2</td>
<td width="25">4</td>
</tr>
<tr bgcolor="#BBBBBB">
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">4</td>
<td width="65"><span class="style5">milan</span></td>
<td width="25">2</td>
<td width="25">4</td>
</tr>
<tr>
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">5</td>
<td width="65">chievo</td>
<td width="25">2</td>
<td width="25">4</td>
</tr>
<tr bgcolor="#BBBBBB">
<td width="10"><img src="img/spacer.gif" /></td>
<td width="25">6</td>
<td width="65">messina</td>
<td width="25">2</td>
<td width="25">4</td>
</tr>
</table></div>
<div id="sidebar_top">milanfan jobs</div>
<div id="sidebar_bottom">here at milanfan we are always on the lookout for people to join our dedicated team. if you think you've got what it takes, please email us!</div>
<div id="sidebar_top">latest results</div>
<div id="sidebar_bottom">latest results</div>
<div id="sidebar_top">latest results</div>
<div id="sidebar_bottom">latest results</div>
</div>
<div id="content">
<div id="box1_top">profile: gennaro gattuso</div>
<div id="box2_top">welcome to milanfan!</div>
<div id="box1_bottom"><div class="img-shadow"><img src="img/players/gattuso.jpg"/></div>in a team where looks and fame sometimes seem to take first priority over football, gennaro ‘rino’ gattuso is a shining light.<br /><br /> gattuso, who plays for serie a champions ac milan, is a no-nonsense, combative style defensive midfielder... read more</div>
<div id="box2_bottom"><div class="img-shadow"><img src="img/milanfan.gif"/></div>milanfan is a website dedicated to ac milan football club. here, you can find all the latest news, results and team information updated daily. <br /><br /> please register with the (free) milanfan forums and help the community grow!</div>
<?php
$number = "10";
$show_dateheaders = true;
include("cutenews/show_news.php");
?>
<?php
include("cutenews/auto_archive.php");
?>
</div>
<div id="footer"> </div>
</div>
</div>
</body>
</html>
css
Code:
#wrap {
position: relative;
margin: 0 auto;
padding: 0 25px;
border: 0px;
text-align: left;
background: url(../img/col_shadow.gif) repeat-y;
width: 770px;
voice-family: "\"}\"";
voice-family: inherit;
width: 720px;
}
html>body #wrap {
width: 720px;
}
#container {
width: 720px;
\width: 740px;
w\idth: 720px;
border-top: 3px solid #BFBFBF;
border-bottom: 1px solid #BDBDBD;
margin: -8px auto 10px auto;
}
#banner {
height: 100px;
width: 720px;
background: url(../img/banner.gif);
}
#nav {
width: 550px;
\width: 570px;
w\idth: 550px;
margin: 0;
padding-bottom: 15px;
font-size:10px;
list-style: none;
height: 18px;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
}
#nav li {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
#nav a {
float: left;
padding: 3px 10px 3px 30px;
text-decoration: none;
color: #555;
background: no-repeat 10px 50%;
}
#nav a.active {
color: #485F79;;
background-color: #DFDFDF;
}
#nav_news a {
background-image: url(../img/nav_news.gif);
border-bottom: 2px solid #fff;
}
#nav_news a:hover {
border-bottom: 2px solid #FF7878;
}
#nav_articles a {
background-image: url(../img/nav_articles.gif);
}
#nav_articles a:hover {
border-bottom: 2px solid #F0BA65;
}
#nav_team a {
background-image: url(../img/nav_team.gif);
}
#nav_team a:hover {
border-bottom: 2px solid #EAE180;
}
#nav_results a {
background-image: url(../img/nav_results.gif);
}
#nav_results a:hover {
border-bottom: 2px solid #A2D07E;
}
#nav_downloads a {
background-image: url(../img/nav_downloads.gif);
}
#nav_downloads a:hover {
border-bottom: 2px solid #7FB1BC;
}
#nav_forum a {
background-image: url(../img/nav_forum.gif);
}
#nav_forum a:hover {
border-bottom: 2px solid #CAA1E6;
}
#nav_about a {
background-image: url(../img/nav_about.gif);
}
#nav_about a:hover {
border-bottom: 2px solid #A46F93;
}
#content {
padding: 0 10px 0 10px;
margin: 0 160px 10px 0;
background-color: #fff;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
font-size: 10px;
}
#box1_top {
float: left;
width: 255px;
\width: 275px;
w\idth: 255px;
margin: 0 10px 5px 0;
padding-left: 10px;
background-color: #D02424;
color: #FFFFFF;
}
#box1_bottom {
float: left;
width: 245px;
\width: 265px;
w\idth: 245px;
margin: 0 10px 10px 0;
padding: 10px;
background-color: #DFDFDF;
}
#box2_top {
float: left;
width: 255px;
\width: 275px;
w\idth: 255px;
margin: 0 0 5px 0;
padding-left: 10px;
background-color: #D02424;
color: #FFFFFF;
}
#box2_bottom {
float: left;
width: 245px;
\width: 265px;
w\idth: 245px;
margin: 0 0 10px 0;
padding: 10px;
background-color: #DFDFDF;
}
#sidebar {
float: right;
width: 140px;
\width: 160px;
w\idth: 140px;
margin-right: 10px;
padding-right: 10px;
background-color: #fff;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
font-size: 10px;
}
#sidebar_top {
width: 140px;
\width: 160px;
w\idth: 140px;
margin: 0 10px 5px 0;
padding-left: 10px;
background-color: #D02424;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
font-size: 10px;
color: #fff;
}
#sidebar_bottom {
width: 130px;
\width: 150px;
w\idth: 130px;
margin: 0 10px 10px 0;
padding: 10px;
background-color: #DFDFDF;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
font-size: 10px;
}
#sidebar_bottom_2 {
width: 150px;
\width: 170px;
w\idth: 150px;
margin: 0 10px 10px 0;
background-color: #DFDFDF;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
font-size: 10px;
}
#footer {
clear: both;
padding: 10px;
margin-top: 10px;
background-color: #DFDFDF;
}
.img-shadow {
float:left;
background: url(../img/shadowAlpha.png) no-repeat bottom right !important;
background: url(../img/shadow.gif) no-repeat bottom right;
margin: 10px 8px 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
.img-shadow-right {
float:right;
background: url(../img/shadowAlpha.png) no-repeat bottom right !important;
background: url(../img/shadow.gif) no-repeat bottom right;
margin: 10px 8px 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow-right img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
h1 {
font-weight: bold;
font-size: 10px;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
padding: 0px;
border: 0px;
margin: 0px;
}
h2 {
font-weight: bold;
font-size: 10px;
font-family: 'Frutiger Linotype', 'Lucida Grande', 'Trebuchet MS', sans-serif;
padding: 0px;
border: 0px;
margin: 0px;
color: #D02424;
}
#news_top {
float: left;
width: 530px;
\width: 550px;
w\idth: 530px;
margin: 0 10px 5px 0;
padding-left: 10px;
background-color: #D02424;
color: #FFFFFF;
}
#news_bottom {
float: left;
width: 520px;
\width: 540px;
w\idth: 520px;
margin: 0 10px 10px 0;
padding: 10px;
background-color: #DFDFDF;
}
.style2 {
color: #0A8F00;
}
.style3 {
color: #A00000;
}
.style5 {
color: #D02424;
}
many thanks :(
