I am having a height issue with the website I am working on.

http://dev.eleet-tech.com/height.html

The DOCTYPE is XHTML1.0 transitional. It works correctly in IE but not in Firefox. I have tried several things with CSS (you can check out the css files in the HTML source.

Anyone have a fix for this? It's driving me nuts!

Thanks,
--Josh

The first thoughts that come to mind have to do with setting height to 100% for html and body, but you covered that. What happens if you unlink the ie stylesheet? It would seem to me that height:auto would reset the stylesheet and remove the 100% specification from the first one, since auto for height does not work the same way as auto for width.

The same issue is found in Opera too. Plus you'll want to set padding:0 for Opera users. And I'm always in favor going to strict whenever possible. What markup are you using that would prevent going to 1.0 strict? That could make a difference in the consistency of your presentation.

I am still working on the problem, but I do have another question. What is the benefit to using strict and not transitional?

--Josh

Well, the only reason one might want to use an older DOCTYPE is that the specifications allow the use of some elements that have been replaced by better methods in newer ones. The whole point of XHTML was to truly standardize browser interpretation of code - it's as much for the browser as it is for the developer. Transitional DOCTYPES tend to leave more elements open for interpretation than stricts ones, because of their transitional nature. You'll notice that there's only one DOCTYPE available for XHTML 1.1, that's because the transition is considered complete, and any browser that renders XHTML is expected to behave a certain way, no transitional markup allowed. The benefit I guess is consistency. You're not allowed to screw up and use poorly formed markup like you can in HTML. You can't use inefficient markup such as most style element in HTML anymore. All have been rightly relegated to CSS. I suppose this is a personal choice more than anything. But the stricter you get, the less guesswork you have, and the clearer it becomes whether the browser screwed up or whether you coded incorrectly.

So, did you try removing the second stylesheet to see if that was the problem? If so, what happened?

k figured it out, it was kinda dumb. The center tag was breaking it. Go figure.

I actually tried to move to XHTML 1.0 Strict, but couldn't. Seems my align="center" on my containing table tag that centers the entire table, is not available in Strict. I tried a containing div but the height problem cropped up again.


I'm going to have another design made in a few months that is CSS instead of a table based layout. Oh the beauty of CSS. :)

Thanks for everyones help!
--Josh

Ahh, that makes sense. <center> is deprecated as far back as HTML4.01. I guess it jumped from deprecated to obsolete in XHTML Trans. You don't need align="center" with XHTML Strict. That's when you call on margin:auto to do what it was always meant to do. And yes, it even works in IE!

By the way, if you ever use some sort of code that shifts the contents of all table cells to the center, just add
td { text-align:left }
and you'll reclaim your defaults. If you're nesting tables and the text-align property is not inherited by the table block you've put into a cell, you're probably using them for the wrong reason anyway (you don't nest tabled data). But it sounds like you have the right idea anyway with your CSS-based layout.

Good luck with that!