CSS - Blanks Space In Css Need Help

Hi everyone.

I have a header image and directly below it the div that holds my navigation. In FF it works great, but in IE I get about a 5px space inbetween the header image and the navigation div. The navigation div is colored so it's really easy to tell where it stops and starts in IE.

Here's my CSS code:
Code:

body {
background-image: url(images/bgshadow.gif);
background-repeat: repeat-y;
background-position: 50% 0;
text-align: center;
margin: 0 0;
padding: 0 0;
}

#content {
width: 738px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0 0;
vertical-align: top;
}

#header {
width: 738px;
margin: 0 0;
padding: 0 0;
}

#nav {
width: 738px;
height: 25px;
margin: 0 0;
padding: 0 0;
background-color: #86462F;
vertical-align: top;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
color: #fff;
}

#nav ul {
width: auto;
float: right;
margin: 5px 0 0 0;
padding: 0 0;
}

#nav ul li {
margin: 0 25px 0 0;
padding: 0 0;
list-style-type: none;
display: inline;
}

and my markup:

Code:

<div id="content">
<div id="header">
<img src="images/header.jpg" width="738" height="100" /></div>
<div id="nav">
<ul>
<li>Home</li>
<li>Register</li>
<li>Go Play!</li>
</ul>
</div>

I've tested the white-space bug in windows IE (taking out all of the white-space in the markup) but that only had a marginal effect on the list.

Does anyone have any ideas?

Thanks,

-Brian

I have a couple of divs at the very top of my page spanning the width of the page. In IE-8 the page is displayed as I would like, with no spacing at the top margin above the first div. In FF, there is a giant space about 50 px high. I need to get rid of this space. Below is my css for the top-most div, body, and the html... any ideas?
Code:

body {
    margin-top: 0px;
    font-family: Arial,Verdana,Helvetica;
    font-size: 12px;
}

div#top {
    margin-top: 0px;    
    float: left;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    width: 100%;
    height: 42px;
}

<div id="top"></div>

<div style="margin-bottom:40px">
    <script type="text/javascript">javascript menu code</script>
</div>

Hi all, after my last query it was suggested that my use of absolute positioning for every element was not necessary.
I should go with the flow.
So I copied a basic page structure and twiddled a little.

Here is the result so far
html link

css link

A couple of questions.
1. Would you say I'm on the right track, or should I be looking at a different style structure?
2. The page appears in ie to have gaps around the elements.
In Mozilla it looks like I hoped it would look.
How to close up gaps in ie. I'm trying padding, margin, negative values etc, Checking in the morning in hope of miraculous fix.
No luck so far. Any help, advice appreciated.
Thanks Solar..

I'm working on a web site that has a jFlow slideshow (not implemented just yet) and I was mocking up a page with just a plain img in its place. When the page is viewed in FF 3.5, there is extra space to the right and bottom of the image. However, it shows as expected in IE8. I can't figure this out for the life of me.

If I "use border box model" from the Google Web Developer toolbar in FF, it shows as desired as well.

Here's a link to the file:
http://www.websimage.com/3238/index2.html

I've been trying to figure this out for a while now and I'm getting nowhere but frustrated, so any help you could provide would be *greatly* appreciated.

EDIT: I've found some information regarding box-models, and have applied the -moz-box-model: border-box; which seems to have eliminated the additional space within the gray div...however, there is an additional 10px of unwanted padding on the right & left of it now. I can live with this, but I don't want to if I don't have to.

Edit #2: If I take out the margin-left: auto; and margin-right: auto; (to center it) the extraneous padding is not on the left, but is added to the extraneous padding on the right. All the math adds up when it comes to the widths and padding specified for the respective "wrappers" so I'm at a loss as to what's causing this.

default template from DW.
I get these white gaps and cant get rid of them.
Going mad.
Any advice for a newbie appreciated.

Code and pic...

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" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
.oneColFixCtrHdr #container {
	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColFixCtrHdr #header {
	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
	background-color: #FF9933;
}
.oneColFixCtrHdr #header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}
.oneColFixCtrHdr #mainContent {
	padding: 0 20px;
	background-color: #00CCCC;
}
.oneColFixCtrHdr #footer {
	padding: 0 10px;
	background-color: #FF0000;
}
.oneColFixCtrHdr #footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
-->
</style>
</head>

<body class="oneColFixCtrHdr">

