CSS - Need Help Removing Whitespace In Ff3

http://josephman1988.tripod.com/

Test page.

In FF, the gap between the 2 horizontal lines at the bottom is more narrow then it is in IE.

Why? And how can i fix this?

Thanks for the help.

Joe.

Please see the screenshots below. Im using offsetTop + offsetHeight of the headings (Menu1, etc) to assign style.top to the sub menus. They appear when you mouseOver the headings. See how there is a pixel or two of whitespace in IE6 w/sp1? Why is that?
Any help would be greatly appreciated.

PS - I tried this on another PC with IE6 and sp2, and it was fine.

These are the style declarations:

Code:

.menuHeading{
	padding-left:3px;
	font-size: 8pt;
	font-weight: bold;
	background-color: #ffffff;
	color: #000000;
	cursor: default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;



}

.menuHeading_highlight{
	padding-left:3px;
	font-size:8pt;
	font-weight:bold;
	background-color:#fff392;
	color:#000000;
	cursor:default;
	position: relative;
	margin-bottom: 0px;
	border-width: 0px;
	border-style: none;


	
}

.subMenu{
	font-size:8pt;
	color:#cc9900;
	width: 200px;
	visibility:hidden;
	cursor:default;
	position: absolute;
	padding:0px;
	margin-top:0px;
	margin-left:0px
}

If I place an image in a <td> there will be a three or four pixel gap under the image and the end of the cell. The only way to avoid this is to do

Code:

<td><img></td>

instead of
Code:

<td>
    <img>
</td>

are there any other ways?

I am trying to create a personal website for employers. Already have the web domain and figure its a great way to brush up on everything.

I am trying to get rid of the whitespace that constantly surrounds my div or table tags. I know about background-fill but that only seems to work in the html style and with only 1 background.

This is what I want.

Instead, I keep getting this annoying whitespace around everything that I cannot get rid of.

How do I fix this?

I'm doing a new site with a 3col centered layout. On my left col i have 8 or 9 divs with an image in them. In IE it looks as desired but in *.MOZ browsers there is 2 or 3 pixels of space between each image.

Applying a bottom border to the image's containing div it shows the space is within the div and not between the divs.

Here is the Code

Code:

CSS
.left {
float:left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
width: 177px;    /*** Critical left col/divider dimension value ***/
margin-left: -176px;    /*** Critical left col/divider dimension value ***/
}

*>html .left {width:176px;}   /*** Fix only for IE/Mac ***/

.container-left {
width: 175px;    /*** Critical left col dimension value ***/
padding-bottom: 110px;   /*** To keep content from going underneath the AP bottom boxes ***/ 
}

.menu-main{
	margin-left:1px;
        border-bottom:1px solid black;

}


XHTML
<div class="left">
	<div class="container-left">
		<div class="menu-main"><img src="images/home_off.jpg" /></div>
		<div class="menu-main"><img src="images/awards_off.jpg" /></div>
		<div class="menu-main"><img src="images/designawards_off.jpg" /></div>
		<div class="menu-main"><img src="images/membership_off.jpg" /></div>
		<div class="menu-main"><img src="images/crewtraining_off.jpg" /></div>
		<div class="menu-main"><img src="images/events_off.jpg" /></div>
		<div class="menu-main"><img src="images/newsletter_off.jpg" /></div>
		<div class="menu-main"><img src="images/pressreleases_off.jpg" /></div>
		<div class="menu-main"><img src="images/contactus_off.jpg" /></div>
		</div>
	</div> <!-- end left div -->

Any suggestions?

The images are all 174px in width

I am getting some whitespace while viewing the css navigation on IE but the same thing works fine with firefox.

can anyone help me to solve this issue?

furthermore I need to have some gap (margin) between each menu but I am little bit confused. I tried to use both padding and margin but it's not working

link is
Code:

http://www.zipmonster.com/test

thanks in advance

Below is some code I scraped from a page in my application using firebug. The current code displays a series of row with what appears to be a blank row in between. I'm trying to figure out how I can reduce the vertical space. Thanks In Advance!

<tr>
<td class="PTSection">
<table class="PTSectionTable" cellspacing="0">
<tbody>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="0" e="3">
<table id="saw_11382_14_3_0" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="0" e="3">
<tbody>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_0_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_0_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="0" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Non-Sponsored Description:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Stein IREE "Co2 Recycling"</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="PTSection">
<table cellspacing="0">
<tbody>
<tr>
<td cid="saw_11382_14" s="-1" l="1" e="3">
<table id="saw_11382_14_3_1" class="PT_VSGHT" cellspacing="0px" cellpadding="0px" border="0" onmousedown="PTPSS(event, this); return false" cid="saw_11382_14" s="-1" l="1" e="3">
<tbody>
<tr align="right" style="width:10px;">
<td class="PT_CHPHT">&nbsp;</td>
<td class="PT_VGHL" rowspan="3" style="display:none">Fund Code:</td>
</tr>
<tr align="right" style="width:10px;">
<tr align="right" style="width:10px;">
</tbody>
</table>
</td>
<td id="saw_11382_14_3_1_Grp" class="PTCLDC" style="visibility:collapse">&nbsp;</td>
<td>
<table id="saw_11382_14_3_1_Tbl" cellspacing="0" cid="saw_11382_14" s="0" l="1" e="3">
<tbody>
<tr>
<td class="PTPSHLC" style="font-family:Arial Black;">Fund Code:</td>
<td>&nbsp;</td>
<td class="PTSC OOLT">Business and Industry</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

