CSS - Ie7 - Adding Whitespace At Top Of Page

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

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.

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.

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

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?

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.

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

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>

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

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!

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

Some css tags have inherent "stuff" attached to them. I don't know all the ins and outs (getting closer), and I've run into one I need help with.
Here's the site: http://www.carriagedriving.net/article.php

Here's the div css:

Code:

#logo {
	float:left;
	margin: 0px;
	padding: 0px;
}

.Alogo {
	width:250px;
	height:150px;
	/*border:1px dashed gray;*/
}

The coding in the div is an php include which results in this (banner image and alt text changes each time the page is rebuilt/refreshed):
Code:

<div id='logo' class='Alogo'><p align=center><a href="http://www.vermontel.com/~greenall/" target=_blank><IMG SRC="pageads/greenall.jpg" BORDER=0 alt="Greenall Carriage House"></a>
</div>

I get about 12 pixels of white space over the top of the image in both Firefox AND IE, so it's gotta be an inherent property to the link. Sans the link, there's no whitespace above the image.

How do I "fix" this?

Thanks.

HeadElf

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!