CODEWITHSUNDEEP
htmlcss
Akshay
Akshay

Reputation: 27

Table cell height is more in IE than chrome/firefox

In my web page I have a table structure. In Firefox and chrome it is showing correct height but in IE it is showing more height than the content in it. In my page on left side there is menu and each menu in one <td>. I want height of that menu i.e. <td> to remain constant in IE. In chrome and Firefox, height of <td> remains constant but in IE height becomes more than content it.

css :

td{
margin: 0;
padding: 0;
border-spacing: 0;
border-collapse: collapse;

}
Doctype--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">

screen shot

In chrome- enter image description here

And in IE- enter image description here

Please help me.

Upvotes: 1

Views: 1232

Answers (3)

Venu immadi
Venu immadi

Reputation: 1605

hope it will help you, use normalizer.css, it makes you forms and tables, etc... same in all browsers.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

http://necolas.github.io/normalize.css/

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34180

put your menu in a container div and give the td (containing this div) a vertical align that suits you:

<td style="vertical-align:middle">
<div>
     your menu here
</div>
</td>

Upvotes: 3

JerryHuang.me
JerryHuang.me

Reputation: 1790

It is trivial for most IE to have white spaces removed white space between <TD> tags

Example: 

<td>Some stuff</td>
  <td>Some stuff</td>

Will look different than 

<td>Some stuff</td><td>Some stuff</td>

Clean up your white-spaces and I highly recommend Eric Meyer's CSS reset for cross-browser compatibility: http://meyerweb.com/eric/tools/css/reset/

Upvotes: 1

Related Questions