<div id="container">
  <div id="header">
    <h1>Header</h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1> Main Content </h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at,  odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce  varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id,  libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat  feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut,  sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh.  Donec nec libero.</p>
    <h2>H2 level heading </h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
	<!-- end #mainContent --></div>
  <div id="footer">
    <p>Footer</p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

I'm having problems with a web page not viewing correctly in IE7. Here is a link to the page:

test(dot)phoenixit(dot)com(dot)au/GBDGP/index(dot)asp

The left and right columns should be level (top) with the centre content area. Any help on this would be greatly appreciated. Cheers

So I am trying to move from designing in <tables> and move on to the beauty of the CSS box-model design. I have been inspired by one of the ZenGarden designs and wanted to see if I could try and duplicate it's flow. I am running into a problem. I have created the outer box "#mainBox" and nested within this I have a child "#pageHeader." Problem is that there is this big amount of space (that is present in both IE6 AND FireFox 1.0) at the bottom of "#pageHeader." See the attached pic for the exact detail. Here is my code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html><head><title>The Shalom Foundation</title>

<style type="text/css">
<!--
	body {
		text-align:center;
		background-color:#666666;
		margin:0 0 50px 0; /* top right bottom left */
		}
	p{
		padding:0;
		margin:0;
		text-align:justify;
		}
			
	#mainBox {
		float:right;
		margin:9px 12px 0 0;
		padding:0px;
		width:733px;
		text-align:left;
		background-color:#999999;
		}
	#pageHeader{
		background: url(images/layout/header.jpg) no-repeat top left;
		padding:0;
		margin:0;
		text-indent: -15000px;
		height: 290px;
		overflow: hidden;
		}
	#nav{
		position:absolute;
		right:100px;
		margin:0;
		background: url(images/layout/menu.jpg) no-repeat top left;
		padding:0;
		margin:0;
		width:136px;
		height: 302px;
		overflow: hidden;
		}
-->
</style>
</head>
<body>

<div id="mainBox">
	<div id="pageHeader">The Shalom Foundation</div>
	<div id="nav">Nav</div>
	<div id="contentHdr"><table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td valign="middle"><img src="images/layout/hdr_about_us.gif"></td></tr></table></div>
	<div id="content"><p>Magnus es, domine, et laudabilis valde: magna virtus tua, et sapientiae tuae non est numerus. et laudare te vult homo, aliqua
	portio creaturae tuae, et homo circumferens mortalitem suam, circumferens testimonium peccati sui et testimonium, quia superbis resistis: et tamen
	laudare te vult homo, aliqua portio creaturae tuae.tu excitas, ut laudare te delectet, quia fecisti nos ad te et inquietum est cor nostrum, donec
	requiescat in te. da mihi, domine, scire et intellegere, utrum sit prius invocare te an laudare te, et scire te prius sit an invocare te. sed quis te
	invocat nesciens te? aliud enim pro alio potest invocare nesciens. an potius invocaris, ut sciaris? quomodo autem invocabunt, in quem non crediderunt?
	aut quomodo credent sine praedicante? et laudabunt dominum qui requirunt eum. quaerentes enim inveniunt eum et invenientes laudabunt eum. quaeram te,
	domine, invocans te, et invocem te credens in te: praedicatus enim es nobis. invocat te, domine, fides mea, quam dedisti mihi, quam inspirasti mihi
	per humanitatem filii tui, per ministerium praedicatoris tui.</p></div>
	<div id="rightNav">rightNav</div>
	<div id="pageFooter">pageFooter</div>
</div>

</body>
</html>

Thanks in advanced for any help!

Hey guys!


My website looks quite good, except for the footer when viewed on IE 6, 7, and 8. The problem is that the footer doesn't go all the way down to the bottom of page, rather leaving a space of about 5 pixels vertically so it doesn't look good. How do I get the footer to go and stay all the way down the page in IE? The footer is only within the <body> div, which has the property: margin: 0. The footer div has the following properties set:

.footer {
background:#6CBDF0;
clear: both;
height:45px;
padding-top:5px;
}

So is there any way I could make changes to these elements so that the footer wouldn't leave that annoying white space below it?

Thank you very much!

PS. I've tried solving this for well over an hour now...

Hi all,
Great forum
page with problem,
good in firefox, bad in ie,
http://www.central12.com/photosmain1.htm

The images as displayed in ie appear with a small gap at the bottom of the picture.

I have condensed the code, can't figure it, but using lists to layout images is new to me.
Would have used individual divs previously, but have seen this technique used and it seems better, less code.
I think i'm just missing a simple fix, as images and boxes are set to the same dimensions.
The code in the example differs from the code on the uploaded page, been on it for a week still trying to suss it.

