Firefox Mac css layout problems

HTML & CSS
1

Greetings,
I am having problems with css layout on Firefox Mac? I thought it might just be the way a Mac renders text but the sites are fine in Safari.

Below is a typical problem I am having with many of my sites -
www.jamesmcmurtrie.com.au - Homepage - flash animation on right is not lined up with image on right side. Also on this page - www.jamesmcmurtrie.com.au/garden_sculpture.html the text is pushed over the bottom border. - www.jamesmcmurtrie.com.au/garden_sculpture.html.
Here is the style sheet - http://www.jamesmcmurtrie.com.au/jam...rie-styles.css

Other sites of mine with same problem - just to name a couple.
http://www.pbseeds.com.auhttp://www…/products.html

Any help would be much appreciated.
Thanks,
davpat

2

hack for ff/mac? No. However I come across similar situations now and then and when I have as much empty space around things as you have, I instead change paddings or whatever until all browsers comply. It’s generally cleaner than hacking and frankly, nobody knows if you have 20px of padding vs 18px of padding, with the exception of when you are lining an element up with an image or the edge of a container who’s edges are visible.

Plus I’m still thinking differences between FF on OSes is influenced mostly by the windowing system, so code could not differentiate anyway. My FF is sensitive to the fact that my Desktop runs on Gnome, making fonts a bit bigger and making things wrap on Linux when they don’t wrap on Windows. Opera on the other hand seems more independent of windowing system.

In case you haven’t run across it, there also this thing with images, which sometimes only appears in Firefox (but really ought to show in everyone): inline images will be treated like text (because they are inline) and have a bit of space underneath them (to make room for the dangly parts of letters, known as descenders) which sometimes may hit you when you’re not expecting it.

So in my little part of my CSS sheet where I have “resets”, I usually have something like this:

img {
vertical-align: bottom; /making images blocks or block-context (like floats) also removes the space, but sometimes you don’t want them acting like blocks/
border: 0; /since usually I don’t want borders/
}

3

Sorry, I meant height declaration - not tag.
Apologies for that link before also - cut and paste error.
Yes, just been fiddling with the padding on the hgb site and that seems to be the problem - It adds 2 pixels to padding I think - strange and what a pain. Ever heard of a Mac FF hack?

4

Ok thanks for the link on that one… I had tried your earlier one by trying to merge the two bad links but it didn’t work…

anyway, in Firefox on Linux the images are making nice rows. The total allotted inner space is 940px (the 960 inner room of bgbodytext minus the padding of the wrapping p) and the total width of three images is bringing me to 932px (but I suck at math so don’t quote me on that). So, they should not only fit, but fit with room.

So can you get them to line up at all in your Firefox by, for example, removing the padding or the border of a single image? (as a test). All your numbers are ending up even so I can’t think it’s the odd-number bug.

btw you keep mentioning height tags… I’m thinking you mean the height declarations in your CSS? But you do still have those on the James McM site
#mainContent {
height: 417px;
…

Also, do you have access to another type of computer (PC or linux)? So far, my FF on Linux and on Windows are doing ok at default font sizes (which does possibly suggest something with FF/Mac).

5

Yes, your screen shot is similar to what I am experiencing. It looks like it is bold actually - similar to Safari but the Safari layout is as intended.That site is just one example of the problem I am having. The issue is not related to height tags - Below is another site where the images are ‘bumped’ down and not lined up across the page as it is in all other browsers (so text is not the issue). This css layout is very simple so I am quite convinced it is a ‘quirk’ within Mac Firefox. It is almost like it adds another pixel or two to the width. www.hallsgapbakery.com.au/products.html and here is the css -http://www.hallsgapbakery.com.au/hgb-styles.css
Thanks again.

6

It certainly makes sense that two browsers on your single machine would be able to show the same fonts at your system dpi, however my screenshot shows what I think you described as your problem, which I got to happen when I did a text-enlarge.

So, #main still has that height setting in the CSS? What are you getting when you remove it (disregarding any min-height stuff for now)?

What do you want to happen when text grows (whether because you add content, or because the user has a larger font size/setting)?

Also, is my screenshot showing what you are talking about? If not, could you upload a screenshot to your server of what you are seeing between Saffy vs FF?

*edit I’ve got Safari-for-Windows… I know it doesn’t render like Saffy/Mac but I should take a look and see what’s going on there, if anything.

7

Many thanks for your reply. I really appreciate you taking the time to give such an in depth reply. Some very helpful points - particularly regarding Flash, I was not aware of that.

Re: Firefox on Mac problem -
I understand what you are referring to in regards to text size and height tags and I have stopped using height tags (mostly).
Unfortunately, the text size is not enlarged in Firefox and not reduced in Safari. so that is not the problem. I wish it were as that would solve the problem over all the sites I am having issues with. I have tested this on 3 macs and it is the same on all.
Thanks again - any other thoughts there?
Cheers,
Davpat

8

Hi,
I just looked at one page: www.jamesmcmurtrie.com.au/garden_sculpture.html where you say the text flows over the bottom border.

This is NOT a firefox issue, though you’re kinda on the right track about how browsers render text being involved. Basically it seems your copy of Safari either is showing a smaller font or your copy of Firefox has text enlarged at least one time.
http://stommepoes.nl/textoverflow.png this is a screenshot where I’ve done some text-enlargements (not zoom). It’s firefox but all browsers will do it. Make the text bigger in Safari and Safari will do it as well.

What you are missing is, you’ve set a height on your #main. When you state
height: somethingpx;
you are setting an absolute height. It does not grow with the content. In web design we consider it a Bad Thing in general to set heights. Now, sometimes you do need to set a height. Often in these cases we will give a min-height to the modern browsers and then give an absolute height to IE6 (since IE6 only recognises “height” and yet treats it like min-height anyway… perfect).

#main {
min-height: 417px;
}

  • html #main {height: 417px;}

Tan hacks like * html are stable and will never be used by any future browsers… it is considered a “safe” hack and is ok to use unless you already have a separate stylesheet for IE6… in which case, just throw the height statement in there instead.

As far as the Flash, I do not allow Flash on my computer, so I am getting a lot of strange stuff (noscript is not a safe tag to use… someone behind a script-blocking firewall will not see noscript (because the browser DOES support scripts) and users with script blockers such as NoScript (what I use) also do not show noscripts reliably). Mostly, I don’t see why the rightside isn’t just floated right.

Personally, I’d have a div floated right, containing not a <p> but a header tag (<h2> or something, depending on document structure) with “glass blowing” in it, and then followed by a plain <object> tag (which can be styled in CSS like anyone else).

<object id=“tehflash”>…
…alt content of object tag…
</object>

Ideally, if the user has no flash, the alt content should appear (and it shouldn’t be the text “get flash player”). Objects themselves can just have id’s and you can set them to “display: block” to get block-goodness out of them.

These are only tangentally related but if you haven’t run across these articles, they are nice to read:

http://www.alistapart.com/articles/byebyeembed/