Are margins the problem?

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"

Hi,

Is a solution obvious to anyone out there?
set the left and right margins of phot to auto and set a div around

welcome, nav and image. Give this div a min-width. For IE you presumably
have to use the IE7-patch (dean.edward.name/IE7), since it does no
min-width...

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
Don't do this, use "conditional comments" (see google).

hth Chris

"Chris Leipold" <cleipold (AT) dietzk (DOT) de> wrote

Hi,
set the left and right margins of phot to auto and set a div around
welcome, nav and image. Give this div a min-width. For IE you presumably
have to use the IE7-patch (dean.edward.name/IE7), since it does no
min-width...

I use the @import trick with
Don't do this, use "conditional comments" (see google).

Hello and thanks for the tips. On

http://www.TheBicyclingGuitarist.net/index2.htm (with stylesheets at
http://www.TheBicyclingGuitarist.net...ex_filter2.css pointing to
http://www.TheBicyclingGuitarist.net/css/index.css )
I changed the .photo div right and left margins to auto and that stopped the
text from disappearing, but now the image has way too much white space
between it and the nav buttons to its left. So I tried setting just the left
margin for .photo div to 22% as before and leaving the right margin as auto.
That didn't work; the text disappeared as before. I changed both back to
auto for now on this test page, but as I say there is way too much white
space to the left of the graphic now.
I didn't try the container div because I want the graphic to drop down for
users with smaller screen resolutions. I want my site to be viewable on
handheld internet devices, but with my chosen layout viewable for those with
regular computer screen resolutions.
The "conditional comments" thing seems to be mainly for Internet Explorer.
My site is not a problem for Internet Explorer. It is for those deluded
fools still using Netscape 4.x that I use the @import trick. Correct me if
I'm wrong. I am by no means an expert at this stuff or I wouldn't be
pleading for help here..
Thanks

Brian <usenet3 (AT) julietremblay (DOT) com.invalid> wrote:

I use the @import trick with

Don't do this, use "conditional comments" (see google).

There's nothing wrong with using CSS parsing bugs instead of conditional
comments to hide CSS from MSIE.

Using conditional comments is a reliable way to separate >=IE5 from
other UAs, the use of CSS parsing bugs is not.

--
Spartanicus

Spartanicus <me (AT) privacy (DOT) net> writes:

Brian <usenet3 (AT) julietremblay (DOT) com.invalid> wrote:
I use the @import trick with

Don't do this, use "conditional comments" (see google).

There's nothing wrong with using CSS parsing bugs instead of conditional
comments to hide CSS from MSIE.

Using conditional comments is a reliable way to separate >=IE5 from
other UAs, the use of CSS parsing bugs is not.

Agreed, but do note >=IE5/Win. IE/Mac ignores conditional comments,
which is probably a good thing.

--
Chris