CSS - Print.css Issues, Large White Space Gaps

I have a data table within my content div. It appears fine on my screen in several browsers, however, coworkers have a large (full screen) of white space where the table should be. They have to scroll down a full screen to get to the table.

I have everything on the site set up using CSS. The table contains the dates, times and municipalities for Trick or Treat events.

I have a vertical-align:top on the table.

Here is the CSS:
Code:

table#halloween {
    margin-left: 2px;
	text-align:center; margin-right:auto; width:100%;
	vertical-align:top;
	font-size:12px;
	padding: 3px;
	width:100%;
	border: solid #000000;
	}	
	
td.halloweencell {
	border-color: #000; 
	border-style: solid;
	}

Here is a sample of the HTML :
Code:

 <table width="100%"  id="halloween" summary="Table of municipalities, date of trick or treat and times for trick or treat">
                       <tr>
                         <th width="50%"  class="rowcoloryellow"><strong>MUNICIPALITY</strong></th>
                         <th width="20%"  class="rowcoloryellow"><strong>DATE</strong></th>
                         <th width="30%"  class="rowcoloryellow"><strong>HOURS</strong></th>
                       </tr>
                       <tr>
                         <td colspan="3">&nbsp;</td>
                       </tr>
                       <tr>
                         <td class="halloweencell" width="50%">City of Hartford </td>
                         <td class="halloweencell" width="20%">October 30th  </td>
                         <td class="halloweencell" width="30%">4:00 p.m. - 6:00 p.m.   </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">City of West Bend </td>
                      <td class="rowcolororange">October 30th </td>
                         <td class="rowcolororange">4:00 p.m.- 6:00 p.m. </td>
                       </tr>
                       <tr>
                        <td class="halloweencell">Town of Addison </td>
                         <td class="halloweencell">October 30th </td>
                         <td class="halloweencell">3:00 p.m. - 6:00 p.m. </td>
                       </tr>
                       <tr>
                         <td class="rowcolororange">Town of Barton </td>
                         <td class="rowcolororange">October 30th  </td>
                         <td class="rowcolororange">4:00 p.m. - 6:00 p.m.  </td>
                       </tr>
                       <tr>
                         <td class="halloweencell">Town of Erin </td>
                         <td class="halloweencell">No Set Schedule </td>
                         <td class="halloweencell">&nbsp;</td>
                       </tr>
</table>

It is located at: www.washingtoncountysheriffwi.org/halloween.php

Any suggestions?

Thanks!

Helen

Ok guys, I'm hoping someone can help me. I am a complete newbie to CSS and web site construction in general. I have a left vertical navigation bar made up of graphics in a div tag that is set to float on the left. I'm having difficulty with the graphics, they have white spaces in between them when viewed in IE. They are supposed to butt up against one another. I have tried setting the margin and padding in that div to 0. I have also seen in other forums where the <li> tag can be placed on the previous line to fix this problem in IE. I haven't even viewed the page on any other browsers yet, can someone help me please?

Thanks so much!
vonatah

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;
}

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>

Hi,

I'm working on a site in Css and it all works fine in Firefox. But in IE7 there is a lot of extra white space between elements like after the h2 heads.

Anyone know what i'm doing wrong?
Here's the code.

CSS
Code:

body {
	background: #1d1d1d url(../g/header_bg.gif); 
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font-family:arial;
	font-size:11px;
	line-height:1;
 	font-weight: normal;
  text-decoration: none;
	color:#575859;
	text-align: left; 
}
#container {
	width: 992px;
	margin: 0px auto;
	text-align: left;
}
ul {
list-style:none;
padding: 0px;
margin: 0px;
}
input, textarea{
font-family:Tahoma;
font-size:11px;
color:#000000;
vertical-align:middle;
font-weight:normal;
background:#FFFFFF;
text-align:left;
}
.formfield {
width:271px;
height:auto;
color:#000000;
background-color:#FFFFFF;
height:18px;
margin-right:8px;
border: solid 1px #404040;
}

