CSS - Mysterious White Bar Above Page?

I have a region with a div, an image and another div stacked vertically. For some reason, there are a few pixels of blank space between the image and the bottom div.

http://www.brucethorn.com/index.php...maritime-sunday

On another page, I have regions with a "line-height + vertical-align:middle" centering of an image that make up thumb nails. There too is a few pixels of blank space, but at the top and images, pushing them down and slightly outside of the div that contains each of them.
http://www.brucethorn.com/index.php/paintings

I suspect these are the same problem, but I could be wrong.
The issue is most visable in FF, and noticable in Opera. I only see something sporadic for the second occurence in IE

Code:

body				{background-color:#999999; margin:0px; padding:0px; border:0px; text-align:center; font-family:"Courier New", Courier, mono;}
h1.header			{height:16px; width:800px; _width:776px; font-size:100%; font-weight:bold; margin:0px 0px 0px 24px; text-align:left; background-color:#333333;}
h2.header			{margin:0px; font-size:90%; font-weight:bold;}
div					{text-align:left;}
h2.infoleft			{text-align:left; height:16px; width:576px; font-size:90%; margin:0px 0px 0px 24px; _margin:0px 0px 0px 12px;float:left;}
h2.inforight		{text-align:right; height:16px; width:176px; font-size:90%; margin:0px 24px 0px 0px; _margin:0px 0px 0px 0px;float:left;}

div.black			{background-color:#000000; color:#999999;}
div.block			{margin:8px 24px 8px 24px; text-align:justify; font-size:90%;}
div.block2			{margin:8px 0px 8px 12px; _margin:0px 0px 0px 4px;}
div.block3			{margin:8px 0px 0px 12px;}

img					{border:0px; margin:0px; padding:0px;}
img.left			{float:left;}
img.right			{float:right;}

div.bar				{height:16px; width:auto; text-align:center;}
div.title			{height:48px; width:800px; margin:auto;}
div.content			{height:392px; width:800px; margin:auto; text-align:center;}

div.subbar			{height:16px; width:800px; background-color:#333333;}
div.menu			{height:18px; width:480px; float:left; margin:30px 0px 0px 20px;}
div.copyright		{height:16px; width:800px; margin:auto; text-align:right; font-weight:bold; font-size:75%;}
div.scroll			{height:344px; width:800px; margin:8px 0px 0px 0px; overflow:auto;}

div.filmunit		{height:128px; width:128px; border:4px; border-style:solid; border-color:#000000; background-color:#999999; margin:8px; padding:0px; float:left; text-align:center; line-height:128px;}
img.filmimage		{vertical-align:middle;}

Um... OK so I wrote a post asking if anybody knew why something was displaying incorrectly on my site, but due to forum rules I wasn't allowed to include any links. So how can I show you the problem if I can't show you? Also, the link saying "see forum rules for more information" didn't have any more information. Like, how many posts until I can ask for help and actually show what the problem is?

I just don't understand IE... something that should work just doesnt, and then it works fine on another page.... for example...

Scroll Over The Staff Links at the very bottom

You will notice that the black background disappears when viewed in IE... but
take a look at the code isolated in IE

and it looks perfect...

Hi, folks. I'm having a curious problem with the navigation on my page. I'd like the nav and header to be all on the same line. It works when I just include the nav icons as images directly in the HTML. But when I make the nav icons into links, set each link to display:block, and give it the appropriate background-image, it puts all the icons on a new line. I'm not sure why. Any ideas?

You can see the page with the problem and the effect I'm trying to achieve at these two TinyURLs:

Problem: TinyURL dotcomslash a8qnky
Working: TinyURL dotcomslash 8tj29l

(The HTML validates, and the CSS validates except for the IE PNG transparency fix. I'm still experiencing this problem without that fix in place.)

Hi folks, my website section "www(dot)mail(dot)tssma(dot)net" has an extra blue bar at the bottom of the page even though i specifically set it to 900 with the following css. I actually dont know why its blue either.


Code:

body
{
   background-image: url('http://www.tssma.net/templates/renrentemplate/images/Page-BgSimpleGradient.jpg');
	top:0;
	width: 100%;
	height: 900px; 

Not only that i cant seem to change the Username and Password input which is currently grey, to black using the css.

Help will be greatly appreciated

EDIT: Hahah yay, i somehow got rid of the bar on the bottom just need help with the grey input fonts.

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

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>

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'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>

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.

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