Mozilla; floats and width - bug?

[Stian Lund]

Hi, on the following page,
http://stian.freeshell.org/index.php
the floated image in the latest post is shown as tiny/zero-width in
Mozilla 1.7 and Firefox 1.0 (you can just about make it left of the
text), while Opera 8 and MSIE shows it like intended, i.e. using the full
width of the picture.

The CSS is here - http://stian.freeshell.org/default.css

I just started using floated images in my posts, and I had not noticed it
before I tested with Mozilla. I've put the most relevant part of the code
below, although this is possibly caused by some cascading fault from
parent classes (or a bug in Mozilla)?

..imgfloat {
max-width: 100% !important; /* doesn't work? */
text-align: center;
margin: 0.25em;
}

..imgfloat p {
width: 200px; /* for caption wrapping */
font-style: italic;
font-size: 90%;
margin: 0 !important;
}

..picleft {
float: left;
margin-right: 1em;
}

..picright {
float: right;
margin-left: 1em;
}

It also displays correctly if I add the caption paragraph underneath the
image, like in the post directly below. It does not matter if the float
is left or right apparently.

My CSS has become very complicated and interleaved lately (time for a
cleanup), so I have a hard time finding the cause of this through the
different classes, but while testing I found that the problem disappeard
if I remove the width attribute of the 'imgfloat p' class, but this is
not acceptable as it stops any caption text from wrapping correctly ...
:/

Could any CSS-gurus have a look at this and maybe point me in the right
direction to fix this? Is Mozilla to blame or is it my code which is just
too messy? :)

best regards,
Stian Lund

[Spartanicus]

Stian Lund <st***************@operamail.com> wrote:

http://stian.freeshell.org/index.php
the floated image in the latest post is shown as tiny/zero-width in
Mozilla 1.7 and Firefox 1.0 (you can just about make it left of the
text), while Opera 8 and MSIE shows it like intended, i.e. using the full
width of the picture.

The CSS is here - http://stian.freeshell.org/default.css

The cause of the problem:

body img {
border: 0;
max-width: 100% !important;
}

You are using max-width inappropriately.

Next time instead of dumping a complete design onto the group make some
effort to find the issue yourself, if you can't then at least minimise
the code: http://www.spartanicus.utvinternet.i...s_help_you.htm

--
Spartanicus

[Stian Lund]

Spartanicus <[e-mail]> wrote in
news:4k********************************@news.spart anicus.utvinternet.ie:

body img {
border: 0;
max-width: 100% !important;
}

You are using max-width inappropriately.
Thanks a lot, that fixed it - I have NO idea what I thought when I placed
that there in the first place though. Not really sure *why* that caused
the result though, but maybe someone would care to enlighten me? :)

I just read that width should be explicitly defined for floats, so I'll
try redesigning it to use a fixed width for the image, that way the
caption can inherith the width of the parent element. It might be a
better way of doing this, although all images would then be scaled to the
static size.
Next time instead of dumping a complete design onto the group make
some effort to find the issue yourself, if you can't then at least
minimise the code:

Yes, sorry about that, I was a bit frustrated after not finding the
problem after a couple of hours messing with it. I was in the process of
making a minimized test page, but was not able to reproduce the error. No
wonder... :P

Thanks for the help,
Stian