Firefox floating bug?

Dear Group,

The Site under the following link
(http://tomasio.laudatio.com/temp/schiepek/index.html) displays as I
want it to in IE 6 (under Win XP) but does not render correctly in
Firefox 1.0. As usually Firefox does HTML and CSS better than IE, I
would like to know what kind of mistake I made in coding the site.

I think it has to do with the "float"-property in the text selectors
(copy, h1, h2). the width of the text seems to be consumed by the
width of the image to its left in firefox

Please help, I need to fix this very urgently.

Kind regards
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

On Thu, 18 Nov 2004 15:07:20 +0100, tomasio <damnit (AT) jan (DOT) et> wrote:

Dear Group,

Where do [...]


--
Webontwerp <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
Blog <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
DTD <http://home.wanadoo.nl/b.de.zoete/dtd/not_so_strict.dtd>

in comp.infosystems.www.authoring.stylesheets, tomasio wrote:

Dear Group,

The Site under the following link
(http://tomasio.laudatio.com/temp/schiepek/index.html) displays as I
want it to in IE 6 (under Win XP) but does not render correctly in
Firefox 1.0. As usually Firefox does HTML and CSS better than IE, I
would like to know what kind of mistake I made in coding the site.

No mistake in coding, but on understanding the code.

I think it has to do with the "float"-property in the text selectors
(copy, h1, h2). the width of the text seems to be consumed by the
width of the image to its left in firefox

That is correct behaviour. Looked using Opera and assumed it loks same as
with gecko.

Please help, I need to fix this very urgently.

What should happen?

Anyway, while you are doing changes, get rid of your problem with tiny
fonts. I happened to have bigger normal font (I use much bigger font than
I need sometimes, but some people need big fonts) than your h1 font when
I looked your page. It was quite hard to understand what is heding and
what is not then...

No font on your site should be smaller than users default. You should
also make heading font sizes relative to body font

body {font-size:100%}
h1 {font-size:130%}
h2 ...

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>

On Thu, 18 Nov 2004 16:22:20 +0200, Lauri Raittila
<lauri (AT) raittila (DOT) cjb.net> wrote:

in comp.infosystems.www.authoring.stylesheets, tomasio wrote:

[snip]

(http://tomasio.laudatio.com/temp/schiepek/index.html)

<URL:http://validator.w3.org/check?uri=http%3A%2F%2Ftomasio.laudatio.com%2Ftemp %2Fschiepek%2Findex.html>

Looked using Opera and assumed it loks same as with gecko.

Pretty much, except the body margin has been removed on Gecko browsers and
IE. However, as Opera uses padding, there is extra space that the OP
wouldn't have intended.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

Lauri Raittila <lauri (AT) raittila (DOT) cjb.net> schrieb:

No mistake in coding, but on understanding the code.
So could you give my some hint where my lack of understanding origins?

I think it has to do with the "float"-property in the text selectors
(copy, h1, h2). the width of the text seems to be consumed by the
width of the image to its left in firefox

That is correct behaviour. Looked using Opera and assumed it loks same as
with gecko.
So if I am using a CSS-element that floats to the right of a preceding

element it will not take care for the preceding elements width?

Please help, I need to fix this very urgently.

What should happen?
I want the Layout display the way it does in IE. The image should be

on the left edge of the browser window, the text should flow around
the right edge of that image.

Anyway, while you are doing changes, get rid of your problem with tiny
fonts. I happened to have bigger normal font (I use much bigger font than
I need sometimes, but some people need big fonts) than your h1 font when
I looked your page. It was quite hard to understand what is heding and
what is not then...

No font on your site should be smaller than users default. You should
also make heading font sizes relative to body font

body {font-size:100%}
h1 {font-size:130%}
h2 ...
hm.. you are right. I'll fix this first.

--
kind regards,
tomasio
"describing an issue reveals the way to solve it"

tomasio <damnit (AT) jan (DOT) et> schrieb:

Dear Group,

The Site under the following link
(http://tomasio.laudatio.com/temp/schiepek/index.html) displays as I
want it to in IE 6 (under Win XP) but does not render correctly in
Firefox 1.0. As usually Firefox does HTML and CSS better than IE, I
would like to know what kind of mistake I made in coding the site.

I think it has to do with the "float"-property in the text selectors
(copy, h1, h2). the width of the text seems to be consumed by the
width of the image to its left in firefox

Please help, I need to fix this very urgently.

Kind regards
As nobody could really give me a hint, I solved the problem with

removing the float property. If I understood it right, "float"
calculates the width of the parent element and subtracts the width of
the floated element from this. As IE renders this incorrect (it does
_not_ subtract the width, but renders the floated element in its full
width), I solved my display problem with margins. Looks nice also:
http://tomasio.laudatio.com/temp/schiepek/index.html
--
kind regards,
tomasio
"describing an issue reveals the way to solve it"