472,958 Members | 2,225 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,958 software developers and data experts.

Safari and float problem

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?
Feb 7 '08 #1
5 15517
In article <61*************@mid.individual.net>,
John <us**@example.netwrote:
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
Feb 7 '08 #2
In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:
In article <61*************@mid.individual.net>,
John <us**@example.netwrote:
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
Feb 7 '08 #3
On 2008-02-07, dorayme <do************@optusnet.com.auwrote:
In article <61*************@mid.individual.net>,
John <us**@example.netwrote:
>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.
Feb 7 '08 #4
In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:
On 2008-02-07, dorayme <do************@optusnet.com.auwrote:
In article <61*************@mid.individual.net>,
John <us**@example.netwrote:
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! <gI 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
Feb 7 '08 #5
Ben C wrote:
On 2008-02-07, dorayme <do************@optusnet.com.auwrote:
>In article <61*************@mid.individual.net>,
John <us**@example.netwrote:
>>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.
Or I could just put width: 100%; on #header?

The header is floated left to make its height dependent on the floated
elements inside.
Feb 8 '08 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: The Master | last post by:
Ok I went through and deleted code until I discovered the culprit. I then went back to my original style sheet and removed the CSS declaration that caused the floating to brake in safari 1.2. Once...
3
by: Kyle Matthews | last post by:
Hello all, I am currently working on a 2 column layout in which the smaller column is fixed at 100px, and the larger column takes up the remaining space. In Gecko browsers (Firefox, Netscape,...
3
by: Tim | last post by:
hi, I have some code that works in all web browsers except IE 5.2 for Mac (heard this one before? :-) the CSS code basically creates two id's, one is a container for the other. eg: CSS...
1
by: gerry | last post by:
Hi, although this is not strictly asp.net related, I was hoping that someone could confirm or debunk what appears to be a major problem with safari POSTs. with the following html : <!DOCTYPE...
34
by: Simon Wigzell | last post by:
document...focus() will scroll the form to move the specified text field into view on everything I have tried it with except Safari on the MAC. The form doesn't move. Any work around? Thanks.
2
by: darren | last post by:
I have a small Javascript problem with that mutch love web browser safari, I tested the code on all other browsers PC (Win) and Linux and IE on the mac and it seams to work ok, but for some reason...
8
by: dd | last post by:
Hi, I've discovered a scenario where Safari 1.3 (I need to make my stuff compliant with 1.3+) gets confused about the scope of local variables WITHIN functions that were created in dynamic...
2
by: Jeff | last post by:
Okay, I read that Safari is now available for Windows, so I downloaded it to test on a vb.net/visual web developer 2005 app. that I created. The app works fine in other browsers. While in...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
4
NeoPa
by: NeoPa | last post by:
Hello everyone. I find myself stuck trying to find the VBA way to get Access to create a PDF of the currently-selected (and open) object (Form or Report). I know it can be done by selecting :...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
2
by: GKJR | last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.