Table row height difference between IE and Firefox

I have extracted the following code and eliminated a lot of HTML and CSS so that I can isolate a problem. Essentially, IE does what I expect (!!) and other browsers make the row height much larger than I expect (enough white space for 3 rows of text). Here's the HTML:

I have discovered that if I remove the <p> tags, then Firefox no longer renders a tall row. But why? And is there something I can do in my CSS or HTML to eliminate this problem? (I have this problem in a lot of places and it isn't as simple as just deleting the <p> tags because they serve other functions.)

I have tried all sorts of combinations of height, row-height, etc. to override this unexpected behaviour. But so far nothing seems to do the trick.

Any ideas?

re: Table row height difference between IE and Firefox

Change your doc type to this:

re: Table row height difference between IE and Firefox

First of all, in xhtml, case matters so put your tags in lower case.
Also, your meta is missing the ending slash />. xhtml requires this.

The reason the row collapses is because the margins from the <p> no longer exist. To get around this, set all your margins to zero and add them where needed. *{margin:0} This also alleviates problems where default margins are different between browsers.

re: Table row height difference between IE and Firefox

Those were interesting ideas but they do not appear to have changed anything. Here's what I have now:

The only visible difference is that in both browsers, the table moved to the upper left corner. Firefox still has a lot of wasted space insde the table, above and below the words "Sample text", while IE does not.

Did I do what you both had in mind?

re: Table row height difference between IE and Firefox

They aren't ideas, it's the standard, that's why you needed to change them. Though they didn't affect what you have now, it could have significance later.

You didn't quite do what I said. In your head, add this:

The * is a wildcard meaning "everything".

re: Table row height difference between IE and Firefox

That certainly fixed it. Thanx!

If I place this at the top of my style sheet before my other CSS, will it be effectively overridden by all of the subsequent statements?

re: Table row height difference between IE and Firefox

Curious ... as soon as I moved that to the top of my style sheet, it stopped working. The only way I can get it working is to combine the inline margin spec with the link to my stylesheet as follows:

Can you explain why that is?

re: Table row height difference between IE and Firefox

The code I gave you will override all default margins but not anything you set.

I don't understand what you mean. Just put the *{margin:0} at the top of your external style sheet but remove the <style></style> stuff.

re: Table row height difference between IE and Firefox

I did (at least I think I did it properly). My external stylesheet begins:

The page is as shown in my latest post above.

Sorry if I did something stupid ... but I can't get it to work unless I also put the inline style code there too.

re: Table row height difference between IE and Firefox

You don't use style tags in stylesheets. Remove the <style> stuff.

re: Table row height difference between IE and Firefox

If that doesn't fix it post the code your using to link the style sheet.

re: Table row height difference between IE and Firefox

Wow ... can't believe that I didn't know that. I've been building all style sheets with the <style> tags since the dawn of CSS and never had a problem.

<sigh />

I took it out and it started working properly. Will post again if anything unexpected occurs, but hopefully this is it on this problem.

Thanx again. Good help is hard to find!

re: Table row height difference between IE and Firefox

More advice. Don't use tables for layout.

re: Table row height difference between IE and Firefox

I understand the reasons to avoid tables, and I do try to avoid them, but when you are maintaining server-side code generated 5+ years ago, there isn't a lot of choice. And sometimes a simple table is a lot easier to use than trying to accomplish the same thing in CSS. (I expect that religious wars are fought over this issue, not unlike "go-to-less" programming 20 years ago.)

On the original problem, I'm somewhat surprised at the repercussions this has had on existing tags in my pages. No spacing between paragraphs, bullets that no longer show up, etc. Is there any useful set of definitions you use for common tags like p and bullets to save me reinventing all of this? Or any web reference on the subject I can learn from?

re: Table row height difference between IE and Firefox

W3 Schools is a popular place to learn HTML. What do you mean your bullets aren't showing up?

re: Table row height difference between IE and Firefox

I didn't know this was for an older page so I can understand the problems you may be having from using the * for margins. Sometimes you can use 'conditional comments' to insert things for IE only. It works like this:

[<!--[if lt IE 7]>
p{margin:0}
<![endif]-->

Which reads as "if less than IE7", etc.

Short tutorial link but google for "conditional comments" for lots more including MS doc page on it.

re: Table row height difference between IE and Firefox

I have numerous reference sites bookmarked and have been writing HTML since about 1995. I have no problem investing time to learn what's changing but with the number of technologies there are, there simply isn't enough time to stay current on all the evolving languages and specs that exist.

At the moment, I'm just a little frustrated that my desire to clean up one inconsistency between IE and Firefox has resulted in a cascading set of issues in my pages. And yes, it would have been nice if they didn't contain errors, but when I last ran this stuff thru a checker they were considered clean. I guess the specs changed and I didn't notice.

I've just read a bunch of stuff on margins and containers and am not getting the results I had hoped for. Think I'll put this back on the shelf, return the code to what I started with, and when my current project is finished, try to understand what has been happenning. Fortunately most of my users run IE.

Thanx for helping. Maybe talk to you in January.

re: Table row height difference between IE and Firefox

Sometimes the best bet is to tear it up and start over. The fact that your users are IE is not fortunate. You will have to write proper, standard code; then adjust it for IEs quirks and bugs; but it shouldn't be too hard if they upgrade to IE7 by then at least.

re: Table row height difference between IE and Firefox

Hi,

It is simple solution :

Expand|Select|Wrap|Line Numbers

1. p {
2.         margin:0px;
3.         }

Thanks
Narendra singh

re: Table row height difference between IE and Firefox

Try using div tags instead, like this

INSTEAD OF:
<td><p>Sample text</p></td>

USE:
<td><div>Sample text</div></td>

re: Table row height difference between IE and Firefox

I know this is really old, but for what it's worth:

After setting * {margin:0px}, bring back individual margins you need like this:

ol, ul {margin-left:20px}

p {margin:10px 0px 10px 0px}

You can set whatever values you want, of course, but I have found that 20px left margin is the minimum required to bring back bullets or numbers in lists