Table row height difference between IE and Firefox

7,435

Expert 4TB

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.

Dec 26 '06 #3

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

Expand|Select|Wrap|Line Numbers

 <!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?

Dec 26 '06 #4

7,435

Expert 4TB

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:

Expand|Select|Wrap|Line Numbers

 <style type="text/css">

* {margin:0}

</style>

The * is a wildcard meaning "everything".

Dec 26 '06 #5

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?

Dec 26 '06 #6

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:

Expand|Select|Wrap|Line Numbers

 <!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?

Dec 26 '06 #7

7,435

Expert 4TB

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.

Dec 26 '06 #8

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

Expand|Select|Wrap|Line Numbers

 <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.

Dec 26 '06 #9

7,435

Expert 4TB

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

Dec 26 '06 #10

AricC

1,892

Expert 1GB

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

Dec 27 '06 #11

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!

Dec 27 '06 #12

7,435

Expert 4TB

More advice. Don't use tables for layout.

Dec 27 '06 #13

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?

Dec 27 '06 #14

AricC

1,892

Expert 1GB

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

Dec 27 '06 #15

7,435

Expert 4TB

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:

[

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.

Dec 27 '06 #16

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.

Dec 27 '06 #17

Detecting screen.height for use in <Table Height=>

7,435

Expert 4TB

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.

Dec 27 '06 #18

narendra singh82

Hi,

It is simple solution :

Expand|Select|Wrap|Line Numbers

p {

margin:0px;

}

Thanks
Narendra singh

Apr 4 '07 #19

cristiTM

Try using div tags instead, like this

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

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

Sep 28 '08 #20

dotuno

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

Oct 4 '08 #21

by: §Þ¦w | last post by:

How can i get the table height by Javascript

Javascript

by: john T | last post by:

Is there any way to input he screen.height information into <Table Height=> so I can have my page auto center vertically. I don't want to use CSS because it disrupts other tables.

Javascript

TABLE height CSS workaround

by: Angelus | last post by:

I want a table to be 100% as high as the viewable area of the page. Well, of course, TABLE HEIGHT is no longer an attribute, so I did a work around using STYLE="height:100%" and <BODY...

Table height in percents

by: alex | last post by:

Hi, It seems like HTML 4.01 Transitional spec. doesn't allow table height to be expressed in percents. When i have this doctype tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01...

Doing without table height

by: Derek Fountain | last post by:

I seem to recall from long ago that the TABLE HEIGHT attribute was deprecated (or was Netscape only, or something). Hmmm... I have a web page with a table which controls layout - one row with 3...

HELP: Table height in the new XHTML???

by: Arthur Dent | last post by:

I am completely baffled... i cannot for the life of me get the HEIGHT style to work on a table in the new 2005-supported XHTML. I put a HEIGHT: 100% on my table so that my footer row will also show...

ASP.NET

Resize table problem in Firefox for Web App

by: Giggle Girl | last post by:

Hi there, I am having a problem with the behavior of Firefox, where lefthand column content is not resized properly after it is "collapsed" and then "re-expanded". An online demo is available...

Javascript

how to create table height 100% ?

by: Markus Olderdissen | last post by:

i want to create my page with 100% height. <table height="100%"works but is not correct by default. i saw various information how to do it with stylesheet. i really have problems to create my page....

IE ignorming my th or td CSS table height, any fixes?

Resizing table height

by: JMT | last post by:

Hello, I get some dynamic controls (ASP .Net) inside a table, the height property of the table is variable according the controls loaded, so I need to know the final table height, this value...

ASP.NET

by: dlite922 | last post by:

My site has multiple section each divided into tables (I'm using tables because the other developers slept through HTML 101) The section table must be a certain height and contains a header (th)...