Top Alignment of a table in html

Hi ,

You might think it's stupid question but I tried many different things and can't get it to work.
Actually I am coming back to HTML after a gap of one year. Here is my code.

<html>
<head>                    
<STYLE>

TD {font:9pt Verdana, Arial, Helvetica; color:black}
      
td.bottomside { border-bottom: solid;border-right: solid;height: 35px   }  
td.toprightbottom { border-top: solid;border-bottom: solid;border-right: solid;height: 35px  }

td.rightbottom{ text-align:right;
vertical-align:bottom
}
</STYLE>
</head>                    

<body  bgcolor="#E8E8E8" marginheight="0" marginwidth="0" leftmargin="0">

<table cellpadding="0" cellspacing="0" border="0" width="748">
<tr>
      <TD><hr></TD>
</TR>
<TR>
      <TD class="toprightbottom" valign="top">test</TD>
</tr>
</TABLE>
      
      

</body>
</html>

How can I make the border of the cell "test"  to touch/ align the horizontal line ?

Thanks in advance.

techie_nsAsked:
Who is Participating?
 
BishopNeoCommented:
You can try this:

<html>
<head>                  
<STYLE>

TD {font:9pt Verdana, Arial, Helvetica; color:black}
     
td.bottomside { border-bottom: solid;border-right: solid;height: 35px   }  
td.toprightbottom { border-top: solid;border-bottom: solid;border-right: solid;height: 35px  }

td.rightbottom{ text-align:right;
vertical-align:bottom
}
</STYLE>
</head>                  

<body  bgcolor="#E8E8E8" marginheight="0" marginwidth="0" leftmargin="0">
<br><br><br>
<hr>
<table cellpadding="0" cellspacing="0" border="0" width="748" style="top:-8; position:relative;">
<tr>
</TR>
<TR>
     <TD class="toprightbottom" valign="top">test</TD>
</tr>
</TABLE>
     
     

</body>
</html>


Problem is the vertical space is different for each browser.  For example, I get the table and horizontal rule to touch just as you asked in IE, but Firefox has a 2-3 pixel gap between.  You could hack the CSS for each browser type to make it work.
0
 
BishopNeoCommented:
You can't, horizontal rules have a vertical spacing built into it and that gap it determined by the browser or user-agent so it isn't even predictible so you can't reliably us CSS either.
0
 
techie_nsAuthor Commented:

thanks for your response.

can we limit the vertical space ? What could be the smallest possible  vertical space which can make Horizental rule visible and does not leave any vertical space?

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
B_DorseyCommented:
I modified Bishops code a little and yours, Im not looking for points, just wanted to help out when I actually can...or atleast think I can ;)
Both look identical in Firefox and IE

b

<html>
<head>                  
<STYLE>
TD {font:9pt Verdana, Arial, Helvetica; color:black}
td.toprightbottom { border: solid #FFFFFF;border-left: none;height: 35px  }
}
</STYLE>
</head>                  
<body  bgcolor="#E8E8E8" marginheight="0" marginwidth="0" leftmargin="0">
<br><br><br>
<hr width="748" size="1" noshade align="left">
<table cellpadding="0" cellspacing="0" border="0" width="748" style="top:-8; position:relative;">
<tr>
</TR>
<TR>
     <TD class="toprightbottom" valign="top">Test</TD>
</tr>
</TABLE>
</body>
</html>
0
 
techie_nsAuthor Commented:

You guys have solved one probem but the top=8 and position is relative throws my layout of html out. I used the same values for each row then it looks fine but it adds lot of blank space at the bottom of the page. I have no idea how can I remove those white blank spaces.

Thanks for your help.
0
 
gops1Commented:
These lines also adds up some space in your page.

<br><br><br>
<hr width="748" size="1" noshade align="left">
0
 
B_DorseyCommented:
Can u post your code?
0
 
webmanagerCommented:
What about adding this into your css?

hr {
padding: 0;
margin: 0;
height: 1px;
}
0
 
techie_nsAuthor Commented:
guys ,

thanks for your answers. I hacked css to get it to work and it's working great.

Thanks,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.