CSS - Lots Of Extra Space Where Containers Would Have Been?

For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this:

Code:

#container{
  width: 732px;
  margin: 0px auto;
}

Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7.

Thanks,
teamhonda81

I have an extra PHPNuke (Ravennuke 2.02) module for the start page. Several pieces of information are displayed in various cells of a table. I have a problem were there is some extra space at the beginning of a table that I cannot get rid of. I saved the output and uploaded he

http://www.linux-tutorial.info/index_test3.html

after the site title and before the tag line "The place where you learn Linux", there is a large space. In this example, the title is in a separate table, followed by a new table for the information blocks. If I put them in the same table the space appears before the title block. The relevant block of code looks like this:

Code:

<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
 <tr valign="top"> 
 <td class="welcome_title_box" valign="top" colspan="2"> 
 <div align="center" class="welcome_main_title"> 
 Welcome to the <br>Linux Knowledge Base and Tutorial</div> 
 </td></tr></table> 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr><td valign="top" width="50%"> 
 <span class="subtitle">"The place where you learn Linux"</span> 
 <br><br> 
 Looking for an in-depth and easy-to-understand introduction to Linux? 
 Then look no further! 
 <br> 
 We don\'t just show you how to execute a handful of commands and use a few utilities. The Linux Tutorial goes beyond the basics, providing you with the knowledge necessary to get the most out of your Linux system. 
 <br><br> 
 Jump right in by clicking 
 <a href="http://www.linux-tutorial.info/modules.php?name=MContent&pageid=224"> 
 here</A>. 
 </td>

If I removed the highlighted code, the space appears before the site title.

If I remove the whole DIV containing the title, I still have the space above the tag line. This says to me that it is not related to the division. It seems that this row or the table itself is pulling the formatting from somewhere else. That would be a logical consequence of the cascading aspect of CSS, but I do no see where it is gettign the space from. Admittedly I am not all that good with CSS/formatting, so it is possible (if not likely) that I overlooked something.

Note that in the index_test3.html, I close the table at the end of the first row (prior to the list of news and threads) then open a new table:

Code:

</table><table border="0" cellpadding="0" cellspacing="0" width="100%" >

If I change BGCOLOR for the first table and then change the line above to this:

Code:

</table>HERE<table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="RED">

The space is after the word "HERE".

If I remove this code, the extra space is right after the row/div with the site title and before the row with the tag-line.

This all make me think that the extra space is being added before the next table, as opposed to at the end of the previous table.

There are a number of posts in the CSS forum that I tried like changing the margin (style="margin: 0px"), but none of the solutions solved the problem. I have tried all sorts of combinations of spacing and alignment, but I cannot get rid of this space.

I have tried loaded the page with multiple browsers (Konqueror, FIrefox, IE 6) with the same results, so I do not think it is a browser specific issue.

Any and all input is greatly appreciated.

For some reason, I cannot for the life of me figure out why Firefox is adding space at the top of my page. I have a container div that contains my header, body, and footer. I have done this:

Code:

#container{
  width: 732px;
  margin: 0px auto;
}

Too me that should fix the issue. I even tried applying that code to the body{ ... } but that doesn't work either. Has anyone else gone through this before. There is no space in IE6 or IE7.

Thanks,
teamhonda81

Hi,

Can anyone please explain why the more text I add to the main content area 'full-size' div.... the more spacing gets added below it.

Is there a way to stop this?

example herel


Code:

/*begin normal CSS
----------------------------------------------------*/
body {
	text-align: center;
	background: #362f25;
	color: #333;
	font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif;
	
	}
	
	
#wrap {
	margin: 0 auto;
	width: 960px;
	text-align: left;
	background: #f8f4f2 url(images/bg-wrap.gif) repeat-y 0px 0px;
	padding-bottom: 5px;
	}



	



/*classes
----------------------------------------------------*/


.full-size {
	
	margin-left:20px;
	margin-top:20px;
	width: 700px;
	font: 12px;
	position:relative;
	left:180px;
	top:-370px;
	}
	




/*header
----------------------------------------------------*/
#header {
	height: 50px;
	background: #362f25;
	color: #d2cccb;
	font: 15px "Palatino Linotype", Arial, Helvetica, sans-serif;
	}







/* left nav menu
----------------------------------------------------*/

#navcontainer
{
width: 170px;
border-right: 1px solid #000;
padding: 0 0 0 0;
margin-bottom: 10px;
font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
background-color: #90bade;
color: #333;
position:relative;
left:0px;
top:-30px;
}

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

#navcontainer li
{
border-bottom: 1px solid #90bade;
margin: 0;
}

