css for firefox, mozilla, and ie

[autogoor@yahoo.com]

Hi, I am trying firefox and mozilla and found they are not as good as
ie in terms of css. For example, here is my css

table#maintb{
border : 0px solid;
width : 677px;
height : 100%;
font : xx-small Verdana, Arial, Helvetica, sans-serif;
}

table#maintb td{
padding-left : 0px;
padding-top : 0px;
broder : 0x solid;
}
table#maintb td#main{
text-align: center;
vertical-align:top;
padding-top:20px;
}

here is my html:

<table id="main">
<tr>
<td>...side menus <td>
<td id = main">
<table>
...
my content table
...
</table>
</td>
</tr>
</table>

The content table is not placed in the center of the cell in mozilla
and firefox while in ie it is fine. Do I need something different?


Thanks,

goor

[Steve Pugh]

Re: css for firefox, mozilla, and ie

autogoor@yahoo. com wrote:
[color=blue]
>Hi, I am trying firefox and mozilla and found they are not as good as
>ie in terms of css.[/color]

Correct. They are not as "good" as IE. They are much, much better.
[color=blue]
>For example, here is my css
>
>table#maintb {
> border : 0px solid;
> width : 677px;[/color]

Fixed width design? A bad idea.
[color=blue]
> height : 100%;
> font : xx-small Verdana, Arial, Helvetica, sans-serif;
>}[/color]

Verdana is a very poor choice of font for the WWW. Check Google for
the reasons why.

xx-small means 3 'steps' smaller than the browser default. In other
words it's a good size for really small legalese footers that no one
actually needs to read. It's a terrible size for anything else.

IE5 (and IE6 if you've managed to trigger Quirks mode) makes xx-small
only two steps smaller than the defaulrt so the effect is lessened
somewhat - but the text is still much smaller than the size the user
has chosen.
[color=blue]
>table#maintb td{
> padding-left : 0px;
> padding-top : 0px;
> broder : 0x solid;
>}[/color]

Broder? 0x? Is this cut and pasted from your stylesheet or retyped?
This is just one reason why a URL is always more useful than code if
you want help.
[color=blue]
>table#maintb td#main{
> text-align: center;
> vertical-align:top;
> padding-top:20px;
>}
>
>here is my html:
>
><table id="main">
><tr>
><td>...side menus <td>
><td id = main">
> <table>
> ...
> my content table
> ...
> </table>
></td>
></tr>
></table>[/color]

Looks like you're using tables for layout. Stop.
[color=blue]
>The content table is not placed in the center of the cell in mozilla
>and firefox while in ie it is fine. Do I need something different?[/color]

ID must be unique. You have two id="main". Browsers may simply ignore
one or both of them. Running your code through the HTML validator
would have pointed out this error.

text-align does not affect block level elements like tables, it only
affects inline level elements like text and images. IE gets this
wrong.

So even if the browser forgives your first error and applies the style
to the inner td#main the table should not be centered. But all the
contents of that table should be centered (because text-align
inherits).

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <steve@pugh.net > <http://steve.pugh.net/>

[Jan Roland Eriksson]

Re: css for firefox, mozilla, and ie

On 21 Feb 2005 15:15:10 -0800, autogoor@yahoo. com wrote:
[color=blue]
>Hi, I am trying firefox and mozilla and found they are not
>as good as ie in terms of css...[/color]

[...]
[color=blue]
>...The content table is not placed in the center of the
>cell in mozilla and firefox while in ie it is fine.
>Do I need something different?[/color]

Yes; you need a complete restart.

The most standards compliant browsers you can find today are based on
the Gecko rendering engine; that is Mozilla, Firefox etc...
Opera also fits in the same category.

MSIE is basically a pest on the web.

Start your Google search on 'Doctype Sniffer' and learn how to tweak
even MSIE relatively close to standards compliance.

Work from there.

--
Rex

[autogoor@yahoo.com]

Re: css for firefox, mozilla, and ie

Well, you guys are all great.

But I have to make it right. What is the solution for my problem?

Thank you very mcuh.

autogoor

[mscir]

Re: css for firefox, mozilla, and ie

autogoor@yahoo. com wrote:
[color=blue]
> Well, you guys are all great.
> But I have to make it right. What is the solution for my problem?
> Thank you very mcuh.
> autogoor[/color]

I recommend taking a look at CSS table-less layouts, there are lots of
examples online, google for "tableless 2 column", e.g.

http://wellstyled.com/files/css-2col-fluid-layout/example2.html

Use a 4.01 strict (or transitional, in that order) doctype:

http://www.w3.org/TR/REC-html40/sgml/dtd.html

and use the validators to help you get your CSS and HTML :

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

If you do these things and run into problems you'll get tons of help in
the newsgroups.

Mike

[Chris Morris]

Re: css for firefox, mozilla, and ie

Jan Roland Eriksson <jrexon@newsguy .com> writes:[color=blue]
> The most standards compliant browsers you can find today are based on
> the Gecko rendering engine; that is Mozilla, Firefox etc...
> Opera also fits in the same category.[/color]

