Problem with IE , Firefox displays website fine (blank space issue)

eksquall · #1 (**permalink**) Jul 29th, 2006, 13:47

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"> 
<div id="borderleft"> 
</div> 

<div id="bartop">
<img src="images/bartop.png" height="24px" alt="" />
</div>
<div id="borderright"> 
</div> 

<div id="logo"> 
<img src="http://h1.ripway.com/.:{EK}:.%20Squall/logo.gif" height="152px" width="152px" alt="Team Ecstatic Killers Logo" />
</div>

<div id="nav"> 

<div id="filler1"> 
<img src="images/fill.png" height="25px" width="3px" alt="" />
</div> 

<div id="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> 

<div id="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> 

<div id="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> 

<div id="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> 

<div id="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> 

<div id="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> 

<div id="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> 

</div> 

<div id="barbottom"> 
<img src="images/pagebar.png" height="16px" width="748px" alt="" />
</div> 
<div id="mcontent">
<div id="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> 
</div> 

<div id="barlast"> 
<img src="images/barlast.png" width="748px" height="33px" />
</div> 

</div> 
</body>
</html>

sypher · #2 (**permalink**) Jul 29th, 2006, 15:33

Try adding,
padding:0

eksquall · #3 (**permalink**) Jul 29th, 2006, 16:26

nope,added 0 padding and ie still leaves space.

ukgeoff · #4 (**permalink**) Jul 29th, 2006, 17:10

I think the problem is with #mcontent.

If you lokk at the site in IE, there is no blue border, just a blue line at the top of the div. IE doesn't understand the height: auto instruction.

eksquall · #5 (**permalink**) Jul 29th, 2006, 17:36

i took out height:auto but the problem still exists

Legacy_Staff · #6 (**permalink**) Jul 29th, 2006, 17:44

off topic but, your text would look better on top of the rain effect and the whole thing would be better if you could reduce the file size.

ukgeoff · #7 (**permalink**) Jul 29th, 2006, 17:52

It's still there in the version I'm looking at. Take it out and leave it out otherwise we can't see whats going on.

BTW I don't see the header image in Firefox.

Also as you are supposed to be coding to xhtml standards, remove all the 'px' from width and height measurements.

You appear to be reusing anchor names which is not allowed.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Blank Space between 2 rows	JunkFood	Web Page Design	1	Mar 26th, 2008 22:33
Forum text editor issue with IE.Fine in FF.	alicanteman	Web Page Design	0	Mar 2nd, 2008 21:38
Displays wrong in Firefox	JustinStudios	Web Page Design	7	Jun 28th, 2007 19:56
Displays wrongly in Firefox?	spon	Web Page Design	5	Feb 15th, 2007 17:19
designed a website in CSS but displays differently in other browsers	skyfire400	Web Page Design	8	Jan 25th, 2006 11:53

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Problem with IE , Firefox displays website fine (blank space issue)