5 replies [Last post]
has27
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-03-25
Posts: 2
Points: 0

Hi -

I've had a poke round here and can't find an answer to this one, so here goes...

Using Win2K, IE6.

I have a menu on the left hand side which I've defined as a float. For some reason, it shunts all the stuff in the main panel 2px to the right, but only for the height of the float.

This is most noticeable when the news items coincide with the bottom of the float (see attached file).

Any clues, anyone, as to what's going on? I've been fiddling with the thing for an hour and nothing's working...

Cheers,

Hamish

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 17 years 45 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

Float appears to have runaround

Is this the sort of problem you have?

http://www.stunicholls.myby.co.uk/boxes/floatfix.html

There are other fixes for this too.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Float appears to have runaround

You have found the famous IE 3px float bug.

A good explanation is at: http://www.positioniseverything.net/explorer/threepxtest.html

The simplest way to fix this is to use the * html selector which is parsed as valid CSS by IE even though it is not a valid selector. You then specify a height to the element that is beside the float like 1px or something. IE won't respect the height and will allow the block element to grow, but it will fix the 3px jog. So with IE - two wrongs make a right!* html .myblockelement {height:1%}/* avoid float bug */
DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

has27
Offline
newbie
Last seen: 17 years 35 weeks ago
Joined: 2004-03-25
Posts: 2
Points: 0

Huzzah!

Yes!

Ye gods. Why can't everyone just implement the same stuff?

Sigh. I think I need to go and have an apple.

Thank you *very* much indeed.

Hamish

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 18 years 4 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

Float appears to have runaround

DE wrote:

Quote:
The simplest way to fix this is to use the * html selector
which is parsed as valid CSS by IE even though it is not a valid selector.

Well, the selector is valid, but since it selects html only
when nested in another element, it should select nothing.
However, IE seems to have such a mystery element so
the selector works.

BTW, IE-Mac also sees this, but it must not see the
height value or it will break, so do this:

/* Hiding hack for IE-mac \*/
* html .myblockelement {height: 1%;}
/* End mac hiding hack */

That way IE-Mac is kept from seeing the inner hack.

http//www.positioniseverything.net/

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Float appears to have runaround

HTML has no parent so the '*' in * html doesn't really exist. It will validate as CSS, but there is no object in the DOM corresponding to it. But that is quibbling :?

As for the Fix mac hack, I agree, it should be there.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS