CSS float problem Advanced

[Kropotkin]

Hi

All you CSS gurus. I have a problem with the way my CSS is handled between IE 7 and FF/Safari. This is the code:

Code: Select all

<div >
xx
<span style="float:left" >x</span>
<span style="float:left" >x</span>
</div>

The div has no style on it. In FF/Safari the spans float outside the div which causes major problems. Basically looking at it in Firebug the div is rendered as a single line and the spans (which in fact contain images) float above it - only the xx which has no float on it appears inside the div. In IE 7 the are rendered inside the div which expands to accomodate them.

why does this happen in FF and how could I make it act like IE 7?

with thanks

Justin

[Kropotkin]

Well. i did some research and this seems to be the rule:

In FF or safari if you float an element in a parent which does not have float or position set the children will float outside the parent.

In IE 7 floated child elements stay inside their parent even if that parent has no float or position

In IE 6 it is similar to FF/Safari except setting a width on the parent works as well as setting a float or position.

Does anyone know what the standards are?

[1840dsgn]

Does anyone know what the standards are?

not sure what your asking here.

And I guess if you just add position relative to the floats then it should work?

[Kropotkin]

Hi 1840dsgn

(do you have a human handle? 1840dsgn sounds so cryptic)

Yeah. I'm not sure what my question was - but it seems that the different browsers interpret floats in elements which are not floated in different ways - which is worrying because your design may look fine in all current browsers - but who knows about future ones?

Oh sorry about my behaviour yesterday. I was being stalked at work and was a bit tense

Justin

[1840dsgn]

No problems - I guess a good discussion if what forusm are all about!

Yea I know its just smeothing we have to put up with...but we can assume that the future browsers will be even better at handling CSS - therefore hopefully we shouldn't have too many fixes to think about.

But when it comes to browser release time you have to check your sites to make sure that a hack that maybe you were doing for IE support isn't now runing your site.

but as I said CSS support should only get better in which case - if you have coded your CSS well - it shouldn't be a problem with future releases.

but yea...cross browser support is a pain in the arse at the moment - especially with the less aware people sticking with IE6 and not upgrading.

We need to run a MASSIVE campaign web wide to get everyone to ditch IE6 lol.

[1840dsgn]

and yea my name is Mike!

[Kropotkin]

Mike

i see 1840dsgn is the name of your company

I found the tutorial on mod_rewrite helpful

Thanks

Justin

[1840dsgn]

I found the tutorial on mod_rewrite helpful

Excellent thats good to hear.