表格视图在Chrome和IE，Firefox中显示不同

Question

I have created a simple HTML/CSS table for a menu on this page: http://derma-clinic.gr/index.php/el/epikoinonia .

The problem is that it works perfectly in Firefox. But in Chrome and IE, it doesn't work well.

Here is from one menu table code and the CSS it uses. CSS is the same for all the other tables. http://jsfiddle.net/2vb0furb/

html:

<table class="mega_menu_templ" style="background-color: #fbf6f1; width: 902px; height: 275px;" border="0">
<tbody>
<tr>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules" class="f_category">Ακμη - Ουλες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules/akmi" class="sub_category">Ακμή</a></span></li>
<li><span style="font-size: small;">&nbsp;</span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/akmi-oules/oules-xiloeidi" class="f_category">Ουλες - χηλοειδη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/thilomata" class="sub_category">Θηλώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/thilomata/antimetopisi" class="sub_category">Αντιμετώπιση</a></span></li>
<li><span style="font-size: small;">&nbsp;</span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi" class="f_category">Σπιλοι</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/xartografisi-spilon" class="sub_category">Χαρτογράφηση Σπίλων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/afairesi-spilon" class="sub_category">Αφαίρεση Σπίλων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/karkinos-tou-dermatos" class="sub_category">Καρκίνος του δέρματος&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/melanoma" class="sub_category">Μελάνωμα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/spiloi/prolipsi" class="sub_category">Πρόληψη</a></span></li>
<li><span style="font-size: small;">&nbsp;</span></li>
<li></li>
</ul>
</td>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies" class="f_category">Παιδικες Δερματοπαθειες&nbsp; </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/spiloi-sta-paidia" class="sub_category">Σπίλοι Στα Παιδιά</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/paidikes-alopekies" class="sub_category">Παιδικές Αλωπεκίες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/aimaggeiomata" class="sub_category">Αιμαγγειώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/myrmikies" class="sub_category">Μυρμηκιές</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/oules" class="sub_category">Ουλές</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/paidiki-leyki" class="sub_category">Παιδική Λεύκη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/ravdoseis-ragades" class="sub_category">Ραβδώσεις - Ραγάδες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/paidikes-dermatopatheies/atopiki-dermatitida" class="sub_category">Ατοπική Δερματίτιδα</a></span></li>
<li><span style="font-size: small;">&nbsp;</span></li>
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites" class="f_category">Μυκητες</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/mykitiasi-dermatos" class="sub_category">Μυκητίαση Δέρματος</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/mykitiasi-nyxion" class="sub_category">Μυκητίαση νυχιών</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/mykites/therapeies-me-laser" class="sub_category">Θεραπείες με Laser</a></span></li>
<li><span style="font-size: small;">&nbsp;</span></li>
</ul>
</td>
<td>
<ul style="list-style-type: circle;" class="one">
<li><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena" class="f_category">Σεξουαλικα Μεταδιδομενα </a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/kondylomata" class="sub_category">Κονδυλώματα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/hiv-aids" class="sub_category">HIV (AIDS)</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/kolpitida" class="sub_category">Κολπίτιδα</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/erpis-gennitikon-organon" class="sub_category">Έρπης γεννητικών οργάνων</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/syfili" class="sub_category">Σύφιλη</a></span></li>
<li><span style="font-size: small;"><a href="/index.php/el/dermatologia-afrodisiologia/seksoualika-metadidomena/gonorroia-vlennorroia" class="sub_category">Γονόρροια (Βλεννόρροια)</a></span></li>
<li></li>
<li><span style="font-size: small;">&nbsp;</span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/leyki" class="f_category">Λευκη</a></span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/psoriasi" class="f_category">Ψωριαση</a><strong> </strong></span></li>
<li class="height"><span style="font-size: medium;"><a href="/index.php/el/dermatologia-afrodisiologia/dermatitida-atopiki-ekzema" class="f_category">Δερματιτιδα (Ατοπικη) - Εκζεμα</a></span></li>
<li></li>
<li></li>
</ul>
</td>
<td><img alt="dermatologia-afrodisiologia" src="http://derma-clinic.gr/images/stories/menu_icons/therapeies_prosopou.png" height="267" width="152" /></td>
</tr>
</tbody>
</table>

Css:

/* MEGA MEWNU STYLESHEET */
.mega_menu_templ {
text-decoration: none !important;
 position: relative !important;
}

.mega_menu_templ a{
text-decoration: none !important;
/*font-size:50pt !important; -> kanei ola link 50pt*/
}
.mega_menu_templ a.f_category{
color: #D97E2B; !important;
text-transform: uppercase;
}

.mega_menu_templ a.f_category:hover{
color: #828280; !important;
}

.mega_menu_templ a.f_category2{
color: #D97E2B; !important;
text-transform: uppercase;
margin-bottom: 15px;
}

.mega_menu_templ a.f_category2:hover{
color: #828280; !important;
}

.mega_menu_templ a.sub_category{
color: #656564; !important;
}

.mega_menu_templ a.sub_category:hover{
color: #D97E2B; !important;
}

.mega_menu_templ ul {
  list-style: none !important;
  height:120% !important;
  font-family: Verdana, Geneva, sans-serif;
}

.mega_menu_templ ul.one li {
    display: block;
    width: auto;
     height: 20px;
}

.mega_menu_templ ul.one li.height {
    display: block;
    width: auto;
     height: 28px;
}
/* End Additional CSS Styles */

Could somebody help me find out why is this happening ?

Answer 1

Add the following to your CSS

td {
    float: left;
}

You may need to edit other CSS classes to maintain the images on right side.

Answer 2

Remove height:120% !important for your ul .

 .mega_menu_templ ul {
  list-style: none !important;
   /*height:120% !important;*/
   font-family: Verdana, Geneva, sans-serif;
 }

DEMO