#header {
	height: 63px;
}
.menu {
	float:left;
	padding-top:25px;
}
.menu li {
	background:url("../g/menu_sep.gif") right 3px no-repeat;
	padding:0px 10px 0px 15px;
	float:left;
}
.menu li a {
	background:url("../g/menu_arrow.gif") 0 6px no-repeat;
	color:#181818; font-weight:bold;
	padding:0px 10px 0px 15px; 
	text-decoration:none;
}
.menu li a:hover {
	text-decoration:underline;
}
.search {
	float:right;
	background:url("../g/search_bg.gif") 0 0 no-repeat;
	width:357px; 
	height:43px;
	padding:12px 0px 0px 10px;
	margin-top:10px;
}
h1.logo {
	width: 203px;
	height: 109px;  
	background: url("../g/title.gif");  
	text-indent: -9999px;  
	margin-left: 10px;
}

#left_container {
	float: left;
	width: 200px;
	background-color:#000000;
	margin-right: 20px;
	margin-left: 10px;
}

#middle_container {
	float: left;
}
#right_container {
	float: right;
}
.left_top {
	width:200px;
	height:12px;
	font-size:0em;
	background:url("../g/left_top_bg.gif");
}
.left_bottom {
	width:200px;
	height:12px;
	font-size:0em;
	background:url("../g/left_bottom_bg.gif");
}
#left_container h2 {
font-size:1.01em;
line-height:1.5;
color:#85B102;
font-weight:bold;
text-transform:uppercase;
padding:0px 0 10px 0;
margin-left:20px;
}

#left_container ul { margin-left:20px;}
#left_container li { font-size:1.01em; line-height:1.5em; color:#707070;}
#left_container li a { font-size:1.01em; line-height:1.5em; color:#707070; text-decoration:none; background:url("../g/arrow.gif") no-repeat 0px 6px; padding:0 0 0 19px;}
#left_container li a:hover { text-decoration:underline;}

HTML
Code:

<html>
<head>
	<title>Test</title>
	<link type="text/css" href="x/style.css" rel="stylesheet"/>
</head>
<body>
	<div id="container">
		<div id="header">
			<div class="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Test2</a></li>
					<li><a href="#">Test3</a></li>
					<li><a href="#">Test4</a></li>
				</ul>
			</div>
			<div class="search">
				<form method="get" action="search.php">
				<input type="text" class="formfield" value=""><input class="submit" type="image" src="g/search.gif" value="submit">
				</form>
			</div>
		</div>
		<h1 class="logo">MyTitle</h1>
		<div id="left_container">
			<div class="left_top"></div>
   		<h2>Menu</h2>
			<ul>
       	<li><a href="#" title="home">Home</a></li>
    	 	<li><a href="#" title="home">Test2</a></li>
    	 	<li><a href="#" title="home">Test3</a></li>
    	 	<li><a href="#" title="home">Test4</a></li>
    	 	<li><a href="#" title="home">Test5</a></li>
    	 	<li><a href="#" title="home">Test6</a></li>
    	 	<li><a href="#" title="home">Test7</a></li>
	    </ul>
			<div class="left_bottom"></div>
		</div>
		<div id="middle_container">
			b
		</div>
		<div id="right_container">
			c
		</div>
	</div>
</body>
</html>

As a way to learn XHTML-Strict/CSS, I'm making a funny site with the goal of recruiting new people to be my friend. However, I can't seem to get rid of a horizontal bar of white space between the Title div and News & Content divs. I could fix it by making the News and Content positions absolute, but then I'd be unable to have a footer. Does anybody know why that white space exists, or better yet, how I can get rid of it? Site is http://www.kennygraham.net/index.html and CSS is http://www.kennygraham.net/perfect.css

Thanks in advance to anyone who can help.

