Hello folks. I thought my home page was all fine and dandy, until I looked
at it with Firefox in a smaller browser window. Instead of the central
graphic dropping down below the text as in MSIE (a bug?), the text
disappears underneath the graphic. Even the nav buttons start to go
underneath if one squishes the window tiny enough.
I was told it's probably not an (X)HTML issue but a CSS issue, and the most
likely culprit is the margin settings for the .photo div
..photo {
width: 43%;
margin: 1em 33% 0 22%;
}
I can't exactly remember why I put these particular values in. It has
something to do with the relative sizes of the three divs that are side by
side on my home page. I notice if I remove the margin settings completely
that in MSIE the graphic moves to the top of the page, not quite as
aesthetically pleasing to me as the way it lines up with the setting in
place. However, in Firefox with the margin settings gone, the graphic
doesn't stay in the middle even at larger screen resolutions. I'm pretty
sure Firefox is the one behaving right here, so I do need left and right
margins at least if I want to keep this layout. But I don't want my text to
disappear beneath the graphic! What can I do?
Is a solution obvious to anyone out there?
http://www.TheBicyclingGuitarist.net/index.htm
I use the @import trick with
http://www.TheBicyclingGuitarist.net...dex_filter.css
to direct smarter browsers to
http://www.TheBicyclingGuitarist.net/css/index.css
Thanks, Chris Watson a.k.a. "The Bicycling Guitarist"