Stylesheets - Tables and Mozilla

Author

Tables and Mozilla

Randy Webb

2004-02-20, 4:29 am

I know that I could use 64 div tags and position them all and get the
same effect. Or, some combination, to get the same look.
But my question is, why does this page:
<URL: http://www.hikksworld.com/chess/ />
Display a bottom margin under the images in Mozilla but not anywhere
else? When its finished, the pieces will be transparent gifs so you
won't notice it as much, but it has me more curious than anything else.
And, which is getting it right, MSIE6/Opera7 or Mozilla as far as the
display aspect goes?
--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

Steve Pugh

2004-02-20, 6:29 am

Randy Webb <hikksnotathome@aol.com> wrote:

>I know that I could use 64 div tags and position them all and get the
>same effect. Or, some combination, to get the same look.
>But my question is, why does this page:
><URL: http://www.hikksworld.com/chess/ />

403 forbidden, I guess you meant http://www.hikksworld.com/chess/

>Display a bottom margin under the images in Mozilla but not anywhere
>else?

<img> is an inline element. That means that it sits on the text
baseline. There is room under the text baseline for the descenders of
those letters which have them. In Standards mode (which your doctype
triggers) Mozilla gets this right. In Quirks mode or Almost Standards
modes it will copy the behaviour of other browsers.

So either change your doctype to trigger one of the other rendering
modes, or apply a little bit of CSS:
td img {display: block;}

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

Rijk van Geijtenbeek

2004-02-20, 6:29 am

On Fri, 20 Feb 2004 02:37:09 -0500, Randy Webb <hikksnotathome@aol.com>
wrote:

> I know that I could use 64 div tags and position them all and get the
> same effect. Or, some combination, to get the same look.
> But my question is, why does this page:
> <URL: http://www.hikksworld.com/chess/ />
> Display a bottom margin under the images in Mozilla but not anywhere
> else? When its finished, the pieces will be transparent gifs so you
> won't notice it as much, but it has me more curious than anything else.
> And, which is getting it right, MSIE6/Opera7 or Mozilla as far as the
> display aspect goes?

Opera 7.5 will also show those gaps...

Read all about it here:

http://devedge.netscape.com/viewsource/2002/img-table/
http://devedge.netscape.com/viewsou...most-standards/

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Karl Smith

2004-02-20, 10:30 am

"Rijk van Geijtenbeek" <rijk@opera.com> wrote:

> On Fri, 20 Feb 2004 02:37:09 -0500, Randy Webb wrote:
>
>
> Opera 7.5 will also show those gaps...
>
> Read all about it here:
>
> http://devedge.netscape.com/viewsource/2002/img-table/

The OP says Opera 7 agrees with MSIE, Rijk says Opera 7.5 agrees with
Mozilla and refers to this:

> http://devedge.netscape.com/viewsou...most-standards/

Does this mean the next Opera version will be blessed with an "almost
standards" mode like Mozilla? Tell me it isn't so!?

Randy Webb

2004-02-20, 6:30 pm

Karl Smith wrote:
> "Rijk van Geijtenbeek" <rijk@opera.com> wrote:
>
>
>
>
> The OP says Opera 7 agrees with MSIE, Rijk says Opera 7.5 agrees with
> Mozilla and refers to this:

Opera 7.23, guess I need to upgrade it :(

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

Randy Webb

2004-02-20, 6:30 pm

Steve Pugh wrote:

> Randy Webb <hikksnotathome@aol.com> wrote:
>
>
>
>
> 403 forbidden, I guess you meant http://www.hikksworld.com/chess/
>
>
>
>
> <img> is an inline element. That means that it sits on the text
> baseline. There is room under the text baseline for the descenders of
> those letters which have them. In Standards mode (which your doctype
> triggers) Mozilla gets this right. In Quirks mode or Almost Standards
> modes it will copy the behaviour of other browsers.
>
> So either change your doctype to trigger one of the other rendering
> modes, or apply a little bit of CSS:
> td img {display: block;}
>

I added display:block to the td and to img and Mozilla made a vertical
column of my page. But when I removed display:block from the td, it
displays as I wanted it. Thanks.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

Els

2004-02-20, 7:30 pm

Randy Webb wrote:

> Steve Pugh wrote:
>
>
> I added display:block to the td and to img and Mozilla made a vertical
> column of my page. But when I removed display:block from the td, it
> displays as I wanted it. Thanks.

td img {display:block;}
doesn't mean the same as
td {display:block;} and img {display:block;}

td img {} applies the style for any img that's inside a td

--
Els

Mente humana é como pára-quedas; funciona melhor aberta.

Rijk van Geijtenbeek

2004-02-20, 9:28 pm

On Fri, 20 Feb 2004 17:09:19 -0500, Randy Webb <hikksnotathome@aol.com>
wrote:

> Karl Smith wrote:
[color=darkred]
>
> Opera 7.23, guess I need to upgrade it :(

7.5 is only a preview right now. Together with the image-in-linebox
change, Opera 7.5 implemented the 'Almost-Standards-mode' for the same
DTDs as Mozilla [1], to prevent too many casualties...

[1] http://www.mozilla.org/docs/web-dev...s/doctypes.html

--
Rijk van Geijtenbeek

The Web is a procrastination apparatus:
It can absorb as much time as is required to ensure that you
won't get any real work done. - J.Nielsen

Steve Pugh

2004-02-20, 9:28 pm

Randy Webb <hikksnotathome@aol.com> wrote:
>Steve Pugh wrote:
>I added display:block to the td and to img

Why did you do that? Wasn't the code example I gave clear enough? Did
your newsreader insert a phantom comma between the td and the img?

>and Mozilla made a vertical column of my page.

Of course it did, that's what you told it to do.

>But when I removed display:block from the td,

In other words, when you did as I suggested.

>it displays as I wanted it.

I know.

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

Randy Webb

2004-02-20, 11:29 pm

Steve Pugh wrote:
> Randy Webb <hikksnotathome@aol.com> wrote:
>
>
>
> Why did you do that? Wasn't the code example I gave clear enough?

Obviously not.

>Did your newsreader insert a phantom comma between the td and the img?

No, and thank you for your sincere attitude in correcting what I did.

>
>
>
> Of course it did, that's what you told it to do.
>

Fair enough.

>
>
>
> In other words, when you did as I suggested.

No, the code still isn't the same as what you suggested, I simply added:

img {display: block;} to the CSS.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

Karl Smith

2004-02-21, 3:28 am

Randy Webb <hikksnotathome@aol.com> wrote:

> Steve Pugh wrote:
>
>
> No, and thank you for your sincere attitude in correcting what I did.

Welcome to c.i.w.a.s!

>
> No, the code still isn't the same as what you suggested, I simply added:
>
> img {display: block;} to the CSS.

But that selector will also affect images outside the table.
td img {display: block;} is what you want.

--
Karl Smith.

Randy Webb

2004-02-21, 1:29 pm

Karl Smith wrote:
> Randy Webb <hikksnotathome@aol.com> wrote:
>
>
>
>
> Welcome to c.i.w.a.s!
>
>
> But that selector will also affect images outside the table.
> td img {display: block;} is what you want.

Thanks Karl. I realized that after I read and replied but for that
particular page, img {display: block;} works fine because the form
buttons are there, there will be a paragraph of text and a script block
that will "move" the pieces to simulate past/saved chess games and thats
it. I do understand that if I added images outside the table, I would
have to change it accordingly :)

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/