Hey guys , im working on a clan website and just half finished a prototype. However i encountered a problem . in the #content div i want the background to be fully covering the whole height of the div. In firefox it displays it exactly as i want but IE doesnt . it instead leaves space .
can u guys check this website in both IE and Firefox and tell me the problem.
clan website prototype (note: the images havnt been optimised yet ,so it may take a while to load)
thanxx.
my
css file:
Code:
body {background-image:url(images/bg.
gif) }
#maincontainer {
position:absolute;
top:0px;
left:0px;
margin-left:13%;
width:780px;
border:solid;
border-color:green;
border-width:2px;
height:800px;
}
#borderleft {
border:solid;
border-color:white;
border-width:0px;
width:16px;
background-image:url(images/leftborder.
png);
background-repeat:repeat-y;
background-position:left;
height:800px;
}
#bartop {
position:absolute;
top:0px;
border:solid;
border-color:blue;
border-width:0px;
width:748px;
margin-left:16px;
height:24px;
}
#borderright {
position:absolute;
border:solid;
border-color:white;
border-width:0px;
width:16px;
background-image:url(images/rightborder.
png);
background-repeat:repeat-y;
background-position:right;
height:800px;
top:0px;
right:0px;
}
#logo img {
width:748px;
height:152px;
}
#logo {
position:absolute;
top:24px;
left:16px;
border:solid;
border-color:red;
border-width:0px;
width:748px;
margin-top:-5px;
}
#nav {
position:absolute;
top:176px;
left:16px;
border:solid;
border-color:yellow;
border-width:0px;
height:25px;
width:748px;
margin-top:-3px;
padding-left:1px;
}
#filler1 {
position:absolute;
left:0px;
width:3px;
height:25px;
display:inline;
border:solid;
border-color:red;
border-width:0px;
}
#news {
position:absolute;
left:3px;
width:93px;
height:25px;
display:inline;
}
#roster {
position:absolute;
left:96px;
width:78px;
height:25px;
display:inline;
}
#servers {
position:absolute;
width:82px;
height:25px;
display:inline;
left:174px;
}
#cs {
position:absolute;
width:237px;
height:25px;
display:inline;
left:256px;
}
#matches {
position:absolute;
width:80px;
height:25px;
display:inline;
left:493px;
}
#files {
position:absolute;
width:76px;
height:25px;
display:inline;
left:573px;
border:solid;
border-color:red;
border-width:0px;
}
#links {
position:absolute;
width:95px;
height:25px;
border:solid;
border-color:red;
border-width:0px;
left:649px;
display:inline;
}
#barbottom {
position:absolute;
left:16px;
top:200px;
width:748px;
border:solid;
border-color:red;
border-width:0px;
}
#mcontent {
position:absolute;
top:216px;
bottom:33px;
left:16px;
width:748px;
border:solid;
border-color:blue;
border-width:2px;
background-color:#757575;
height:auto;
}
#content {
position:absolute;
bottom:0px;
top:0px;
background-color:#757575;
border:solid;
border-color:blue;
border-width:0px;
width:748px;
}
#barlast {
position:absolute;
left:16px;
bottom:0px;
width:748px;
}
a:link {border-width:0px}
my index.
html file:
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>
<meta
http-equiv="content-type" content="text/
html;charset=utf-8" />
<meta name="keywords" content="counterstrike,CS,cs tutorials,cs guides,.:{EK}:. Squall,ecstatic killers" />
<meta name="description" content="website for ecstatic killers clan featuring various Counter Strike related guides" />
<meta name="generator" content="Notepad++" />
<meta name="author" content="*plum* 'Squall' Thalari" />
<meta name="copyright" content="©2006 *plum* 'Squall' Thalari" />
<title>Team Ecstatic Killers</title>
<link rel="stylesheet" type="text/
css" href="main.
css" />
</head>
<body>
<div id="maincontainer"> <!--start of maincontainer-->
<div id="borderleft"> <!--start of borderleft-->
</div> <!--end of borderleft-->
<div id="bartop">
<img src="images/bartop.
png" height="24px" alt="" />
</div>
<div id="borderright"> <!--start of borderright-->
</div> <!--end of borderright-->
<div id="logo"> <!--start of logo-->
<img src="
http://h1.ripway.com/.:{EK}:.%20Squall/logo.
gif" height="152px" width="152px" alt="Team Ecstatic Killers Logo" />
</div>
<div id="nav"> <!--start of nav-->
<div id="filler1"> <!--start of filler1-->
<img src="images/fill.
png" height="25px" width="3px" alt="" />
</div> <!--end of filler1-->
<div id="news"> <!--start of news-->
<a href="news.
html" onmouseover="document.news.src='news2.
png'" onmouseout="document.news.src='news.
png'"><img src="images/news.
png" name="news" border="0" height="25px" width="93px" alt="News" /></a>
</div> <!--end of news-->
<div id="roster"> <!--start of roster-->
<a href="roster.
html" onmouseover="document.roster.src='roster2.
png'" onmouseout="document.roster.src='roster.
png'"><img src="images/roster.
png" border="0" name="roster" height="25px" width="78px" alt="Roster" /></a>
</div> <!--end of roster-->
<div id="servers"> <!--start of servers-->
<a href="servers.
html" onmouseover="document.servers.src='servers2.
png'" onmouseout="document.servers.src='servers.
png'"><i mg src="images/servers.
png" name="servers" border="0" height="25px" width="82px" alt="Servers" /></a>
</div> <!--end of servers-->
<div id="cs"> <!--start of cs-->
<a href="cs.
html" onmouseover="document.cs.src='cs2.
png'" onmouseout="document.cs.src='cs.
png'"><img src="images/cs.
png" height="25px" name="cs" border="0" width="237px" alt="Counter Strike Guides and Tutorials" /></a>
</div> <!--end of cs-->
<div id="matches"> <!--start of matches-->
<a href="matches.
html" onmouseover="document.matches.src='matches2.
png'" onmouseout="document.matches.src='matches.
png'"><i mg src="images/matches.
png" name="matches" border="0" height="25px" width="80px" alt="Matches" /></a>
</div> <!--end of matches-->
<div id="files"> <!--start of files-->
<a href="files.
html" onmouseover="document.files.src='files2.
png'" onmouseout="document.files.src='files.
png'"><img src="images/files.
png" name="files" border="0" height="25px" width="76px" alt="Files" /></a>
</div> <!--end of files-->
<div id="links"> <!--start of links-->
<a href="links.
html" onmouseover="document.links.src='links2.
png'" onmouseout="document.links.src='links.
png'"><img src="images/links.
png" name ="links" border="0" height="25px" width="99px" alt="Links" /></a>
</div> <!--end of links-->
</div> <!--end of nav-->
<div id="barbottom"> <!--start of barbottom-->
<img src="images/pagebar.
png" height="16px" width="748px" alt="" />
</div> <!--end of barbottom-->
<div id="mcontent">
<div id="content"> <!--start of content-->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
nec, venenatis ut, massa. Vestibulum nisl risus, sodales et,
imperdiet et, ultricies at, ante. Phasellus leo justo, hendrerit non,
fringilla sed, egestas nec, tellus. Integer arcu augue, imperdiet ac,
fringilla ut, varius ut, dolor. Cras hendrerit massa in lacus. Aliquam e
get mauris sed sem tempus ultrices. Nulla ut nibh. Cras sagittis nibh et
sapien. Morbi sem elit, condimentum eu, varius eget, malesuada eu, libero.
Etiam posuere porttitor justo. Suspendisse eget diam vel lorem scelerisque
rhoncus. Cras sit amet ante.
m ipsum dolor sit amet, consectetuer adipiscing elit.
nec, venenatis ut, massa. Vestibulum nisl risus, sodales et,
imperdiet et, ultricies at, ante. Phasellus leo justo, hendrerit non,
fringilla sed, egestas nec, tellus. Integer arcu augue, imperdiet ac,
fringilla ut, varius ut, dolor. Cras hendrerit massa in lacus. Aliquam e
get mauris sed sem tempus ultrices. Nulla ut nibh. Cras sagittis nibh et
sapien. Morbi sem elit, condimentum eu, varius eget, malesuada eu, libero.
Etiam posuere porttitor justo. Suspendisse eget diam vel lorem scelerisque
rhoncus. Cras sit amet ante.
m ipsum dolor sit amet, consectetuer adipiscing elit.
nec, venenatis ut, massa. Vestibulum nisl risus, sodales et,
imperdiet et, ultricies at, ante. Phasellus leo justo, hendrerit non,
fringilla sed, egestas nec, tellus. Integer arcu augue, imperdiet ac,
fringilla ut, varius ut, dolor. Cras hendrerit massa in lacus. Aliquam e
get mauris sed sem tempus ultrices. Nulla ut nibh. Cras sagittis nibh et
sapien. Morbi sem elit, condimentum eu, varius eget, malesuada eu, libero.
Etiam posuere porttitor justo. Suspendisse eget diam vel lorem scelerisque
rhoncus. Cras sit amet ante.
</div> <!--end of content-->
</div> <!--start of mcontent-->
<div id="barlast"> <!--start of barlast-->
<img src="images/barlast.
png" width="748px" height="33px" />
</div> <!--end of barlast div-->
</div> <!--end of maincontainer div-->
</body>
</
html>