• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

<from> tag cause large spacing!

Hey there guys. I have a table cell that has a <from> tag inside it and it is causing HUGE gaps in the cell... Almost like it is inside <P></P> tags.. It's busting up my table heights and i am frustrated!
----------------------------------------------------------------------------------------------------------------------
    <table cellspacing="0" cellpadding="0" width="600" border="0" align="center">
        <tr>
            <td nowrap style="width: 150px" class="table_toptab" align="center">
                Search Results</td>
            <td align="right" style="width: 450px" class="table_topline">
<form style="margin:0px"><input type=button value="< Back to Search Results" class="navigation_objects" onCLick="history.back()"></form>
            </td>
        </tr>
...
----------------------------------------------------------------------------------------------------------------------

Doing this solves my problem but is bad HTML:

----------------------------------------------------------------------------------------------------------------------
    <table cellspacing="0" cellpadding="0" width="600" border="0" align="center">
        <tr><form style="margin:0px">
            <td nowrap style="width: 150px" class="table_toptab" align="center">
                Search Results</td>
            <td align="right" style="width: 450px" class="table_topline">
<input type=button value="< Back to Search Results" class="navigation_objects" onCLick="history.back()">
            </td>
        </tr></form>
...
----------------------------------------------------------------------------------------------------------------------

Please help!

Nugs
0
Nugs
Asked:
Nugs
  • 8
  • 3
  • 2
  • +1
3 Solutions
 
gamebitsCommented:
Add this to your form style

STYLE="margin: 0px; padding: 0px;"  

you may have to do it also to your input tag
0
 
NugsAuthor Commented:
<form style="margin:0px; padding:0px"><input type=button value="< Back to Search Results" style="margin:0px; padding:0px" class="navigation_objects" onCLick="history.back()"></form>

This does not solve my problem.

Nugs
0
 
gamebitsCommented:
Try the style inside the input tag

<input STYLE="margin: 0px; padding: 0px;"  type=button
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
NugsAuthor Commented:
Gamebits: if you take a look at my last post you will notice that i do have this code in the input tage.

Infact, if you take a closer look att he first post i made on this question you will notice the margin and padding has been set on the form tag to start off with.

I am aware that form tags generate an annoying margin effect around the form contained if the margin is not set to 0. As a standard all my form tags have style settings that set the margin and padding to 0. This however seems to be a unique situation where it does not seem to be going away, UNLESS i badly nest the form tag inside my <TR></TR> tags...

Nugs
0
 
NugsAuthor Commented:
Also, this only happens in IE of course... (Man how i wish there was on standard for browsers...)

Nugs
0
 
TNameCommented:
I can't see any huge gaps in IE6 or FF2.0 if margins and padding are set to 0.
Could the large space you see be caused by something else, e.g. by style rules defined for
  .table_topline
or
  .navigation_objects ?
Maybe you could post that CSS...



         
 
0
 
NugsAuthor Commented:
.table_topline {
      border-top-width: 3px;
      border-right-width: 3px;
      border-bottom-width: 3px;
      border-left-width: 3px;
      border-top-style: none;
      border-right-style: none;
      border-bottom-style: solid;
      border-left-style: none;
      border-top-color: #a12830;
      border-right-color: #a12830;
      border-bottom-color: #a12830;
      border-left-color: #a12830;
}

.navigation_objects {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9px;
      color: #333333;
      height: 17px;
}



Keep in mind that these styles all work as they should until i the form tag in... i get maybe a 5-10px gap above and below the button...

Nugs
0
 
jasonsbytesCommented:
This will do the same thing as your existing .table_topline class:
.table_topline {
      border-width: 0px;
      border-bottom: solid 3px #a12830;
}
0
 
jasonsbytesCommented:
btw, the above was not related to your question, but this is:

have you tried:
.navigation_objects {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 9px;
      color: #333333;
      height: 17px;
     margin: 0px;
}
0
 
NugsAuthor Commented:
Just did, no luck...

Some more info for everyone...

.table_toptab {
      background-color: #a12830;
      height: 20px;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      padding-right: 10px;
      padding-left: 10px;
}

table_toptab height is set to 20... navigation objects is set to 17height and table_topline and a 3px line on the bottom. On other pages that do not have the form tage this works as it should and remains at20px.

Adding the form tag makes this row 39px height.... The button sits at the top of the cell and white space below it...

Nugs

0
 
NugsAuthor Commented:
jasonsbytes: What DOCTYPE do you have set?
0
 
jasonsbytesCommented:
xhtml 1.0 strict
0
 
NugsAuthor Commented:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="PBE.MasterPage" %>
<!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 id="Head1" runat="server">
    <title>Untitled Page</title>
    <link href="css/tec.css" rel="stylesheet" type="text/css" />

    <script language="javascript" src="javascript/JSFunctions.js" type="text/javascript"></script>

</head>
<body>





Could this be my issue?
0
 
TNameCommented:

This is strange...
- you say it only happens when the form is present in your code, so it should be related to the form (or the button).
- as the margin and the padding are set inline, they should override for IE any other style...
Did you copy&paste this ? :
<form style="margin:0px; padding:0px">
Are you sure there's no typo in the original code?
0
 
NugsAuthor Commented:
Yes the margin and padding are iddentical to yours. In any case i have opted for a work around solution that does not require the form tag at all. I am moving forward with this instead...

Thanks everyone for the input.

Nugs
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 8
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now