• Post Reply Bookmark Topic Watch Topic
  • New Topic

Firefox is driving me nuts - can't control td height  RSS feed

 
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
The HTML below works just fine in IE. But in Firefox, the top row is taller than it "should" be. I've tried setting the height on all cells in the row, and I've tried decreasing the font size to a ridiculous 5px. Nothing works to shrink the row height. What is going on ?

 
author
Rancher
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I opened the file up in both browsers, did a screen shot and they fit exactly the same on top of each other except IE was a little wider and firefox had both rounded corners.

Plus I did not have the image file which you should not use for spacer. It is better to use a div or span tag with set dimensions.

Eric
 
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I don't have Firefox but I do have NN6. In NN6 the central cell of the top row appears abour 2px larger than the other two which contain the images. To cure this I set style="font-size: 12px; line-height: 10px;" on the two end TDs in the top row. You could define a style for this.

I hope that solves your problem. If not, I expect it's related - you often have to apply style to the container of an element to get the element (in this case your images and/or text) to fit snugly therein across browsers.

Jules
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thanks Julian, that seems to have worked.

I think that must be a bug in Firefox. I had 0.8, and I've just tried 0.9.3 and it's the same.

So your fix works, but I've named my style: portletFFhack, since it seems like a particularly ugly hack. The actual size of my font (not the same as in the example above) means my difference is 3px. Sheesh.
[ August 25, 2004: Message edited by: Mike Curwen ]
 
Julian Kennedy
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Mike,

A neater fix is to add the following CSS:

Here is the Bugzilla report with all the gory details!

In short the issue only occurs when your page uses the !DOCTYPE directive, i.e. in standards mode, and the verdict is that it's not a bug but a correct, if debatable, interpretation of an ambiguous section of the CSS2 spec.

So, there you go!

Jules

P.S. Are you aware that your DOCTYPE says HTML 4.0 though you're using XHTML notation? Your DOCTYPE is also not valid for HTML 4; it should really be one of the following:

I'm aware that malformed DOCTYPEs are deliberately used in certain circumstances to fool browsers and work around certain bugs, however. Check out what the W3C has to say about HTML Version Info if you're interested.
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hi Jules,

Yup, I knew it was malformed. I was going off of:
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic2

The row that has: HTML 4.0 | No Definition Present | On | On
(because I didn't want to use 'strict', and I needed IE6.0 to "just do the right thing").

So yah, that's a pretty gory report in bugzilla. If I got with Eric's suggestion to remove the spacer.gif , maybe it fixes everything. I usually hate those anyways, and do my best to avoid them. But I thought I needed one there, so that the thin columns on the left/right of the portlet would 'render', and putting a   or <br /> blew up the layout, so I went with the good old-school standby of spacer.gif
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
hmph. for completeness, this also works, and is perhaps the 'best' way to "deal with"/"comply with" Mozilla/Firefox interpretation of the spec...

I also took Eric's suggestion to not waste a request on an invisible image.

changed/added to the style sheet:
Then the HTML becomes:
It's surprising that Moz/FF needs *both* the display:block and vertical-align pokes. The guy that seems the most strident in the bug report led me to think that either one or the other would do. Well, at least I know how to make it behave now.

Anyone wanna tell me what it looks like in Safari? JK!
 
Julian Kennedy
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Yes, the spacer image was superfluous though removing it didn't have any impact on the "bug" (in NN6). As the behaviour is considered correct it may well be the same in all Gecko-based browsers. NN6 didn't require the vertical-align adjustment to fix the display.

Also I don't think you need anything (e.g. spacer) in your second row TDs, as you have no need for a border. The contents of your top row will determine the column widths. I also don't think that <div class="spacer" /> is valid XHTML; it has to be <div class="spacer"></div> - I think that's because it *can* have content. Also note that using NBSP and <br /> as spacers can give you the similar problems to those you've been experiencing as they both take up a character's worth of space in the font of their containing element.

I would like to say that the moral of this story is don't use tables for layout, but if you think that Moz "feature" is bad, just try using DIVs and CSS-P!

Jules
 
Mike Curwen
Ranch Hand
Posts: 3695
IntelliJ IDE Java Ubuntu
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
I need *something* in the second row TD's in order for IE to render that cell. If I leave them empty, I don't get a left and right border drawn.

And as you note, &nbsp; and <br /> leave too much room.
 
Julian Kennedy
Ranch Hand
Posts: 823
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Ah, I was looking at <table border="0"> but I guess your CSS overrides that. I used to use <div class="spacer"></div> before graduating to CSS-based layouts.

Jules
 
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
Boost this thread!