CSS - (another) Whitespace Bug Above Text In Ie

I use Opera browser all the time and notice a couple problems while using Jupitor Portal script, the fault is on Opera so I need a way to fix this.

1. Block had some sort of padding or whitespace on the right side for some reason.
2. Search button width is short.

Problem in red: URL
Site: URL

CSS: URL

Can someone give me a solution or work around for this problem.

P.S: I'ved tried adding margin: 0; padding: 0; to con1 but that didn't work.

Hi there,

This is my first post here and already I'm asking for help.

I'm new to CSS layout and have read quite a few tutorials and "zeroed" my values for IE but have come across my first rendering issue which I hope you can help me with.

I've attached an image of the dreamweaver layout and how firefox is rendering the page as well as the source of the page in a txt file.

Why is the whitespace appearing in Firefox and not in IE?

Thanks in advance for any guidance.

Here's the website example: http://www.justuskennels.net

In the menu, for the IE6 & 7 issues, I'm using the whitespace fix as found he http://www.456bereastreet.com/archive/200610/closing_the_gap_between_list_items_in_ie/

The only problem is that when I hover over "Our Dogs" and the side menu slides out, the <li> for "Our Dogs" puts the whitespace back in. So, if you roll over the menu quickly, you'll see it jump by a few pixels on the hover.

If I'm not describing it well enough I'll try more, but does anyone know of a fix for the hovered <li> on the slide-out?

Navigation CSS:
Code:

/* Navigation Menu Styling */
#menu {	font-size:90%;
		margin:0px 0px 0px 17px;
		text-align: center;
		font-weight: bold;
		padding-bottom:50px;
		background:none;
		text-align:center;
		line-height:100%;
		} 

#menu ul {	list-style: none;
			margin: 0px;
			padding: 0px;
			width: 150px;
			}

#menu a {font-family:Verdana, Arial, Helvetica, sans-serif; display: block;}
#menu a {color:#000; text-decoration: none;}
#menu a:hover {color:#000;}
#menu li {position:relative; height:40px; line-height:40px; background:url(design/buttons.png);}
#menu li:hover {background-position:0 40px;}
#menu ul ul {position:absolute; top:0; left:100%; width:100%;}
div#menu ul ul, div#menu ul li:hover ul ul {display:none;}
div#menu ul li:hover ul, div#menu ul ul li:hover ul {display:block;}

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

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

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

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

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?

Newbie warning!

I'm new to this forum, and new to CSS and having some trouble with formatting. I was very happy with a menu/submenu system that I am working on, as it displayed as I wanted in IE6. I know that different browsers handle things differently, so I tried it in Opera, and to my suprise.. not what I expected. There seem to be some issues with whitespace between my menus.

I have 3 sections that should sit one on top of the other, but whitespace appears between each div.

I did read through the posts first, but did not find an answer, though I'm sure its there!

I have outlined the problem on this page:
http://personal.nbnet.nb.ca/dsnyder

The link includes snippets of my CSS and HTML, images of the correct and incorrect results, and a demonstration page.

I do have some other questions in regards to highlighting the selected item on the submenu and how create the submenus in one include file if possible.

Please take a look .. I'd be very happy to get an answer!

Look forward to reading your responses, and the rest of the threads!