HTML: Code:

<link href="test.css" rel="stylesheet" type="text/css" />


</head>

<body>

<div id="mainpic1" class="big4"></div>

<div id="sidepic1">
<ul>

  <li class="piccys1"><a href=""><img alt="British Monuments" title="British Monuments" src="picsthums/castlehill.jpg" width="95" height="80" /></a></li>

  <li class="piccys1"><a href="photos.htm"><img alt="Canada" title="Canada" src="picsthums/canlake.jpg" width="95" height="80" /></a></li>

  <li class="piccys1"><a href=""><img alt="Plants/Flowers" title="Plants/Flowers" src="picsthums/portplant.jpg" width="95" height="80" /></a></li>

  <li class="piccys1"><a href=""><img alt="France" title="France" src="picsthums/francechurch.jpg" width="95" height="80" /></a></li>

  <li class="piccys1"><a href=""><img alt="Ievissa" title="Ievissa" src="picsthums/rockyibiza.jpg" width="95" height="80" /></a></li>

</ul></div>

<div id="sidepic2">
<ul>

  <li class="piccys"><a href=""><img alt="Sunsets" title="Sunsets" src="picsthums/safricasun.jpg" width="95" height="80" /></a></li>

  <li class="piccys"><a href=""><img alt="Architecture" title="Architecture" src="picsthums/majorchurch.jpg" width="95" height="80" /></a></li>

  <li class="piccys"><a href=""><img alt="Mountains" title="Mountains" src="picsthums/olympos.jpg" width="95" height="80" /></a></li>

  <li class="piccys"><a href=""><img alt="British Countryside" title="British Countryside" src="picsthums/harbscot.jpg" width="95" height="80" /></a></li>

  <li class="piccys"><a href=""><img alt="Ancient" title="Ancient" src="picsthums/sphinxthum.jpg" width="95" height="80" /></a></li>

</ul></div>




</body>

</html>

CSS: Code:

/*Main styles----*/

body { 
margin: 0px; 
padding: 5px 0px 5px 0px;
background-attachment: fixed;
background-color:#000; }

img{
	border: 0 none;
	}

#mainpic1 {
 width: 479px; 
 height: 323px;
 margin:24px 0 15px 10px; 
 float:left; }

li.piccys, ul.piccys {
  float:right;
  width:95px;
  height:80px;
  margin:9px 0 0 5px;
  padding:0px;
  list-style:none;
  border:2px solid #fff; }

li.piccys1, li.piccys1 {
  float:right;
  width:95px;
  height:80px;
  margin-top:9px;
  margin-right:5px;
  padding:0px;
  list-style:none;
  border:2px solid #fff; }

#sidepic1 {
 width: 100px; 
 height: 480px;
 margin-top:15px;
 margin-right:5px;  
 float:right; }

#sidepic2 {
 width: 100px; 
 height: 480px;
 margin-top:15px;
 margin-right:35px;
 margin-left:0;  
 float:right; }

Thanks for your time,
I expect there are loads of ways I could do it better, your advise is appreciated.
Paul

Hi;

I am trying to get rid off white space from the bottom of the navigate bar, and tried with height=23px for th or td, but they don't not work, could anyone help me, please.

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" />
<title>Yourheadstone.com</title>
<style type="text/css">

html head title{
  border:0;
  padding:0;
  margin:0;
}

body{
  padding:0;
  border:0;
  background-color:#3399FF; 
  margin:0;
}

table tr td{
  border: 1px solid #000000;
}

table{
 width:1024px;
 height:25px;
 padding:0;
 border:2px solid #000000;
 margin-top:5%;
 margin-right:auto;
 margin-bottom:auto;
 margin-left:auto;
 background-color: #E5FFFF;

}

tr td{
  padding:0;
  margin:0;
}


#nav {
  width: 100%;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc;


 }
#nav li {
  float: right; 
  
}
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc;


 }
#nav li a:hover {
  color: #c00;
  background-color: #fff; }


</style>
</head>

<body>

<table>

 <tr>

   <td>
     <ul id="nav">
       <li><a href="#">About Us</a></li>
       <li><a href="uploadform.php">FAQs</a></li>
       <li><a href="#">Contact</a></li>
       <li><a href="#">Headstones</a></li>
       <li><a href="#">Home</a></li>
     </ul>
    </td>
 </tr>

</table>
</body>
</html>

Hello, im working on styling an unordered list into a file tree. So far, so good.


