|
HTML - How To Eliminate Extra Space Around Form Tags?
So often when I create a form, a simple form with one text box the form tag adds a bunch of space below when I want it "lean" with zero space.
For example a table row... <table> <tr bgcolor="#ffcc33"> <td valign="top" align="left" width="25%"></td> <td valign="top" align="center"><form action="http://www.sanluisshopper.com/search_businesses.php" method="GET" name="search"><input type="Text" name="search" size="20" name="search"><input type="Submit" value="Shop!"></form> </td> <td valign="top" align="right" width="25%"></td> </tr></table> Is there any way to eliminate this extra space? This has driven me batty! Thanks. Similar TutorialsI want a Header Graphic to be flush with the top of the webpage This is a copy of the Graphic; How do I make it from appearing with a space at the top of webpage like this . . . . . to appearing flush at the top of the webpage like this?; This is the Code I'm using: Quote: <html> <head> <title>Sample 15b</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#9FB6CD" link="#FFFFFF" vlink="#FFFFFF"> <div align="center"> <img src="http://i47.tinypic.com/b6dfte.png" width="871" height="131" longdesc="http://i47.tinypic.com/b6dfte.png"> <table width="768" border="0" cellspacing="0" cellpadding="0" height="100" bgcolor="#9FB6CD" align="center"> </table> </div> </body> </html> Can someone offer a solution? With appreciation I am retired, so now I no longer work for a living - Now, living works for me I looked through the forum and tried their solution. Nothing luck. How can I eliminate the border space between two cells in same row? Even I used in css style: HTML Code: body,
table,
td,th,tr
{
padding: 0;
margin: 0;
border: 0;
}
HTML Code: <table width="80%" cellspacing="0">
<tr>
<th colspan="2" scope="row"><div align="left"><img src="images/topPanel.jpg" width="800" height="134"/></div></th>
</tr>
<tr>
<td width="14%" scope="col"><div align="left"><img src="images/sideBar.jpg" width="136" height="387"/></div></td>
<td width="86%" scope="col"><div align="left"><img src="images/bodyFrame.jpg" width="664" height="387" border="0"/></div></td>
</tr>
<tr>
<th colspan="2" scope="row"><div align="left"><img src="images/bottomPanel.jpg" width="800" height="79"/></div></th>
</tr>
</table>
In IE6, it looks great. For FF, it shows the space between two cells in second row. www.deichselfamily.com FYI: this website is very simple. I am learning how to do the web design. Thanks. I am trying to put to tables next to each other side by side. These two tables are actually inside cells of a third "outer" table. I keep getting a white space inbetween the tables. How do I get rid of it? Is this going to show up if I put the code in? HTML Code: <head>
<style type="text/css">
table.p
{
color:#000000;
background-color:#ffffff;
font-size: 100%;
padding:0px;
margin: 0;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
}
</style>
</head>
<table border="0" width="100%" height="82">
<tr>
<td width="50%" height="76">
<table class="p" border="0" width="100%">
<tr>
<td width="100%">table 1</td>
</tr>
</table>
</td>
<td width="50%" height="76">
<table class="p" border="0" width="100%">
<tr>
<td width="100%">table 2</td>
</tr>
</table>
</td>
</tr>
</table>
Hello, Im making my navigation bar with a mouse over effect on the buttons. however im getting "extra space" under the command. A blank page can be seen at saracrew.org/blank.html Any help is greatly appricated, Thanks! <!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> <title>SARAcrew.org</title> <link rel="stylesheet" type="text/css" href="general.css" /> </head> <body bgcolor="505769" leftmargin=0 topmargin=0> <table border="0" cellspacing="0" cellpadding="0" bgcolor="505769"> <tr><td colspan="4"> <table border=0 cellpadding=0 cellspacing=0> <tr> <td colspan="4"><img src= "images/banner1.jpg" alt="banner" /></td> </tr> <tr> <td><table border=0 cellpadding=0 cellspacing=0> <td><img src= "images/left_vbar_nav.gif" alt="vbar" /></td> <td> <table border=0 cellpadding=0 cellspacing=0> <tr><td><img src= "images/nav_bar_1.gif" /></td></tr> <tr><td><a href=home.html><img src="images/home_off.gif" onmouseover="this.src='images/home_on.gif'" onmouseout="this.src='images/home_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_2.gif" /></td></tr> <tr><td><a href=news.html><img src="images/news_off.gif" onmouseover="this.src='images/news_on.gif'" onmouseout="this.src='images/news_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_3.gif" /></td></tr> <tr><td><a href=results.html><img src="images/results_off.gif" onmouseover="this.src='images/results_on.gif'" onmouseout="this.src='images/results_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_4.gif" /></td></tr> <tr><td><a href=board.html><img src="images/board_off.gif" onmouseover="this.src='images/board_on.gif'" onmouseout="this.src='images/board_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_5.gif" /></td></tr> <tr><td><a href=pictures.html><img src="images/pictures_off.gif" onmouseover="this.src='images/pictures_on.gif'" onmouseout="this.src='images/pictures_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_6.gif" /></td></tr> <tr><td><a href=orange_oar.html><img src="images/orange_oar_off.gif" onmouseover="this.src='images/orange_oar_on.gif'" onmouseout="this.src='images/orange_oar_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_7.gif" /></td></tr> <tr><td><a href=dues.html><img src="images/dues_off.gif" onmouseover="this.src='images/dues_on.gif'" onmouseout="this.src='images/dues_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_8.gif" /></td></tr> <tr><td><a href=info.html><img src="images/info_off.gif" onmouseover="this.src='images/info_on.gif'" onmouseout="this.src='images/info_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_9.gif" /></td></tr> <tr><td><a href=email.html><img src="images/email_off.gif" onmouseover="this.src='images/email_on.gif'" onmouseout="this.src='images/email_off.gif'" border=0 /></a> </td></tr> <tr><td><img src= "images/nav_bar_10.gif" /></td></tr> </table> </td> <td><img src= "images/right_vbar_nav.gif" alt="vbar" /></td> </table></td></tr> </table> </td> </tr> </table> </td></tr> </table> </body> </html> Everything else has been great there is just one problem Mozilla Firefox shows it the way it should but IE keeps showing extra white space on top of my menus. Explain why this is and give me a solution and I know that negative margins is not the right solution so don't suggest that . thanks, My site name is juicersuperstore.com, I have an image right in the center of the site but there is extra blank space on top and at the bottom of the image and I have tried desperately to fix that but I ave not been able to. From the page source, the area with the blank space looks like this <td width="100%" valign="top"> <table border="0" width="100%" cellspacing="0" cellpadding="1"> <tr> <td><table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr><td><div align="center"><img src="images/Template-1_21.jpg" alt="" border="0"></div> </td></tr> <tr> <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td> </tr> <tr> <td class="mphead"><!-- D Main_page //--> <img alt="shop for juicers for low low prices" border="0" height="330" src="http://www.juicersuperstore.com/images/frontpic.jpg" title="juice superstore" width="520" /><img alt=" " border="0" src="https://www.juicersuperstore.com/admin/" /> <!-- Main_page eof //--> </td></tr> <tr> <td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="10"></td> </tr> The middle image name is frontpic.jpg, please any help would be very appreciated. Thanks I have built a table and it is doing something strange and I would like to know why. It is creating an extra line of blank space before displaying the text in a cell. This cell is within a table that is nested within another table. It's strange because it only has this behavior in Firefox, but not in IE. When I remove this nested table and put it in an HTML file all by itself, the behavior goes away, and the text butts up against the top of the cell like it is intended. The cell in question has nothing but text within it. If I take the original HTML file away from the style sheet it's linked to and away from all the images associated with it, and simply paste the HTML file to my desktop and open it, the blank line is still there. One other thing that is strange to me--when I open the "naked" file from my desktop in IE, IE creates placeholders for all the missing image files so I can see what's going on. When I open the file in FireFox, there are no placeholders, but rather it just recreates the table and shrinks it as if the images are not even there. I'm not exactly sure what code is creating the blank line, otherwise I would post it. So short of pasting in my entire HTML document, I thought I'd describe it and see if anyone has any ideas or may be able to give me some clues. If none of this does any good without the code in question, I'd be happy to post some. Thanks! Hi everybody! I'm doing a page and IE keeps putting more space in between table cells than I have specified. Here's the link: http://renewforest.com/test The page is basically a table in a div layer, I have made the table have a 2px cellspacing, it works great for the top 3 cells but puts a few pixels after these first 3 cells, destroying my nifty 2 pixel separation. Also, I have given some cells (the td.topfade attributed ones that is) some left and right padding, BUT NO TOP PADDING, yet Safari and Firefox both put in some padding on the top. Oddly enough, IE obeys the CSS'ed padding, huh. Any ideas? Thanks in advance! (Because this also deals with CSS I am posting this to the CSS section as well, if this is a big no no please let me know.) Hi, I'm having a problem with internet explorer and I don't know how to fix it... See the website I'm working on... In Firefox everything is fine...But in Explorer (version 7) you can see a gap below the main horizontal menu (extra white space of 2 or 3 pixels)...And there is also a 1 pixel gap on each side of the web site (see the vertical lines). What can cause that? Is there a way to fix this? Thanks in advance.. I did a test : I created a html file with only a small part of the code and the problem is still there...You can take a look at this test he test2 For some reason, I have a lot of extra space at the top of my page. What could be causing this and how do I fix it? 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. Hi, I'm coding a HTML page, in which I see lot of space between my header(<h2></h2>) and the contents of the page. The contents of my page happens to be a form with a lot of fields enclosed in the table tag.. Any pointers on how to get rid of the extra space would be highly helpful. this is how the structure of my HTML code looks: <html> <body> <form> <table> <!-- a lot of fields here...--> </table> </form> </body> </html> Thanks in advance. Hi Experts, I have an Iframe on a simple page. I am seeing an usual big white space between the header and the Iframe in Internet Explorer.. Same link is working fine on Firefox. how do i make it work in IE as well. PS: I have attached the snapshot of page. Code: <html>
<head>
<style type="text/css">
@import url("/analytics/static/styles/intranet.css"); /* main stylesheet */
@import url("/analytics/static/styles/intranet-2col.css"); /* column stylesheet */
@import url("/analytics/static/styles/intranet-2col-1024.css"); /* 1024px stylesheet */
</style>
<script language="JavaScript" src="/analytics/static/Fusion/FusionCharts/FusionCharts.js"></script>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="GENERATOR" content="Rational Application Developer">
</head>
<body>
<div id="page-wrapper"><%@include file="Header.jsp"%>
<div id="column-wrapper"><!-- begin columns -->
<%@include file="NEW_TOOLBAR.jsp"%>
<div id="content"><!-- begin content column -->
<div class="inner">
<iframe src="chart.html?chartType=${detailForm.chartType}&chartGroup=${detailForm.chartGroup}&chartSubgroup=${detailForm.chartSubgroup}&liabilityCode=IRU&timeline=${detailForm.timeline}&width=600&height=400" frameborder="0" scrolling="no" width="700" height="430" align="top"></iframe>
<p><small> </small></p>
</div>
<!-- end content column, then column wrapper --></div>
</div>
<%@include file="Footer.jsp"%></div>
</body>
I'm trying to place a DIV directly below an IFRAME with no space inbetween. Please see this sample page: http://www.esaba.com/space.html When viewed in Firefox, there is an extra space between the IFRAME and the DIV. If I remove the DOCTYPE, it displays correctly. This is for a webpage widget I am developing which writes the IFRAME and DIV into the page through javascript. Because the widget will be placed on many different pages which I don't have control over, it needs to look the same (with no space) regardless of the DOCTYPE or other attributes. Please help me figure out how to remove the extra space. Thanks! Hi all, I have 2 tr tags in table. For some reason a space seems to be appear in between these 2 tags when the page is displayed in the browser. The HTML is below... The space appears between the button and the "Para Espanol" link. Does anyone know why this could be happening? I want these link to be right under the button. Any help would be appreciated. Thanks, Jehan <table width="100%" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td> </td> <td class="bodyMenuMajor">search for: </td> </tr> <tr> <td> </td> <td><FORM name="webSearchForm" method="post" action="/search/search_process.jsp" onfiltered="return checkbae()"><INPUT type="text" name="queryString" value="" size="15" maxlength="30"> <INPUT type="hidden" name="exactPhrase" value="true"> <INPUT type="hidden" name="hitsPerSet" value="10" > <input type="hidden" name="fromDays" value="~"> <input name="search" type="submit" value="go" class="button"> </form> </td> </tr> <tr> <td> </td> <td class="hfaSpanish"> <a href="/public/HFAEspanol.jsp" >Para Espanol</a></td> </tr> Is it possible to trigger the action of a form with a submit button that's outside the form tags? If so, how should this example be rescripted to make the input tag work outside the form tags? [/code] <html> <body> <form name="input" action="html_form_action.asp" method="get"> First name: <input type="text" name="FirstName" value="Mickey" /><br /> Last name: <input type="text" name="LastName" value="Mouse" /><br /> <input type="submit" value="Submit" /> </form> </body> </html> [/code] I would like to add extra fields to my contact us form on osCommerce. The fields I would like are 'Category' drop down list which would be linked to a selection of email addresses, so that when a customer selects 'sales' or 'cust service' the email would go to a seperate email address each time. This would make it much easier to do admin work. Is it possible to change this without needing to install a ticketing system? My school's library has a really basic search, so I made a form with more options to search for books. The problem is that they have a lot of books in the catalog that are NetLibrary books. I can usually find just the dead-tree version by adding limiters and boolean operators, but I was wondering it is possible to make a form that would let me just type the book title and automatically add "not netlibrary" to it? The Daily Mail is doing something that has me puzzled. When I go to this url in firefox http://www.dailymail.co.uk/sciencete...shut-down.html (or any url @ the Daily Mail actually) if I try and copy a paragraph the page it adds a link and some text to the bottom of what ever I copied. Like this: Computers in companies, hospitals and schools around the world slowed down or froze after an antivirus program identified a normal Windows file as a threat Read mo http://www.dailymail.co.uk/sciencete...#ixzz0lq9Ljcbw That last line wasn't in the area I had highlighted to copy. How are they doing that????? I have 4 <form> enclosures on one HTML page, however only the first one works. Is there a technique for using multiple ones? Quote: <form action="default.aspx" method="POST" runat="server" id="form2"> <input type="hidden" name="datfield1" value="addcanvasdeal"> <input type="hidden" name="datfield2" value="2"> <input type="hidden" name="datfieldprice" value="12.99"> <input type="hidden" name="datfieldqty" value="2"> <input type="hidden" name="datfieldcarttype" value="1"> <input type="hidden" name="datfieldtitle" value="Item 1"> <input type="submit" value="Add to Cart" name="B1" style="float: right"> </form> Each field for each form is different. |
|||||||