I have created a simplify testcase as I could not figure out why is there some whitespace between the <img> tag and the <ul> tag. I thought the margin or padding had somethign to do with it but it doesn't seem to be the case now. So, I welcome any comment or suggestion on what's wrong with my codes?? How to fix it??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
  MARGIN: 0px;
  PADDING: 0px;
  WIDTH: 100%;
  HEIGHT: 100%;
  BACKGROUND-COLOR: #55649D;
  TEXT-ALIGN: center;  /* for IE stupidity */
}
html {
  MARGIN: 0px;
  PADDING: 0px;
  WIDTH: 100%;
  HEIGHT: 100%;
}
#header {
  MARGIN: 0px;
  PADDING: 0px;
  WIDTH: 100%; 
  HEIGHT: 160px;
  OVERFLOW: hidden;  /* Hide the funny spaces beneath the "Nearly Perfect CSS Menus"... */
  BORDER-BOTTOM: 1px solid black;  /* Test/Debug, otherwise leave actual table border as 0px */
}
#wrapper {
  MARGIN: 0px;
  PADDING: 0px;
  WIDTH: 100%;
  MIN-HEIGHT: 100%; 
  BACKGROUND-COLOR: #55649D;
}
* html #wrapper {HEIGHT: 100%;}  /* IE Hack since IE does not support "min-height" in the #wrapper*/
#dMenu 
{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 0px 0px 0px;
  width: 330px;
  
  font-family: Verdana;
  font-style: normal;
  font-size: 10pt;
  font-weight: normal;
background-color: #FFFF00;  
}
#dMenu ul li 
{ 
  /* blank... */
}
.amsBanner
{
  WIDTH: 600px;
  HEIGHT: 120px;
  BORDER: 0px solid #000000;
}
</style>
<body>
 <div id="wrapper">
  <div id="header">
   <img class="amsBanner" src="BannerRoughDraft1.jpg" alt=""
 ><ul id="dMenu">sdf</ul>
  </div>
 </div>
</body>
</html>

Thanks,
FletchSOD

Any idea how to make the image to go side-by-side without a whitespace in between them? The code below is ..

Code:

<div>
 <a href="blah blah"><img src="blah blah"></a>
 <a href="blah blah"><img src="blah blah"></a>
 <a href="blah blah"><img src="blah blah"></a>
</div>

Thanks...

I've been working on the page www.hidrostal-india.com/newlook/index.htm using lots of positioned divs...

here is the stylesheet i am using:
Code:

/* CSS Document */

div#wrapper
{
	text-align:left;
	margin:0 auto;
	width:800px;
	position:absolute;
	background-color:#FFFFFF;
	border-style:solid;
	border-width:thin;
	border-color:#0099FF;
	overflow: visible;
	left:50%;
	margin-left:-400px;
	margin-bottom:50px;

}

div#buttons
{
position:relative;
top:-220px;
margin-left:10px;
height:42px;
}

div#maincontent

{

position:relative;
top:-220px;
margin-left:10px;
border-color:#0066FF;
border-width:1px;
border-style:solid;
width:598px;

}

div#contact
{
position:relative;
top:-220px;
margin-right:10px;
width:160px;
float:right;
border-width:1px;
border-style:solid;
background-color:#BCC8E1;
border-color:#0066FF;
text-align:left;
z-index:2;

}

div#flash

{


}

#translucentbkg {
   width: 588px; 
   background-color: #0099FF; 
   filter:alpha(opacity=10);
   -moz-opacity:0.1;
   opacity: 0.1;
    font-family:Verdana, Arial, Helvetica, sans-serif;
	padding:5px;
}

#opaquetext {
   width: 588px;     
   background-color: transparent;  
   position: absolute;              
   z-index: 2;    
   font-family:Verdana, Arial, Helvetica, sans-serif;   
   padding:5px;         
}


.iframeclass
{
	border-style:none;
}

.buttonclass
{
	cursor: pointer;
	cursor: hand;
}

.contactclass
{
	cursor: pointer;
	cursor: hand;
}

Now as you can see there is always 100px or so of whitespace at the bottom of my main container- can anyone think why?

I've tried playing round with all kinds of numbers but to no avail!

Thanks a lot!

heya still very new to css and IE is displaying whitespace between the two navigations and i cant fr the life of me find a fix... Well i set #tabcontentcontainer margins to -5 top it closes it but then displays wrong in firefox, is there a way to fix this ?? any help would be great thx.
eg.
Code:

#tabcontentcontainer{
	margin: -5px 0px 0px 0px;
    }

http://www.oraclestudio.com.au/css/start.php
http://www.oraclestudio.com.au/css/style/two.css

I'd like to be able to grab blocks of text from a plain-text file and present them in a web page, not only preserving the original spaces and line breaks, but also nicely and neatly justifying them (i.e. "full" justification).

I tried setting the innerHTML of a div equal to the Ajax'ed responseText, formatted thusly:

<div style="blah:blooey; ...;white-spacere-wrap; text-align:justify;">but no joy</div>

The pre-wrap worked, but undid the justify.

Hey everyone,

I am making a design for my site, and when I use a rounded image for my background, IE shows a whitespace around it. Here is my code.
Code:

#menu_outer {
	background-image: url( menu1.png );
	background-position: top left;
	background-color: #0000000;
	width: 250px;
}

Here is an example.
Any suggestions?