However, do you see that space that is showing in between each <li>, between the T (elbow2.gif) image, its very unwanted.

Code:

/* -- FILE BROWSER -- */
			
			#browseFiles {
				padding: 0 0 0 20px;/* 000pix handles indent */
			}
			#browseFiles ul {
				font: 10px sans-serif;
				color: #000;
				list-style:none;
				margin: 0;
				padding: 0;				
			}
			#browseFiles li {
				/*display:compact;
				height: 18px;*/
				padding: 0;
				margin: 0;
			}
			#browseFiles .fileDiv {
				height: 18px;
				background: url(images/elbow2.gif) no-repeat scroll 0 0;
			}
			#browseFiles .fileLink {
				padding: 0 0 0 13px;
				margin: 3px 0 0 0;
			}
			#browseFiles .dir {
				list-style:none;
				font: bold 10px sans-serif;
				margin:0;
				padding:0;
			}
			#browseFiles .file {
				padding: 0 0 0 3px;
				margin:0;
			}

Heres the html

Code:

<div id='browseFiles'>
  <ul>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li>
    <li class='file'>
      <div class='fileDiv'>
        <a class='fileLink'>
          <img class'fileIcon' src='images/file.gif' />
        </a>
      </div>
    </li> 
  </ul>
</div>

Thank you for the help in advanced.

At some point, something I did caused my website to have around 400 pixels of white space above it. My site is very simple but I can't seem to figure out the cause. I'm hoping someone can take a look and figure it out.

Thanks for any help,

Chris

HTML CODE:
http://www.bottomtimedesign.com

CSS CODE:
Code:

@charset "utf-8";
/* CSS Document */

body {
	background-color: #FFFFFF;
	text-align: center;
}

/*defines web page dimensions and centers page */
#pagedimensions {
	background-color: #DCDBC9;
	border: none;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	width: 1024px;
	height: 768px;
	text-align: left;
}

#mask {
	position: absolute;
	left: 575px;
	top: -45px;
}

#sign {
	margin-left: 50px;
	float: left;
	margin-right: 50px;
}
	
#snorkel {
	position: absolute;
	top: 390px;
	left: -39px;
}


#header {
	float: right;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-top: 10px;
}


#content {
	margin-left: 50px;
	margin-right: 155px;
	position: static;
	margin-top: 300px;
}

Do ids take up space on a page if there is no content within them and no size specified for them, what about classes, paragraphs?

Something like so:

Code:

<div id="one"></div> or

<div class="two></div>

<p></p>

<p class ="three"></p>

etc...

In other words, would there be a obvious space where one of these styling markers was placed on the page?

I have layed out the page but cannot seem to get the hang of the floats and positioning....!!

If anyone can give me a hint how I can position my text in the main white space I would be so grateful as I am confusing myself as to what i am doing wrong!!

the site is hosted at www dot getatrader dot com

PLEASE HELP!!

here is the CSS:

Code:

body {
  background: white;
  font-size: smaller;
  font-weight: bold;
  font-family: Verdana,Arial,Helvetica,sans-serif;
}

#topnav {
 float:left;
 position: absolute;
}

#topnav img{
  display: block;
  border: none;
}

#header{
  position: relative;
  text-align: right;
  border: solid thin #999999;
  margin: 0px 0px 0px 0px;
  background: #336699;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  color: #ffffff;
  height: 155px;
}

#headerright{
    position: relative;
    top: 20px;
    right: 10px;
}

#headerright li {         
  display: inline;
  list-style: none;
  padding: 40px;
}

#headerright img {
  border: none;
}

#headerright a:link {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:visited {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:hover {
  color: #ffffff;
  text-decoration: none;
}

#headerright a:active {
  color: #ffffff;
  text-decoration: none;
}

h1 {
  
}


h2 {
  width: 200px;
  text-align: center;
  color: white;
  background-color: black;
 font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: large;
  font-weight: bold;

}

#container {
width: 956px;
padding: 10px;
margin: 0px auto 0px auto;
height: auto;
text-align: left;
border: 1px solid #ddd;
}


#button {
position: relative;
display: block;
width: 152px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: Verdana,Arial,Helvetica,sans-serif;
background-color: #336699;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
height: 500px;
}

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

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

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

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

#maintext {
 position: absolute;
 float: left;
}

#footer
{
  color: white;
  background-color:#336699;
  font-size: small;
  font-family: Verdana,Arial,Helvetica,sans-serif;
  margin: 0px 0px 0px 0px;
}