[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Top Alignment of a table in html

Posted on 2006-06-02
11
Medium Priority
?
343 Views
Last Modified: 2010-04-09
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.

0
Comment
Question by:techie_ns
  • 3
  • 2
  • 2
  • +2
9 Comments
 
LVL 3

Expert Comment

by:BishopNeo
ID: 16818678
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
 

Author Comment

by:techie_ns
ID: 16819081

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
 
LVL 3

Accepted Solution

by:
BishopNeo earned 100 total points
ID: 16819321
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
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!

 
LVL 14

Assisted Solution

by:B_Dorsey
B_Dorsey earned 100 total points
ID: 16820338
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
 

Author Comment

by:techie_ns
ID: 16820673

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
 
LVL 17

Expert Comment

by:gops1
ID: 16821821
These lines also adds up some space in your page.

<br><br><br>
<hr width="748" size="1" noshade align="left">
0
 
LVL 14

Expert Comment

by:B_Dorsey
ID: 16834853
Can u post your code?
0
 

Assisted Solution

by:webmanager
webmanager earned 100 total points
ID: 16841797
What about adding this into your css?

hr {
padding: 0;
margin: 0;
height: 1px;
}
0
 

Author Comment

by:techie_ns
ID: 17054733
guys ,

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

Thanks,
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question