Don't forget Konqueror/Safari (KHTML engine) - I don't use it much
myself but when I test layouts in it it seems as good as Gecko/Opera
for rendering. A year ago I'd have said it was a little bit behind,
but not any more.

--
Chris

[Jim Moe]

Re: css for firefox, mozilla, and ie

autogoor@yahoo. com wrote:[color=blue]
>
> But I have to make it right. What is the solution for my problem?
>[/color]
To center a block-level element (like a table):
..block-center { margin-left: auto; margin-right: auto; }
<table class="block-center">

IE gets this right for tables.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Gus Richter]

Re: css for firefox, mozilla, and ie

Jim Moe wrote:[color=blue]
> autogoor@yahoo. com wrote:
>[color=green]
>>
>> But I have to make it right. What is the solution for my problem?
>>[/color]
> To center a block-level element (like a table):
> .block-center { margin-left: auto; margin-right: auto; }
> <table class="block-center">
>
> IE gets this right for tables.
>[/color]

Yes you're right that margin:0 auto; works in IE6 _if_ it is in
Standards Mode, but _never_ in IE5.5 which is always in Quirks Mode.

--
Gus

[Jim Moe]

Re: css for firefox, mozilla, and ie

Gus Richter wrote:[color=blue][color=green][color=darkred]
>>>
>>> But I have to make it right. What is the solution for my problem?
>>>[/color]
>> To center a block-level element (like a table):
>> .block-center { margin-left: auto; margin-right: auto; }
>> <table class="block-center">
>>
>> IE gets this right for tables.[/color]
>
> Yes you're right that margin:0 auto; works in IE6 _if_ it is in
> Standards Mode, but _never_ in IE5.5 which is always in Quirks Mode.
>[/color]
I'm totally sure goor's site is running HTML 4.01 Strict.

--
jmm dash list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Gus Richter]

Re: css for firefox, mozilla, and ie

Jim Moe wrote:[color=blue]
> Gus Richter wrote:
>[color=green][color=darkred]
>>>>
>>>> But I have to make it right. What is the solution for my problem?
>>>>
>>> To center a block-level element (like a table):
>>> .block-center { margin-left: auto; margin-right: auto; }
>>> <table class="block-center">
>>>
>>> IE gets this right for tables.[/color]
>>
>>
>> Yes you're right that margin:0 auto; works in IE6 _if_ it is in
>> Standards Mode, but _never_ in IE5.5 which is always in Quirks Mode.
>>[/color]
> I'm totally sure goor's site is running HTML 4.01 Strict.
>[/color]

If this is so, with the proper DTD (which is not indicated), and he
wishes to also support IE5.5 users (of which there are plenty still
around), then he will have to use both margin:auto and text-align:center.

--
Gus

[Christoph Paeper]

Re: css for firefox, mozilla, and ie

*Gus Richter* <gusrichter@net scape.net>:[color=blue]
>
> wishes to also support IE5.5 users (of which there are plenty still
> around), then he will have to use both margin:auto and text-align:center.[/color]

I wouldn't consider a non-centered box as non-support in general.

--
"A good listener is not only popular everywhere,
but after a while he gets to know something."
Wilson Mizner

[Gus Richter]

Re: css for firefox, mozilla, and ie

Christoph Paeper wrote:[color=blue]
> *Gus Richter* <gusrichter@net scape.net>:
>[color=green]
>>
>> wishes to also support IE5.5 users (of which there are plenty still
>> around), then he will have to use both margin:auto and text-align:center.[/color]
>
>
> I wouldn't consider a non-centered box as non-support in general.[/color]

In the sense of having it render as intended I would.

--
Gus

[Christoph Paeper]

Re: css for firefox, mozilla, and ie

*Gus Richter* <gusrichter@net scape.net>:[color=blue]
>
> In the sense of having it render as intended I would.[/color]

That's a strange defintion of "support", though, especially on the Web.

--
Useless Facts #8:
It is possible to lead a cow upstairs but not downstairs.
It is impossible to sneeze with your eyes open.

[Gus Richter]

Re: css for firefox, mozilla, and ie

Christoph Paeper wrote:[color=blue]
> *Gus Richter* <gusrichter@net scape.net>:
>[color=green]
>>
>> In the sense of having it render as intended I would.[/color]
>
>
> That's a strange defintion of "support", though, especially on the Web.
>[/color]

Really? Then how would you word/phrase it?

--
Gus

[Christoph Paeper]

Re: css for firefox, mozilla, and ie

*Gus Richter* <gusrichter@net scape.net>:[color=blue]
> Christoph Paeper wrote:[color=green]
>> *Gus Richter* <gusrichter@net scape.net>:[/color]
>[color=green][color=darkred]
>>> In the sense of having it render as intended I would.[/color]
>>
>> That's a strange defintion of "support", though, especially on the Web.[/color]
>
> Really? Then how would you word/phrase it?[/color]

I think, on the Web, you support someone (with a certain browser), if you
do not make it hard or even impossible for him to use your site. A little
misplaced box usually doesn't do that, except when it thus covers
otherwise visible information.

--
We are the e-continent!