#navcontainer li a
{
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 15px solid #006865;
border-right: 10px solid #203654;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #navcontainer li a { width: auto; }

#navcontainer li a:hover
{
border-left: 15px solid #203654;
border-right: 10px solid #006865;
background-color: #2586d7;
color: #fff;
}

I am working on a site and have found a problem that I can't explain on my own. I would like someone to look at this site:

http://www.canada-training-group.ca

and tell me why there is extra space at the top in IE but not in Firefox.

Thanks,
Timmy-d

I've been trying to setup a basic template for a site. In firefox I got it looking pretty good, but in IE there seems to be about 3 pixels of extra space to the left of the header image.

The url is: http://igocity.aoeex.com/

If you look in firefox, you can see the black box where the login form is, and the banner image to the right of it are side-by-side with no space between them. This is what I want.

In IE, there is about 3 pixels of white space between the login box and the banner image. This causes the image to drop down below the login box instead of it being beside it normally. For now, I've expanded the width of the outer div so they are side by side, but with the space.

I can't figure out why this space is there, or how to get rid of it. Any suggestions?

The HTML for the header looks like so:
Code:

<div id="headerDiv">
	<div id="loginBox">
		<form method="post" action="/login.php">
			<input type="text" value="" class="txtUsername" name="txtUsername" /><br />
			<input type="password" value="" class="txtPassword" name="txtPassword" /><br />
			<a href="login_help.php" class="loginTroubleLink">>> login trouble?</a> <input type="submit" value="log in"  name="btnLogin" class="btnLogin"/>
		</form>
	</div><img src="images/road_trip_banner.jpg" width="540" height="80" id="headerBannerImage"/>
</div>

CSS can be seen at: http://igocity.aoeex.com/css/template_css.css

I'm having a weird quirk happening at the bottom of a page I am developing. There is extra space, maybe 80-100px of it, showing up at the bottom in my container div (which I have id'd as "reality"). Can anyone suggest what might be shoving all that extra space in there?

html page: http://www.iainhamp.com/reality/hyborianwar.html

css page:http://www.iainhamp.com/reality/reality_hyborian.css

Thanks for any help you can provide.

- iain

I have been testing with Opera, Mozilla & IE. I am using STRICT DTD, and I checked my CSS with w3.org validation checker, so I would think that Opera and Mozilla would be compliant, but they are the ones giving me problems.

I have table cells that only have images in them and they have extra padding, or margins at the bottom. WHY?!

I have removed all the padding and margins from everything in the rows and added then removed the heights of the cells - neither worked. I have checked my code more times than I can count - and it is right.

WHY IS MOZILLA AND OPERA ADDING EXTRA SPACE AT THE BOTTOM OF THE CELL?!?!?!?!?!?

Thanks for taking the time to read my question.

I have 16 pictures on my page. In FF I have no extra space under each picture and in IE6 I do. Why?

In IE you can see the container color (the non Orange colors) but in FF you don't.

I've tried a bunch of stuff but can't figure it out.


http://stuccotech.bravehost.com/

CSS:
Code:

html, body {
height: 100%; 
width: 100%;
margin: 0px;
padding: 0px;
background-color: #000000;
background-image:url(MainBackground.jpg);
background-repeat: no-repeat;
background-position: top center; 
}

.TheFrame {
height: 20px;
width: 20px;
background-color: white;
float: right;
}
  
.MainContainer {
width: 646px;
height: 549px;
background-color: #3f3f3f;
overflow: hidden;
padding: 0px;
margin: 0px auto;
background-image:url(BehindLogo.png);
background-repeat: no-repeat;
background-position: top left;
}

.LogoArea {
height: 200px;
width: 200px;
/*background-color: white;*/
float: left;
margin: 0px;
padding: 0px;
display: inline;
}

.Logo {
float: left;
height: 120px;
width: 240px;
padding: 0px;
margin: 0px 0px 0px 2px;
display: inline; 
background-image:url(LogoWithText.png);
background-repeat: no-repeat;
background-position: top left;
}

.NavBarMain {
background-color: #966200;
height: 120px;
width: 370px;
float: right;
margin-right: 20px;
margin-top: 10px;
padding: 0px;
display: inline;
}

.NavBarContent {
background-color: orange;
height: 90px;
width: 370px;
float: right;
margin: 0px;
margin: 30px 0px 0px 0px;
padding: 0px;
}

.TextBox1 {
float: left;
margin: 5px 0px 0px 10px;
padding: 5px;
width: 190px;
height: 305px;
overflow: hidden;
display: inline;
}

p.MainText {
color: white;
font-size: 14px;
}

p.MainText:first-line {
text-indent: 5px;
}

.ContentText {
color: white;
font-size: 14px;
}

.PortfolioHolder {
width: 414px;
height: 365px;
float: right;
margin: 25px 20px 0px 0px;
padding: 0px;
display: inline;
background-color: orange;
}

.MainPictureFrame {
width: 414px;
height: 318px;
float: right;
margin: 0px;
padding: 0px;
/*display: inline;*/
background-color: red;
}

.PortfolioPicture {
width: 414px;
height: 318px;
}

.PicInfoContainer {
float: left;
width: 414px;
height: 47px;
color: white;
font-size: 12px;
}

.SubPictureFrame {
width: 96px;
height: 72px;
margin: 10px 0px 0px 10px;
padding: 0px;
float: left;
background-color: yellow;
}

.SubPictureFrameFirstRowFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px;
float: left;
background-color: purple;
}			

.SubPictureFrameFirstRow {
width: 96px;
height: 72px;
padding: 0px;
margin: 10px 0px 0px 0px;
float: left;
background-color: blue;
}

