Sprite menu - a float issue on IE8

HTML & CSS
1

Hello all,

If you see with Firefox I’m trying to accomplish the following:
http://www.occ.nuvemk.com/CssMarcio/secundariaOcc.html

With the above CSS:

The floats seem to be understood on latest FF, Opera and Mac Safari -
But on IE8 the clear seems to clear more then what it should ?

I will not say that it’s IE8 fault etc… cause normally I’m the issue. :s

Can I have your help in order to have the same result that we get on FF and others, in IE 8 as well?

Thanks a lot,
Márcio

2

The code I gave you originally had the same effect :slight_smile: I have it working locally right in front of me in IE8 and Firefox.

If I clear the floats, the elements will stay like this:
A
B
C

But I want then to be like this:
A
B C

No?

That’s why I have tried to clear the second element so that it could get out of the normal flow.

I’m getting them like this, that C should be side by side with B. :frowning:
AC
B

I removed the float from the first element only so that B started on the next line and then following on the same line by C because they were both floated.

Glad you found another solution anyway :slight_smile:

3

Yes. True. Ok. Now I have two solutions.
:slight_smile:

I will have do deal with that text-intend because it seems weird and allow somehow, the menu to resize but those are other arguments.

Thanks a lot for your time once again,
Márcio

4

Ok, given this 3 lis, I do have the clear applied to the middle one.
The first and the second stays alongside but the third (and despite the place that it seems to have, seems to prefer to say one bottom line). :s

If I clear the floats, the elements will stay like this:
A
B
C

But I want then to be like this:
A
B C

No?

That’s why I have tried to clear the second element so that it could get out of the normal flow.

I’m getting them like this, that C should be side by side with B. :frowning:
AC
B

I believe I’ve tried that, but with no luck.

But, let me think, how can I not float the first item:
If I float the container, and at the first item inside that container, I apply a clear property would that do the trick?
Or, if I float all other elements, and the first I apply float:none; ?

Please be patience,
Márcio

5

Hello Paul… I seem I will never get this. And once I start to get it, I have to go to PHP or whatever, it’s soo frustrating… :s

Oh well,

I’m not totally following…

I have tried:
#menuSecundarioCampusChallenge .campusChallenge{float:none}

But I get the same results.

(the file on the link above was updated).

??

6

Ok…

I have:
a) corrected the markup.
b) contain the floats with overflow property applied on the ul.
c) give a explicit width to the ul so that, the out of the flow
element could not go more upper then what it should.

Seems to be ok now:
http://www.occ.nuvemk.com/CssMarcio/secundariaOcc2.html

Uff…

:slight_smile: Thanks a lot for your feedback.

7

In IE when you have a sequence of floats you can’t just add clear to one float because the following floats will still stack alongside the original element.

You would have to have an element that clears the floats above completely and is 100% wide so that no more floats rise up (or is non floated and cleared.).

The simplest solution with the code you have shown is not to float the first item.


#menuSecundarioCampusChallenge .campusChallenge{float:none}

Of course I don’t know what else you had planned here so it may not be suitable.