Div white space in Firefox, tried everything (especially margin/padding)

Discussion in 'CSS' started by Miikee, Jul 24, 2008.

  1. #1
    I can't figure out why I can't get rid of this white space between the divs in this webpage I'm making. I have worked for probably 3 hours on this. I cannot figure out what the probably is. It is happening in Firefox... I haven't even attempted IE.
    The div.listing-container (alternating green) is what I'm trying to fix... the whitespace in between them is unwanted. I've tried over and over again margin, padding, and border. And I've tried to position with top and bottom (but that just moves them all), then tried again while floating the divs.
    I've tried adjusting the heights, margin, padding, and border of the table rows and data that are laid out above it.


    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html><head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>listinglayout</title>
    
    <style>
    	body,div{
    		margin:0px;
    		padding:0px;
    	}
    	.listing-container{
    		background-image: none; 
    		 		height: 160px; 
    	}
    	div.listing-heading{
    		background-image:none;
    		height:65px;
    		background-color:#99FFBB;
    	}
    	table.listing-table{
    		position:absolute;
    		top:490px;
    	
    	}
    	td.listing-image{
    		vertical-align:middle;
    	}
    	.listing-itemid{
    		width:110px;
    	}
    </style>
    </head><body>
    
    <table>
    
    <tr>
    <td>
    	<div id="logo">
    		<h1><a href="/index.php">Title</a></h1>
    
    		<h2>Heading</h2>
    	</div>
    </td>
    <td>
    	<h1>Upper Menu Bar</h1>
    	<h2>User Tools and Navigation</h2>
    	
    	<!--FIX HERE LINK-->
    	<p>
    
    	<a href="/acct/acctform.php">Create Account</a>	 
     	
    	| <a href="/list/getuser.php">Create Listing</a> | <a href="/help/help.html">Help</a>
    	</p>
    </td>
    </tr>
    
    <tr>
    <td>
    	<h4 style="font-weight: bolder; color:red;">POSTIKI.COM IS IN THE DEBUGGING PROCESS NOTHING ON THESE PAGES ARE <br />
    
    	 FOR SALE OR EVEN REAL.  PLEASE DO NOT ATTEMPT CONTACT ANYONE USING ANY <br />OF THE CONTACT INFORMATION PROVIDED 
    	 INSIDE LISTINGS.</h4>
    </td>
    </tr>
    
    <tr> 
    <td>
    	<!-- change to PHP -->
    	
    
    	
    
    <form name="frmsrch" method="get" action="/srch/srchdb.php">
    	<input type="text" name="srchterm" size="50" maxlength="50" />
    	<input type="submit" value="Search" />
    </form>	
    <h2>Sign In</h2><form name="signin" method="post" action=/srch/srchdb.php><p>Username: <input type="text" name="loginuser" ></p><p>Password: <input type="password" name="loginpasswd"></p><a href="/acct/acctform.php">Create Account</a><input type="submit" name="cmdsignin" value="Sign In" /></form><!-- Setup so that if user is signed-in, sign in script doesn't show up -->
    </td>
    </tr>
    
    </table>
    
    <table class="listing-table">
    <div class="listing-heading">
    <th class="listing-image" ><h2>Pictures</h2></th>
    <th class="listing-itemid" ><h2>Item ID</h2></th>
    <th class="listing-title"  ><h2>Title</h2></th>
    <th class="listing-email"  ><h2>Seller</h2></th>
    <th class="listing-descript"><h2>Description</h2></th>
    <th class="listing-price"><h2>Price $</h2></th>
    <th class="listing-shipprice"><h2>Shipping Price</h2></th>
    <th class="listing-shipco"><h2>Shipping Provider</h2></th>
    
    <th class="listing-zip"><h2>Distance from &lt;zip code&gt;</h2></th>
    </div>
    
    
    <hr /><div class="listing-container" style="background-color: #CCFFDD;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=1"><img src="/users/img/imglistings/th_1_1.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=1" >1</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=1" >fdfsa</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">asdfadsf ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $0.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> </td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 32342</td></tr>
    
    </div><div class="listing-container" style="background-color:#AAFFCC;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=2"><img src="/users/img/imglistings/th_1_2.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=2" >2</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=2" >Title Entered here</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">Description is written here with <b>bold tests</b> and <em>italics tes ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $23.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> </td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 43453</td></tr>
    
    </div><div class="listing-container" style="background-color:#CCFFDD;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=3"><img src="/users/img/imglistings/th_1_3.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=3" >3</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=3" >sadjkkjasd</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">dksksjadkj ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $21.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> </td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 28723</td></tr>
    </div><div class="listing-container" style="background-color:#AAFFCC;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=4"><img src="/users/img/imglistings/th_1_4.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=4" >4</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=4" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">description ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $0.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> FedEx</td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    
    </div><div class="listing-container" style="background-color:#CCFFDD;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=5"><img src="/users/img/imglistings/th_1_5.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=5" >5</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=5" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">Testing the \'post\' button for the logged version of listingform.php  ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $0.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> FedEx</td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    </div><div class="listing-container" style="background-color:#AAFFCC;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=6"><img src="/users/img/imglistings/th_1_6.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=6" >6</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=6" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">afdfasfd ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $21.23</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> FedEx</td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    
    </div><div class="listing-container" style="background-color:#CCFFDD;" ><tr class="listing-container"><td class="listing-image" style="width:150"</td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=7" >7</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=7" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">Testing the 'post' button for the logged version of listingform.php af ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $0.00</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> NULL</td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    </div><div class="listing-container" style="background-color:#AAFFCC;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=8"><img src="/users/img/imglistings/th_1_8.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=8" >8</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=8" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">sdff ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> </td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    
    </div><div class="listing-container" style="background-color:#CCFFDD;" ><tr class="listing-container"><td class="listing-image"> <a href="/list/view/listingpage.php?id_item=9"><img src="/users/img/imglistings/th_1_9.jpg" alt=""/></a></td>&nbsp;&nbsp;&nbsp;<td class="listing-itemid"><a href="/list/view/listingpage.php?id_item=9" >9</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-title"><a href="/list/view/listingpage.php?id_item=9" >title</a></td>&nbsp;&nbsp;&nbsp;<td class="listing-email">miikee713@gmail.com</td>&nbsp;&nbsp;&nbsp;<td class="listing-descript">fdsaff ...</td>&nbsp;&nbsp;&nbsp;<td class="listing-price"> $12.92</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipprice"> $</td>&nbsp;&nbsp;&nbsp;<td class="listing-shipco"> </td>&nbsp;&nbsp;&nbsp;<td class="listing-zip"> 98172</td></tr>
    </div><hr /></table>
    
    <script type="text/javascript" language="javascript">
    	function openBugReporter(){
     		var url='http://www.postiki.com/mantis/bug_report_page.php';
    		window.open(url,'bug_report_page','width=1200,height=800,scrollbars=yes');
    	}
    </script>
    
    <div style="text-align:center;"  id="pagefooting">
    <!-- 	<a style="text-align:center" href="/univ/debugging/bugform.php">Report a Bug</a> -->
    	<br />
    	<br />
    	<script type="text/javascript" language="javascript">document.write('<a href="javascript:openBugReporter()">Report a Bug</a>')</script>
    	<noscript><a href="http://www.postiki.com/mantis/bug_report_page.php">Report a Bug</a></noscript>
    <!-- 	<p>Coming Soon: 'Report a Bug'</p> -->
    </div>
    
    Code (markup):
    I'm sorry to just layout html source here like this (it's generated by PHP). But I only post every I've run all my ideas into the ground. Any help would be greatly appreciated. Thank you.
     
    Miikee, Jul 24, 2008 IP
  2. webdesigner

    webdesigner Well-Known Member

    Messages:
    489
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    110
    #2
    Would be much easier if you supplied us with your website URL
     
    webdesigner, Jul 25, 2008 IP
  3. greboguru

    greboguru Member

    Messages:
    78
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #3
    First thing I'd do is sort out the errors thrown out by the W3C validator. The snippet of HTML you provided throws up 141 errors? There seems to be a number of closing tags that are missing.
     
    greboguru, Jul 25, 2008 IP
  4. Miikee

    Miikee Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Sorry, about not submitting a URL. And I must have made an error copying the code if that many errors comes up... or at least I hope I did.

    However, the problem sort of sorted it's self out. I had to restart my computer for something, and after I did the divs worked as I wanted them to. I am thinking that the page was cached or something. Although I had closed out of my browser and I have it set to clear cache when I do that. But it's fixed... somehow.

    Again thank you for your interest and suggestions. Next time I post I will try to supply a URL (right now the site is password blocked). Also, I will check out those errors.
     
    Miikee, Jul 25, 2008 IP
  5. nmallare

    nmallare Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Also, shift+refresh with force the browser to go out to the webserver and get a non-cached version of the page.

    Nick
     
    nmallare, Jul 26, 2008 IP