css for firefox, mozilla, and ie

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

autogoor@yahoo.com - 21 Feb 2005 23:15 GMT

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

Reply to this Message

Steve Pugh - 21 Feb 2005 23:31 GMT

>Hi, I am trying firefox and mozilla and found they are not as good as
>ie in terms of css.

Correct. They are not as "good" as IE. They are much, much better.

>For example, here is my css
>
>table#maintb{
> border : 0px solid;
> width : 677px;

Fixed width design? A bad idea.

> height : 100%;
> font : xx-small Verdana, Arial, Helvetica, sans-serif;
>}

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.

>table#maintb td{
>    padding-left : 0px;
>    padding-top    : 0px;
>    broder        : 0x solid;
>}

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.

>table#maintb td#main{
> text-align: center;
[quoted text clipped - 16 lines]
></tr>
></table>

Looks like you're using tables for layout. Stop.

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

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

Signature

"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/>

Reply to this Message

Jan Roland Eriksson - 22 Feb 2005 00:20 GMT

>Hi, I am trying firefox and mozilla and found they are not
>as good as ie in terms of css...

[...]

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

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.

Signature

Rex

Reply to this Message

autogoor@yahoo.com - 22 Feb 2005 04:35 GMT

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

Reply to this Message

mscir - 22 Feb 2005 07:29 GMT

> 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

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

Reply to this Message

Jim Moe - 22 Feb 2005 16:43 GMT

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

Signature

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

Reply to this Message

Gus Richter - 22 Feb 2005 21:39 GMT

>> But I have to make it right. What is the solution for my problem?
>>
[quoted text clipped - 3 lines]
>
> IE gets this right for tables.

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.

Signature

Gus

Reply to this Message

Jim Moe - 23 Feb 2005 06:34 GMT

>>> But I have to make it right. What is the solution for my problem?
>>>
[quoted text clipped - 6 lines]
> 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.

I'm totally sure goor's site is running HTML 4.01 Strict.

Signature

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

Reply to this Message

Gus Richter - 23 Feb 2005 07:36 GMT

>>>> But I have to make it right. What is the solution for my problem?
>>>>
[quoted text clipped - 8 lines]
>>
> I'm totally sure goor's site is running HTML 4.01 Strict.

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.

Signature

Gus

Reply to this Message

Chris Morris - 22 Feb 2005 14:52 GMT

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

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.

Signature

Chris

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / February 2005

css for firefox, mozilla, and ie