.SubPictureFrameFirstColumn {
width: 96px;
height: 72px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: left;
background-color: aqua;
}

.BottomNavContainer {
width: 550px;
height: 14px;
float: right;
margin-right: 40px;
margin-top: 10px;  
}

.BottomNavHolder {
float: right;
}

.BottomNav {
font-size: 12px;
height: 14px;
margin-right: 20px;
float: left;
}

.PortfolioListContainer {
float: left;
width: 204px;
height: 250px;
overflow: auto;
display: inline;
background-color: #5f5f5f;
margin: 0px 0px 0px 5px;
padding: 0px;
border-top: 1px #ffffff solid;
}

.ListItemHome {
float: left;
width: 76px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px;
border-right: 4px solid white;
}

.ListItemBuilding {
float: left;
width: 110px;
height: 20px; 
padding: 0px 0px 0px 4px;
margin: 0px 0px 0px 80px;
border-left: 4px solid white;
display: inline;
}

.ButtonContainer {
float: left;
display: inline;
background-color: aqua;
width: 204px;
height: 30px;
padding: 0px;
margin: -5px 0px 0px 5px;
}

.HomesButton{
border-top-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right: 4px solid white;
width: 80px;
height: 30px;
margin: 0px;
float: left;
}

.CommercialButton{
border-width: 0px;
width: 120px;
height: 30px;
padding: 0px;
margin: 0px;
float: left;
}

a.BottomNav:link {
text-decoration: none;
color: #D3D3D3;
}

a.BottomNav:visited {
text-decoration: none;
color: gray;
}

a.BottomNav:hover {
text-decoration: underline;
color: white;
}

a.BottomNav:active {
text-decoration: none;
color: white;
}

a.ContentText:link {
text-decoration: none;
color: #D3D3D3;
}

a.ContentText:visited {
text-decoration: none;
color: gray;
}

a.ContentText:hover {
text-decoration: underline;
color: white;
}

a.ContentText:active {
text-decoration: none;
color: white;
}

a.ListItemHome:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemHome:hover {
text-decoration: underline;
color: white;
}

a.ListItemHome:active {
text-decoration: none;
color: white;
}

a.ListItemBuilding:link {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:visited {
text-decoration: none;
color: #D3D3D3;
}

a.ListItemBuilding:hover {
text-decoration: underline;
color: white;
}

a.ListItemBuilding:active {
text-decoration: none;
color: white;
}

Thanks,

Brad

I have something similar to the following:

<div id="outer">
<div id="inner">Stuff</div>
</div>

#inner {
top: -175px;
}

which lets me position background elements as needed so everything blends together well. The idea is that the outer layer background element needs to start lower than the inner layer and repeat until it contains the entire inner layer, and then stop.

However, since I shift the inner layer upwards 175px, it gets the top where it needs to be, but it seems like it leaves 175px of the outer background repeating at the bottom...I don't need this space at the bottom.

How can I remove it or make it disappear?

An old draft of the file can be seen at

Old Draft.

The outer layer is the "carpet" background that repeats down the side and fades off in each direction. It needs to start where it does so it doesn't overlap the faded walls (applied to body tag). However, I want the desk area starting where it is now rather than where the faded walls end (too low on the page), so I shifted it upwards... I want to get rid of all carpet below the desk area, but the outer div expanded to contain the inner div, then the inner div was shifted upwards out of the top of the outer div, but outer div bottom did not shift upwards as well.

I know it has to be a padding or margin issue, but I cannot figure out where it is coming from. I have spent several days going back to this and trying to look at it with fresh eyes with no luck.

I am sure it will be a 'duh' type of thing when I get a solution.

Here is the webpage: http://www.palmettobaydesigns.com/new/layout.html

I am getting extra space of about 10px it looks like between the white rounded top image that makes the top of my box and the div below it called .box - in ff4. In IE 8 I am getting about 1px space below the box.

Thanks in advance!

Simple layout but having issues with the left sidebar float aligning flush with the container next to it on top in IE. Works perfectly in FF of course.

Here is the link to the page: http://www.kofc2332.org/new_site/

All help/suggestions/guidance is appreciated.

I'm going through hell trying to make a site look the same in IE and Firefox. The biggest problem is the gaping spaces IE adds between elements. What is the best way to fix this?

Example at patrolmag.com/new.

Any advice or help would be most appreciated.

P.S. How the page looks in Firefox 3 is ideal. I just need to make at least IE7 come somewhere close to matching it.

Hello, i created a site called knowledgeocity.com and it looks fine in Firefox, but in IE7, there is extra space at the bottom between the logo on the right side and the footer, does anyone know how to fix that? I tried margin bottom, but did not work. thank you

Hi guys, I'm having a problem with spacing beneath my image. I have an image at the bottom of a div. When I change the display to block, the space below still remains. When I place the image as a background inside my div it doesn't display. Any help with either or both of these would be great. The page is located he

rhodyandcrystal.com/staging/party.html

The div on the right has an image as a bg and the div on the left has the image located at the bottom. I just did this so you could see both, and that they aren't working. Thanks again for any help!

Duke