|
HTML - Get Rid Of White Space At Bottom Of Table?
On every other page, my table around my content works, but on the main page:
http://www.snowwhitedesign.com there is a lot of white space below my image. My entire image is broken down into 3 x 3 images, 9 total in the grid. All images have different heights and widths I constructed the table by first creating the larger table with the blue border, and then created separate vertical tables within each vertical <td> since the images are of different heights. Also, how can I get rid of that small border line running right through the middle of my image? thanks! Similar TutorialsI don't understand why there is white space at the bottom of the page. I am using negatives which one would assume would take away space and not add it. Below is the HTML and CSS codes. If someone could take a look at this and let me know what it is that I need to do to get rid of the white space at the bottom, I would be greatly appreciative. Thanks in advance. McClain HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Blakeslee - Quality Commercial Dishwashing and Prep Equipment</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="header"></div>
<div id="nav"></div>
<div id="content">
<ul>
<li class="premiere"><a href="#"><img src="images/p1.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Flight-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/Rack_type_dishwasher.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Rack-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/vegetable_peelers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Vegetable Peelers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/door_type_dishwashers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Door-Type Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/food_slicers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Food Slicers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
</ul>
<img id="productBg1" src="images/first_row_background.png" />
<div id="clear"></div>
<ul class="Hproducts">
<li class="premiere"><a href="#"><img src="images/glass_washers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Glass Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/undercounter_dishwashers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Undercounter Dishwashers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="endProduct"><a href="#"><img src="images/planetary_mixers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Planetary Mixers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/pot_utensil_washers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Pot & Utensil Washers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
<li class="primary"><a href="#"><img src="images/silver_stainless_burnishers.gif" alt="ok" border="none" /></a>
<ul>
<li class="title"><a href="#">Silver/Stainless Burnishers <img src="images/arrow.gif" alt="arrow" border="none" /></a></li>
</ul>
</li>
</ul>
</div>
<img id="productBg2" src="images/second_row_background.png" />
</body>
</html>
CSS Code: body{ margin-right: 10%; margin-left: 10%;}
#content,#nav,#productBg1,#productBg2,.Hproducts,.premiere,.primary,.title{ position:relative;}
#header{ background:url(../images/header.gif) no-repeat; width: 100%; height: 496px;}
#nav{ width:450px; height:60px; background-color:#000000; top: -220px; left:250px;}
/*************************************************/
/******************* CONENT ***********************/
#content{ width: 1100px; top: -200px; margin-left: 50px;}
#content ul{ display:inline;}
#content ul li{ display:inline; list-style-type:none;}
#content ul li a{ text-decoration:none; color: #1a4d9e;}
#productBg1{ top: -110px; left:40px; z-index: -1;}
#productBg2{ top: -410px; left:90px; z-index: -2;}
.Hproducts{ top: -100px;}
.premiere{ margin-left: 15px;}
.endProduct{ margin-left: -180px;}
.primary{ margin-left: -140px;}
.title{ right: 200px; top:10px;}
I have an image above a table and I want the image to be physically touching the table border, however there are about 5 pixels of white space above the table. I can't figure out how to remove them. Here's the code. Any help would be greatly appreciated. <img src=logo.jpg> <table border=1 bordercolor="#3C5581" cellspacing=0 cellpadding=0 width=740> Hi, I created a table with rounded corners and I'm having a white-space problem in the inner bottom and top part of the table while using the MOZILLA FIREFOX browser. The URL below will show you what I'm talking about. I've spent many hours trying to get rid of those white spaces but cant figure out. http://www.imageenvision.com/test.html Code: <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" href="/css_style_sheet.css" type="text/css">
</head>
<body>
<table align='center' width='500' height='0' border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width='0' height='0'><img src='/pics/top_left_rounded_corner.gif' height='9' width='9' border='0'></td>
<td width='100%' height='0'><img src='/pics/top_middle.gif' height='9' width='100%' border='0'></td>
<td width='0' height='0'><img src='/pics/top_right_rounded_corner.gif' height='9' width='9' border='0'></td>
</tr>
<tr>
<td colspan='3' height='100' align='center' bgcolor='#F8F8F8'><!--MAIN TABLE STUFF--></td>
</tr>
<tr>
<td width='0' height='0'><img src='/pics/bottom_left_rounded_corner.gif' height='9' width='9' border='0'></td>
<td width='100%' height='0'><img src='/pics/bottom_middle.gif' height='9' width='100%' border='0'></td>
<td width='0' height='0'><img src='/pics/bottom_right_rounded_corner.gif' height='9' width='9' border='0'></td>
</tr>
</table>
</body>
</html>
Thanks in advance for your help. Kenny Adams Image Envision iv been trying to make a header for a new ebay store. i have dream weaver with a table with 1 row and 2 col in the first column i have the main logo and 3 hotspot buttons, in the 2nd column i have a solid colour image set as the background for that row. the problem i am having is the 1st column with the logo image has a white space under the image which looks very annoying html code below: <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width="1200" height="292"> <img name="MainHeader" src="http://imagehost.vendio.com/a/35060807/view/MainHeader.jpg" width="1200" height="292" border="0" id="MainHeader" usemap="#m_Main20Header" alt="" /> <map name="m_Main20Header" id="m_Main20Header"> <area shape="poly" coords="810,21,964,21,964,55,810,55,810,21" href="javascript:;" title="Terms And Conditions Page" alt="Terms And Conditions Page" /> <area shape="poly" coords="990,21,1144,21,1144,55,990,55,990,21" href="javascript:;" title="Email Us Page" alt="Email Us Page" /> <area shape="poly" coords="630,21,784,21,784,55,630,55,630,21" href="javascript:;" title="About Our Company Page" alt="About Our Company Page" /> <area shape="poly" coords="450,21,604,21,604,55,450,55,450,21" href="javascript:;" title="Frequently Asked Questions Page" alt="Frequently Asked Questions Page" /> </map> </td> <td background="http://imagehost.vendio.com/a/35060807/view/headerbg.jpg" width="845" height="292" border="0"> </td> </tr> </table> So i'm not very good at this stuff, somehow there is an extra white line below the initial title and the three sections. I know there's a lot of garbage in this code of tags that don't need to be here, this code has been constantly edited and by different people and none of us are experts, so a lot of random tags are left around. Possibly one of them is causing the issue. To simplify things, in this example of my code I have removed all the text and links and what not that someone that visits the site sees with "data data data" as I believe they are irreverent to this issue. Any help would be great!!!! My guess is the issue is in the red section, as this is where the gap is between Code: <center>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="tableborder">
<tr><td width="100%" valign="top">
<div class='thead' align='left' style="padding: 5px;"><b>Title</b></div>
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<!--- Left Section -->
<tr><td class="trow1" width="33%" valign="top"><font color="black"><center><b>Title</b></center></font></center>
<hr color="#000000"><font face="verdana" color="000000"></center><u></u><font color="black">
<div style="overflow:auto; width: 310px; height: 276px;">
Data Data Data Data....
<br>
</div>
</td>
<br>
</font></a>
<br>
<!-- Center Section -->
</center></td>
<td class="trow1" width="33%" valign="top"><center>
<font color="black"><b>Title</b></font></center>
<hr color="#000000"><font face="verdana" color="000000"></center><center><u></u><font color="black">
<br>
Data Data Data.....<br></br>
<!-- Right Section -->
</center></div></td>
</i></b></font></a>
</center></td>
<td class="trow2" width="33%" valign="top"><center>
<font color="black"><b>Title</b></font></font></center>
<hr color="#000000">
<center>
<br>
Data Data Data.....
</td></div></table></td></tr>
</center> </center
</table>
Here's a screenshot of the issue on the website: I'm new to html, just got some basic knowledge, but I've made these 2 calenders, one on one page andone on another but otherwise identical. The thing is, no matter how much I double check for slight differences in the html code, the calender on one page has huge spaces between every three months. See for yourselves: http://www.belekgolftravel.com/servi...eType=Services Working one http://www.belekgolftravel.com/advert_detail.php?ID=54 Buggered up one Any ideas help please! Is there a way to have 2 lines of text (one above the other) where each line is a different colour, but there's no break between the lines? I would prefer an answer that uses CSS. Okay. I am sick of searching on google and w3c.org for solutions. I am asking anyone who is a pro at web developing to help me out! Problem I am using loadVars in Flash, from a *.html file. Mainly because the server does not support PHP and because in HTML I can have comments. I am spacing out the text like so, for readability: &variable1=value1 &variable2=value2 &variable3=value3 etc. when I do the line breaks, the HTML page automatically encodes whitespaces. I need an HTML tag or possibly CSS or Javascript that will get rid of all the whitespaces. Or if it is possible, as I was looking on w3c.org, there might be a text/content type or url-encode type that will do this, but haven't found one. If anyone has any ideas, I need them. Again, I am trying to remove all the whitespace in the ENTIRE page. Guys, hello to everyone in this forum. this my first thread rising a question. please clear my doubt. when im adding the <form> or </form> tags in the code it leaves a empty line (ie) an white space. this occurs only in IE, not in firefox. im using the Doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> So guys plz give me a solution to remove the empty line.. -makkal Hi All! I have a question about the (white) space above any text. I don't know if its possible or not but i hope yes... Please look at the attached picture. You can see the space between the text and the black border on the top... I tried padding, margin set to zero but nothing worked! Maybe its not possible to remove it? Thanks in advance! I have white space around my images with the grey border. I put in a picture that was larger than the previous cell size than removed it (the width and height code as well) but it still leaving the white space around the left and right sides of the images. http://www.diversink.com/publications.htm this is the page i'm working on Any ideas to why this is happening would be greatly appreciated Thank you, Rainseed In IE 7, some of my pages are displaying white space at the top of the page. Some pages show more than others... I cannot seem to figure out why. Two examples: http://labsysgrp.com/contact_us.php http://labsysgrp.com/newsletters_archived.htm Anyone have any thoughts? Thanks! When I use display:none...it leaves a blank space of what would be there other wise...i tried using visibility: none also...couldnt get it to work.. any help would be great as google isnt very useful on this one. thanks! hello, i have a html code with an horizontal flash menu containing 6 flash buttons. the code is like this HTML Code: .....<td width="790" height="30" colspan="2" >
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="131" height="30" >
<param name="movie" value="2.swf" />
<param name="quality" value="high" />
<embed src="2.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="131" height="30"></embed></object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="131" height="30"><param name="movie" value="3.swf" />
<param name="quality" value="high" />
<embed src="3.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="131" height="30"></embed>
</object>.....
... the other 4 flash buttons
when i run IE everything is ok but in opera there is an extra space between every 2 flash buttons and i really dont know where that came neighter how to remove them.. thank you, is the first time i enter this forum and it really looks great.my best regards to admins. Here's what I have... http://img378.imageshack.us/img378/502/currentmw7.jpg ...and here's what I'm trying to get... http://img388.imageshack.us/img388/3810/wantedvp6.jpg Basically, just rid of the white space above "Looking Out For You". Here's the coding for the page in a text file... http://www.megaupload.com/?d=JG3ELL2T If anyone can help me with coding or anything (most likely a table I have to fix), that would amazing and greatly appreciated! Thank You! Hi All, I am facing issues with having more than single space in between a string while displaying it in the list box Example:- <select name="listfield"> <option value="HTML">HTML <option value="HTML TAG">HTML TAG <option value="HTML TAG select">HTML TAG select Now the issue is with the third option.while displaying it on the screen it removes that extra space and displays it as "HTML TAG select" .the actual space between "TAG" and "select" is two white spaces where as it's shown as a single space. Thanks in advance YUGA I have a slight HTML problem that I cant figure out...There is this white-space above my text area that I cant figure out how to get rid of... Can someone please help me and tell me what I am missing or how to fix it... Here is a screenshot of where the whitespace is... Here is a link to the HTML file in zipped format http://www.pstsync.com/index.zip the Site is : http://www.PSTSync.com thanks Ishan Hi, I'm having some white space issues with a fairly straight forward website. I have a header which includes a logo, then a navigation bar below that at the top of my website. In Firefox there is extra space at the top of my website, but not in IE or Safari. Now, my navigation bar uses Javascript to animate the mouseOver images. If I take out the Javascript functions defined that makes this work, then there is no space at the top in Firefox! This Javascript code is within the <head></head> tags. I hope someone can help with this, thanks! Hello everyone, So here is my page... http://www.mytodostuff.com you will notice between the header and the navigation menu, there is a small white space that goes across the whole page... how do i delete that white space so the bottom of the header (the blue box) touches the top of the navigation(the orange and white colors)? any assistance on showing me how to do this would be greatly appriciated Thanks everyone for taking the time to read this thread and thanks even more to those that respond. |
|||||||