|
Posted by news on December 23, 2004, 10:47 am
Please log in for more thread options
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
|
|
Posted by David Baron on December 29, 2004, 3:11 pm
Please log in for more thread options
news@celticbear.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/ >
|
|
Posted by news on December 30, 2004, 8:40 am
Please log in for more thread options
David Baron wrote:
> news@celticbear.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
|
| Similar Threads | Posted | | BG image not appearing correctly in Firefox | September 16, 2007, 1:37 pm |
| Firefox/gecko tables formatting bug...or clueless coder? | June 27, 2005, 7:41 pm |
| Weird CSS Link problem in Firefox | May 14, 2008, 6:53 pm |
| Problems with divs in IE and Firefox | January 26, 2005, 6:49 am |
| Trying to figure out some problems in IE 6 and Firefox | June 12, 2007, 8:41 pm |
| Rendering problems with Mac Firefox and Layers | December 5, 2005, 3:44 pm |
| Problems with tables and layout in Firefox | January 4, 2006, 11:01 pm |
| sidebar not appearing | March 13, 2008, 7:09 pm |
| Box appearing when I click on graphics in IE 6.0 | November 10, 2005, 11:55 am |
| Background image not appearing | December 29, 2005, 11:42 pm |
|
XML Sitemap