I have 2 columns. The main one and the sidebar. The problem is that the sidebar extends down the page further then the main column. I am using a color in the background. The color does not extend all the way down. The main area stops about half way down the sidebar and just leaves white space there. The whole page is colored except for this square of white in the middle. Also if I extend the main area content to be longer then the sidebar then the sidebar will have white underneath it instead.

Hello Gents, I am trying to get ride of the white space above the menu and above the big sliding banner...Any pointers would be great. getyoursongsmixed.com/wordpress is my site

You guys rock thanks

any body know what i need to add to this CSS to get the 2px looking white space that sits to the left of each <li>?

Code:

<ul id="navlist">
<li><a href="index.html">Home</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
<li><a href="contact_us.html">Shipping Information</a></li>
<li><a href="contact_us.html">Return Policy</a></li>
<li style="border-right:none;"><a href="showcart.cfm">View Cart</a></li>
</ul>

Code:

#navlist li {
font-size: 12px;
font-family: Helvetica, Times, serif;
display: inline;
list-style-type: none;
padding-right: 10px;
padding-left: 10px;
border-right: 1px solid black;
background-color: #D5DED9;
}

I added a nav bar to my page. when I did so I now get a white space at the top of the page above the pictures I'm not sure why.

Here's a link the the page Dead Link(Link removed because it contained copyrighted content that was more than fair use would allow for. I don't want my friend getting in trouble)

any help would be appreciated.

Does anyone know how to assure that checkboxes and their labels stay together?

My situtation: I have several rows, each with several checkboxes. I want to assure that if a line wraps, each checkbox stays with its label (either each stay on the same line, or each move to the next, but never leave checkbox on one line and label on the next).

I have tried several varients on:
<span style= "whitespace: nowrap;". .... checkbox and label description... </span>
or
<label style= "whitespace: nowrap;". .... checkbox and label description... </label>

even used both... have also tried a non-breaking space between label and checkbox control.

<span> works on mac with Netscape, IE, Opera or Safari ... but alas it does not work on windows with IE 5.5 [unfortunately it acts as if 'nowrap' applies to the whole line, forcing viewers to scroll right to see all options]

I can find documentation that says "white-space" can apply to <span> or <label>, and also documentation that says it can't. I guess the latter could explain the problem.

But does anyone know how to keep the label and checkbox together

thanx

Misalignment - white space in IE 8
Hi
Not able to find the cause of the spaces in IE8. works perfect in FF

http://tinyurl.com/26resg9

The same code on different website works fine in both IE8 and FF
http://tinyurl.com/y9hvmmw

I know the problem is somewhere here in main.css file
Code:

.content-wrap{
	background:url(watermark.jpg) no-repeat;
	width:1000px;
	margin:0 10px;
	
	padding:0;
}

Can someone help?

I read several threads on devshed, but cannot seem to resolve the issue.

I am trying to line up my text and images within a div or span tag with the table just below it such that there is no white space in between. It works in Firefox.

Link demonstrating problem in IE:
http://test.hmedicine.com/shopping/catalog/kits

CSS:
.tb{font: 8pt verdana;vertical-align:top;margin-top:0;margin-bottom:0;font-weight:bold}

HTML:
<span class="tb">&nbsp;Homeopathic Medicine Shop&nbsp;</span><a href="/shopping/catalog"><img src="/shopping/pics/topbar1shopping.gif" alt="shopping" border="0"></a><a href="/news/guide/guide.php"><img src="/shopping/pics/topbar2.gif" alt="guides" border="0"></a><a href="/shopping/service"><img src="/shopping/pics/topbar3.gif" alt="customer care" border="0"></a><a href="http://www.forum.hmedicine.com/index.php"><img src="/shopping/pics/topbar4.gif" alt="user forums" border="0"></a><br>
<table width="720" cellpadding="0" cellspacing="2" bgcolor="009999">

Thanks so much in advance. If it's hard to follow, i can post screenshots.