Opera versus IE7 displaying bug
Gianluca Turconi
I've a nasty problem with a IE7 floating bug that I'd like to resolve
without breaking xhtml+css code that works well in Opera and FF.
Example of the issue:
http://www.letturefantastiche.com/la_scoperta_del_fuoco_storia_mito_e_religione.html
If you scroll down this page you'll find some images with a short
description. They are inside a gray floating box.
Indeed, these boxes are causing, in IE7, a large amount of white space
below the description.
Example images
a) in Opera, Firefox, ...:
http://www.letturefantastiche.com/romanzi/opera.jpg
b) in IE7:
http://www.letturefantastiche.com/romanzi/IE7.jpg
I'm a newbie in XHTML+CSS web authoring and whatever I do to avoid that
white space in IE7 (suggestions I've found on the web: inserting an empty
"div" with "clear:both" after the floating box, using "overflow:hidden",
etc) simply break the layout in Opera and Firefox too.
It seems this bug is triggered by a CSS style fixed width like in this
part of code:
***CODE***
<div class="didascalia_sinistra" style="width: 234px"><img alt="La fucina
di Efesto - Opera di Rubens - immagine in pubblico dominio fonte
Wikipedia" title="La fucina di Efesto - Opera di Rubens - immagine in
pubblico dominio fonte Wikipedia" src="immagini/fuoco_efesto_rubens.jpg"
height="436" width="234" />
***END CODE***
Instead, the whole external CSS style for the site is available here:
http://www.letturefantastiche.com/css/style.css
Please, any hint/clue/suggestion that may creat a cross-browser compliant
template will be really appreciated.
TIA,
Gianluca
--
http://www.letturefantastiche.com/
Lettura gratuita o acquisto di libri e racconti di fantascienza, fantasy,
horror, noir, narrativa fantastica e tradizionale, oltre a notizie e testi
di approfondimento sugli stessi generi.
Gianluca Turconi
<luctur2004REM...@yahoo.it> ha scritto:
> Hello *,
>
> I've a nasty problem with a IE7 floating bug that I'd like to resolve
> without breaking xhtml+css code that works well in Opera and FF.
>
> Example of the issue:
>
> http://www.letturefantastiche.com/la_scoperta_del_fuoco_storia_mito_e_religione.html
>
> If you scroll down this page you'll find some images with a short
> description. They are inside a gray floating box.
>
> Indeed, these boxes are causing, in IE7, a large amount of white space
> below the description.
Finally, it's possible to create a cross-browser CSS stylesheet that
doesn't trigger this bug in IE7 and (apparently) works well in Opera.
It is necessary to add:
min-width:auto;
to the CSS properties of the tag following the floating div, in my case
the <p> of the main text.
Unfortunately, this solution triggers a different bug (blocks with italics
text doesn't show a right width), that can be resolved by setting
min-width:0;
So, these bug solutions appear to exclude each other. :(
Regards,