CSS - Can Css Whitespace:pre-wrap Somehow Be Full Justified Too?

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
}

Basially theres quite a large extent of whitespace above the text in IE7. Works fine in FF.

http://www.beta-designz.co.uk/manicgaming/

CSS:
Code:

#wwd 
{ 
width:550px; 
height:auto; 
font-family:Geneva, Arial, Helvetica, sans-serif; 
font-size:12px; 
padding:6px; 
}

HTML:
Code:

<div id="wwd">
<h3>This Is What I do!</h3>
<span class="style1">I design sites for individuals and small businesses that are visually unique, well built, and easily manageable. A site we can all be proud of and a site your visitors will find interesting and effective!</span></div>

Help would be great, regards, J.

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.

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

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?

In ff3 at least theres white space under my log in box and I cant figure out how to get rid of it. I must have played with it over 30 minutes now and Its stumping me

the url is www.devwebsites.com heres the code

Code:

<style type="text/css">
body {
color:#333333;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:small;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
a:link, body_alink
{
	color: #FFFFFF;
	text-decoration: underline;
}
a:visited, body_avisited
{
	color: #4B5970;
	text-decoration: underline;
}
a:hover, a:active, body_ahover
{
	color: #FF6600;
	text-decoration: underline;
}
#nav {
padding:0;
color: #FFFFFF;
background: url(images/navbar1.png) 0 0 repeat-x;
float:left;
list-style-type: none;
width:947px;
border:1px solid #42432d;
border-width:1px 0;
}
.login{
float:right;
height:54px;
margin:0;
background-color: #cccccc;
width:325px;
font-family:verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
#nav a:link,
#nav a:visited {
color:#FFF;
padding:10px 10px 10px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
text-shadow: 2px 2px 2px #555;
text-transform:uppercase;

}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#nav a:hover {
color:#FFF;

}

.logo{
margin-top:25px;
margin-left:25px;
float:left;
}
.search{
margin-right:40px;
margin-top:100px;
float:right;
}
#toplogo{
margin-left:25px;
margin-top:10px;
float:left;
border: 1px solid black;
width:945px;
height:70px;
}
.align{
float:left;
padding-top:15px;
padding-left: 10px;
width:200px;
}
.footer{
clear:both;
}
</style>
</head>
<body>
<div class="logo">
<img src="images/devwebsites.gif" title="BBoardX Home" height="100px" width="575px"alt="banner" />
</div>


<div class="search">
<form action="#" style="display:inline">
Search Forums
<input type="text" value="" name="search" style="background:url(images/browse.gif) left no-repeat; padding-left:25px;" />
<input type="button" value="Search" name="buttonSearch" />
</form>
</div

<div id="toplogo">
<div class="align">
<img src="images/folder-16.gif"alt="folder" /> &nbsp;BBoardX Forums

</div>
<div class="login">
<form action="login.php">
User Name<input type="text" name="username" value="User Name"
onclick="if(this.value=='User Name')this.value=''";
onblur="if(this.value=='')this.value='User Name'";
 /><input type="checkbox" name="remember" />Remember me<br />
Password &nbsp;<input type="text" name="password" value="" />
<input type="button" name="logged" value="Log in" />
</form>
</div>

and yes ryan420 i know what your going to say when (if) you see this thread link lol

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

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.

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

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