HTML table alignmenst do not horizontally align with each other.

sysguy

Hello,

I have a table with each <td> has four links in it. There are five cells(i.e <td>) like this and requirement is to align them horizontally on a tabbed panel menu bar. The issue is first two cells align just fine, but later three do not align and show one or two level down.

I have checked valign table properties, removed all margins and padding but still no luck.

Below is the complete html code. Pleaes view this html output from left to right to get a clear picture.

Thanks,

Ruchir
[html]
<html>
<table cellspacing="0" cellpadding="0" width="100%" align="left"
bgcolor="#ffffff"
style="vertical-align:baseline; text-align:left; margin:auto;">
<tr>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l1">History</a> </li>
<li class="link"> <a class="link" href="#" id="l2">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l3">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l4">Our Approach</a> </li>
</ul>*
</td>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l5">History</a> </li>
<li class="link"> <a class="link" href="#" id="l6">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l7">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l8">Our Approach</a> </li>
</ul>*
*</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l9">History</a> </li>
<li class="link"> <a class="link" href="#" id="l10">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l11">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l12">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l13">History</a> </li>
<li class="link"> <a class="link" href="#" id="l14">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l15">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l16">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l17">History</a> </li>
<li class="link"> <a class="link" href="#" id="l18">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l19">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l20">Our Approach</a> </li>
</ul>*
</td>
</tr>
</table>
</html>[/html]

drhowarddrfine

It's the asterisks you are starting the cells with.

sysguy

It's the asterisks you are starting the cells with.

Hi drhowarddrfine.

This is little surprising. I never put any asterisks in the code snippet I pasted. I am not sure from where it came :(

Anyways, I am repasting the same code below. This time without asterisks. Unfortunately the problem still persists.

Thank you so much for your time in reading this post.

Thanks,
Ruchir

<table cellspacing="0" cellpadding="0" width="100%" align="left"
bgcolor="#ffffff"
style="vertical-align:baseline; text-align:left; margin:auto;">
<tr>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l1">History</a> </li>
<li class="link"> <a class="link" href="#" id="l2">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l3">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l4">Our Approach</a> </li>
</ul>*
</td>
<td>
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l5">History</a> </li>
<li class="link"> <a class="link" href="#" id="l6">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l7">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l8">Our Approach</a> </li>
</ul>*
*</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l9">History</a> </li>
<li class="link"> <a class="link" href="#" id="l10">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l11">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l12">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l13">History</a> </li>
<li class="link"> <a class="link" href="#" id="l14">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l15">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l16">Our Approach</a> </li>
</ul>*
</td>
<td>*
<h1 style="font-family:Georgia;color: rgb(255,66,0);font-size:small">Who we are</h1>
<br/>
<ul class="link" type="square" style="font-size:smaller">
<li class="link"> <a class="link" href="#" id="l17">History</a> </li>
<li class="link"> <a class="link" href="#" id="l18">Vision</a> </li>
<li class="link"> <a class="link" href="#" id="l19">Mission</a> </li>
<li class="link"> <a class="link" href="#" id="l20">Our Approach</a> </li>
</ul>*
</td>
</tr>
</table>

drhowarddrfine

Please use code tags using the buttons located above the posting area and briefly mentioned on the right side.

Your last post still has the asterisk but removing them has everything line up.

HTML table alignmenst do not horizontally align with each other.

Post your reply

Similar topics