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/