Weird formatting problems appearing only in Linux version of FireFox

I've a site: http://gto.ie-studios.net/products.php that looks
perfectly fine in Windows whether with IE or Firefox 1.0.
But when viewed in the Linux version of Firefox 1.0, images get
misaligned and breaks between then appear.
Why the two different behaviors on the same browser but different OS's?

Anyway, that page as an example DOES W3C HTML validate AND W3C CSS
validate as well.
So, there's no ERRORS per se, but I suppose there's still something I'm
technically doing wrong.

Could someone give me a clue what I need to remove/add/change to
prevent this problem? For all I know it's happening on Mac's as well,
but I don't have one to try it on.

Thanks for any help!
Liam

news (AT) celticbear (DOT) com wrote:

I've a site: http://gto.ie-studios.net/products.php that looks
perfectly fine in Windows whether with IE or Firefox 1.0.
But when viewed in the Linux version of Firefox 1.0, images get
misaligned and breaks between then appear.
Why the two different behaviors on the same browser but different OS's?

Anyway, that page as an example DOES W3C HTML validate AND W3C CSS
validate as well.
So, there's no ERRORS per se, but I suppose there's still something I'm
technically doing wrong.

Could someone give me a clue what I need to remove/add/change to
prevent this problem? For all I know it's happening on Mac's as well,
but I don't have one to try it on.

Thanks for any help!
Liam

Whats the difference in resolutions between the machines?



--
Mozilla Champion
UFAQ - http://www.UFAQ.org
Mozilla Champions - http://mozillachampions.mozdev.org
Mozilla Manual - http://mozmanual.mozdev.org/

"Moz Champion" <moz.champion (AT) sympatico (DOT) ca> wrote

news (AT) celticbear (DOT) com wrote:

I've a site: http://gto.ie-studios.net/products.php that looks
perfectly fine in Windows whether with IE or Firefox 1.0.
But when viewed in the Linux version of Firefox 1.0, images get
misaligned and breaks between then appear.
Why the two different behaviors on the same browser but different OS's?

Anyway, that page as an example DOES W3C HTML validate AND W3C CSS
validate as well.
So, there's no ERRORS per se, but I suppose there's still something I'm
technically doing wrong.

Could someone give me a clue what I need to remove/add/change to
prevent this problem? For all I know it's happening on Mac's as well,
but I don't have one to try it on.

Thanks for any help!
Liam


Whats the difference in resolutions between the machines?

Well, that's a good suggestion I wouldn't have thought of, but I don't think
that's the issue. I've viewed the site in Firefox on two different WinXP
machines--at home and at work. At home I have it at 1360x1024 and at work at
1152x864.
I set the Linux machine up with the same resolution as what it used to be in
WinXP: 1152x864.
And unless something REALLY weird is going on, it's certainly at that
because it's the ONLY option I have set for it in the Xwindows
configuration. X11org.conf if I recall (at home right now.)

What I'm going to do is download Opera browser when I get back to work
Wednesday, set it to emulate IE6 and see if that makes a difference. I
assume when Opera emulates IE6 it's emulating its fast and fancy free way of
dealing with code. =) But, maybe not. Maybe all it does is tell the Web
server that it's a different browser than it is.
In any case, I'll just wait until Wed to see if there's any new info I can
garner to work with.

Thanks for replying!
Liam

LRW wrote:

What I'm going to do is download Opera browser when I get back to work
Wednesday, set it to emulate IE6 and see if that makes a difference. I
assume when Opera emulates IE6 it's emulating its fast and fancy free way of
dealing with code. =) But, maybe not. Maybe all it does is tell the Web
server that it's a different browser than it is.

Opera does not emulate IE6. It can, however, identify itself as IE to
browser sniffers written by incompetent programmers.

news (AT) celticbear (DOT) com wrote:

I've a site: http://gto.ie-studios.net/products.php that looks
perfectly fine in Windows whether with IE or Firefox 1.0.
But when viewed in the Linux version of Firefox 1.0, images get
misaligned and breaks between then appear.
Why the two different behaviors on the same browser but different
OS's?

The two different behaviors are because the text input (under "Search")
has different widths. The width of text inputs that have 'auto' width
is determined from:
1. the number of characters the text input is supposed to contain,
which comes from the size attribute (28 in this case) or its
default value and
2. the font's metrics for average and maximum character width.
The formula is different depending on whether the font is monospace or
proportional.

So, based on what fonts are available, it seems like the character
widths of the fonts chosen when you specify 'font-family:
Verdana,Arial,Helvetica,sans-serif; font-size: 10px' differ between
platforms. The design is based around the assumption that those
character widths will be the same across platforms. This is not a safe
assumption, since different platforms tend to have different fonts
available and their font systems may even treat the same fonts slightly
differently.

Probably the best solution to this problem is to specify the width of
the input using CSS (e.g., 'width: 100%') rather than using the size
attribute, since there doesn't seem to be any special reason that the
text input needs to hold exactly 28 characters, but there does seem to
be a design preference that it fill a certain space.

-David

--
L. David Baron <URL: http://dbaron.org/ >

David Baron wrote:

news (AT) celticbear (DOT) com wrote:
I've a site: http://gto.ie-studios.net/products.php that looks
perfectly fine in Windows whether with IE or Firefox 1.0.
But when viewed in the Linux version of Firefox 1.0, images get
misaligned and breaks between then appear.
Why the two different behaviors on the same browser but different
OS's?

The two different behaviors are because the text input (under
"Search")
has different widths. The width of text inputs that have 'auto'
width
is determined from:
1. the number of characters the text input is supposed to contain,
which comes from the size attribute (28 in this case) or its
default value and
2. the font's metrics for average and maximum character width.
The formula is different depending on whether the font is monospace
or
proportional.

That's it! That's it exactly. On the index page I adjusted the class
for the text field to remove the character size but add a width in the
CSS, and /v'wah-lah/! Worked like a charm.
Now I know a little more about CSS. =)
And now I need to either make that search block an include or go
through and change it on every page. =/

Thanks for the help!
Liam