Table row height difference between IE and Firefox

Collapse
X
Collapse
 
  • Page of 2
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • jpullam
    New Member
    • Dec 2006
    • 12
    #1

    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:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
 <table border="1"><TR>
<TD><p>Sample text</p></TD>
</TR></table>
</body>
</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?
    Tags: firefox table-row, tr height
    • AricC
      Recognized Expert Top Contributor
      • Oct 2006
      • 1885
      #2
      Change your doc type to this:
      Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          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.

            Comment

            • jpullam
              New Member
              • Dec 2006
              • 12
              #4
              Those were interesting ideas but they do not appear to have changed anything. Here's what I have now:

              Code:
              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="margin:0">
<table border="1"><tr>
<td><p>Sample text</p></td>
</tr></table>
</body>
</html>
              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?

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  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:

                  Code:
                  <style type="text/css">
* {margin:0}
</style>
                  The * is a wildcard meaning "everything ".

                    Comment

                    • jpullam
                      New Member
                      • Dec 2006
                      • 12
                      #6
                      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?

                        Comment

                        • jpullam
                          New Member
                          • Dec 2006
                          • 12
                          #7
                          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:

                          Code:
                          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {margin:0}
</style>
<link rel=stylesheet href="../WGCstyle.css" type="text/css" />
</head>
<body>
<table border="1"><tr>
<td><p>Sample text</p></td>
</tr></table>
</body>
</html>
                          Can you explain why that is?

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              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.

                                Comment

                                • jpullam
                                  New Member
                                  • Dec 2006
                                  • 12
                                  #9
                                  I did (at least I think I did it properly). My external stylesheet begins:

                                  Code:
                                  <style>
	*	{margin:0}
	p, body	{color: #000000; font-family: Verdana, Arial; text-align: left; font-size: 13px}
	.normal	{color: #000000; font-family: Verdana, Arial; text-align: left; font-size: 13px; 
		margin-left:10px;}
	.adminaction	{color: #000000; font-family: Verdana, Arial; text-align: left; font-size: 13px; 
		margin-left:20px;}
                                  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.

                                    Comment

                                    • drhowarddrfine
                                      Recognized Expert Expert
                                      • Sep 2006
                                      • 7434
                                      #10
                                      You don't use style tags in stylesheets. Remove the <style> stuff.

                                        Comment

                                        • AricC
                                          Recognized Expert Top Contributor
                                          • Oct 2006
                                          • 1885
                                          #11
                                          If that doesn't fix it post the code your using to link the style sheet.

                                            Comment

                                            • jpullam
                                              New Member
                                              • Dec 2006
                                              • 12
                                              #12
                                              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!

                                                Comment

                                                • drhowarddrfine
                                                  Recognized Expert Expert
                                                  • Sep 2006
                                                  • 7434
                                                  #13
                                                  More advice. Don't use tables for layout.

                                                    Comment

                                                    • jpullam
                                                      New Member
                                                      • Dec 2006
                                                      • 12
                                                      #14
                                                      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?

                                                        Comment

                                                        • AricC
                                                          Recognized Expert Top Contributor
                                                          • Oct 2006
                                                          • 1885
                                                          #15
                                                          W3 Schools is a popular place to learn HTML. What do you mean your bullets aren't showing up?

                                                            Comment

                                                            Previous 1 2 template Next
                                                            Working...