Re: Safari and float problem

In article <610ac2F1svmmiU1 (AT) mid (DOT) individual.net>,
John <user (AT) example (DOT) net> wrote:

Hi

Suppose I want a header containing an image floated left and a list of
horizontal links floated right.

So I float the image left. I then do the following with the list:

ul = float: right
li = display: inline
li a = display: block; float: left

I display: block on the a elements so I can apply vertical padding and
background images.

This works fine in IE6/IE7 and Firefox but not Safari for Windows, where
the list appears to lose its float: right property, and instead rests
against the right side of the image.

You can see a test case here:

http://www.lester1.eclipse.co.uk/test/

Is this a Safari float bug? How can I get the list to float right in Safari?

First thing to be said is that Safari, iCab and Opera line up
together on this and have the menu to the right more, whereas FF,
Camino, (and MacIE5 just btw) have it more to the left. So I am
inclined not to think a bug.

--
dorayme

In article
<doraymeRidThis-189130.08364908022008 (AT) news-vip (DOT) optusnet.com.au>,
dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <610ac2F1svmmiU1 (AT) mid (DOT) individual.net>,
John <user (AT) example (DOT) net> wrote:

Hi

Suppose I want a header containing an image floated left and a list of
horizontal links floated right.

So I float the image left. I then do the following with the list:

ul = float: right
li = display: inline
li a = display: block; float: left

I display: block on the a elements so I can apply vertical padding and
background images.

This works fine in IE6/IE7 and Firefox but not Safari for Windows, where
the list appears to lose its float: right property, and instead rests
against the right side of the image.

You can see a test case here:

http://www.lester1.eclipse.co.uk/test/

Is this a Safari float bug? How can I get the list to float right in Safari?

First thing to be said is that Safari, iCab and Opera line up
together on this and have the menu to the right more, whereas FF,
Camino, (and MacIE5 just btw) have it more to the left. So I am
inclined not to think a bug.

Second thing is to remove your:

#header {
float: left;
}

--
dorayme

On 2008-02-07, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:

In article <610ac2F1svmmiU1 (AT) mid (DOT) individual.net>,
John <user (AT) example (DOT) net> wrote:

Hi

Suppose I want a header containing an image floated left and a list of
horizontal links floated right.

So I float the image left. I then do the following with the list:

ul = float: right
li = display: inline
li a = display: block; float: left

I display: block on the a elements so I can apply vertical padding and
background images.

This works fine in IE6/IE7 and Firefox but not Safari for Windows, where
the list appears to lose its float: right property, and instead rests
against the right side of the image.

You can see a test case here:

http://www.lester1.eclipse.co.uk/test/

Is this a Safari float bug? How can I get the list to float right in Safari?

First thing to be said is that Safari, iCab and Opera line up
together on this and have the menu to the right more, whereas FF,
Camino, (and MacIE5 just btw) have it more to the left. So I am
inclined not to think a bug.

It's this issue, which I explained before here:

http://groups.google.co.uk/group/alt...15dbc687d633a4

Definitely not a bug in Safari or Opera. Firefox's interpretation of the
spec is a bit weird I think but not technically wrong.

OP should just get rid of float: left on #header. Then it will be the
full width of its container, and so right floats will go all the way to
the right and left floats all the way to the left.

In article <slrnfqn0cf.kg8.spamspam (AT) bowser (DOT) marioworld>,
Ben C <spamspam (AT) spam (DOT) eggs> wrote:

On 2008-02-07, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article <610ac2F1svmmiU1 (AT) mid (DOT) individual.net>,
John <user (AT) example (DOT) net> wrote:

Hi

Suppose I want a header containing an image floated left and a list of
horizontal links floated right.

So I float the image left. I then do the following with the list:

ul = float: right
li = display: inline
li a = display: block; float: left

I display: block on the a elements so I can apply vertical padding and
background images.

This works fine in IE6/IE7 and Firefox but not Safari for Windows, where
the list appears to lose its float: right property, and instead rests
against the right side of the image.

You can see a test case here:

http://www.lester1.eclipse.co.uk/test/

Is this a Safari float bug? How can I get the list to float right in
Safari?

First thing to be said is that Safari, iCab and Opera line up
together on this and have the menu to the right more, whereas FF,
Camino, (and MacIE5 just btw) have it more to the left. So I am
inclined not to think a bug.

It's this issue, which I explained before here:

http://groups.google.co.uk/group/alt...f0a4e2ba8dd70d
c/bd15dbc687d633a4?hl=en&lnk=st&q=#bd15dbc687d633a4

That was going to be my third thing when I found it! <g> I knew
you had said things on this.

Definitely not a bug in Safari or Opera. Firefox's interpretation of the
spec is a bit weird I think but not technically wrong.

OP should just get rid of float: left on #header. Then it will be the
full width of its container, and so right floats will go all the way to
the right and left floats all the way to the left.

--
dorayme

On 2008-02-08, John <user (AT) example (DOT) net> wrote:
[...]

OP should just get rid of float: left on #header. Then it will be the
full width of its container, and so right floats will go all the way to
the right and left floats all the way to the left.

Or I could just put width: 100%; on #header?

You could do that, but if the header has any borders, padding or margin
it will be too wide. I don't think it did so you should be fine.

The header is floated left to make its height dependent on the floated
elements inside.

Alternatives are to make #header overflow: hidden to make it a block
formatting context, or to put a clearing div after the elements inside
it.

See also http://netweaver.com.au/floatHouse