CSS positioning cross browser inconsistency...

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
based browsers) the positioning of one of a couple of the buttons is
different.

What I am trying to achieve - cross browser button layout - a single
line of buttons where two buttons (btnLastViewedSlide and
btnRestartAudio) are anchored to the left side of the page and one
(btnExit) anchored to the right side; two buttons centered in the
middle of the page (btnPrevious & btnNext) and one button centered in
the space between btnNext and btnExit on the right hand portion of the
page.

The layout as rendered by IE and Firefox is was I was trying to
achieve but when I view the page in Safari and Chrome the
btnReferenceMaterial is to the left of center versus the right + plus
the btnRestartAudio icon is wrapped to the next line. Any idea why
this is happening and what can I change to achieve my desired layout?
It seems to me that the CSS line "margin-left: 21.375%;" may be
causing webkit browsers a problem.

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

In article
<19e21a6f-23c0-4205-94b7-61a75ab61b99 (AT) v38g2000yqb (DOT) googlegroups.com>,
"celoftos (AT) gmail (DOT) com" <celoftis (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
based browsers) the positioning of one of a couple of the buttons is
different.

What I am trying to achieve - cross browser button layout - a single
line of buttons where two buttons (btnLastViewedSlide and
btnRestartAudio) are anchored to the left side of the page and one
(btnExit) anchored to the right side; two buttons centered in the
middle of the page (btnPrevious & btnNext) and one button centered in
the space between btnNext and btnExit on the right hand portion of the
page.

The layout as rendered by IE and Firefox is was I was trying to
achieve but when I view the page in Safari and Chrome the
btnReferenceMaterial is to the left of center versus the right + plus
the btnRestartAudio icon is wrapped to the next line. Any idea why
this is happening and what can I change to achieve my desired layout?
It seems to me that the CSS line "margin-left: 21.375%;" may be
causing webkit browsers a problem.

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

Not sure where you get the idea that it is "W3C 1.0 HTML and W3C 1.0
CSS"?

Consider getting rid of all your CSS and instead:

#btnRestartAudio {vertical-align: middle; float: left;}
#nav {width: 12em; margin: auto; text-align: center;}
#btnReferenceMaterial {margin-left: 10%;}
#btnLastViewedSlide, #btnRestartAudio {float: left;}
#btnExit {float: right;}
#btnReferenceMaterial {float: right; margin-right: 3em;}

and rearrange the html as in

<http://dorayme.netweaver.com.au/alt/align.html>

--
dorayme

On 2009-02-07, celoftos (AT) gmail (DOT) com <celoftis (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
based browsers) the positioning of one of a couple of the buttons is
different.

What I am trying to achieve - cross browser button layout - a single
line of buttons where two buttons (btnLastViewedSlide and
btnRestartAudio) are anchored to the left side of the page and one
(btnExit) anchored to the right side; two buttons centered in the
middle of the page (btnPrevious & btnNext) and one button centered in
the space between btnNext and btnExit on the right hand portion of the
page.

The layout as rendered by IE and Firefox is was I was trying to
achieve but when I view the page in Safari and Chrome the
btnReferenceMaterial is to the left of center versus the right + plus
the btnRestartAudio icon is wrapped to the next line. Any idea why
this is happening and what can I change to achieve my desired layout?
It seems to me that the CSS line "margin-left: 21.375%;" may be
causing webkit browsers a problem.

The problem is that you've left the left property as "auto" on that
element.

CSS 2.1 says that means it's supposed to go where it would have gone if
it had been normal-flow (i.e. not absolutely positioned), but that the
browser is free to guess at that position.

Safari is guessing 0. Firefox is guessing something else (and then your
left margin is getting added on to that). Set left to 0 on that element
and Firefox looks the same as Safari. It's a difficult guess to make
because if it hadn't been absolutely positioned it would have been
inline.

It's best to set at least one out of left and right and at least one out
of top and bottom on anything absolutely positioned so you aren't
relying on this rule that says browsers are allowed to guess.

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

In article
19e21a6f-23c0-4205-94b7-61a75ab61b99...oglegroups.com>,
"celoftos (AT) gmail (DOT) com" <celoftis (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
based browsers) the positioning of one of a couple of the buttons is
different.

What I am trying to achieve - cross browser button layout - a single
line of buttons where two buttons (btnLastViewedSlide and
btnRestartAudio) are anchored to the left side of the page and one
(btnExit) anchored to the right side; two buttons centered in the
middle of the page (btnPrevious & btnNext) and one button centered in
the space between btnNext and btnExit on the right hand portion of the
page.

The layout as rendered by IE and Firefox is was I was trying to
achieve but when I view the page in Safari and Chrome the
btnReferenceMaterial is to the left of center versus the right + plus
the btnRestartAudio icon is wrapped to the next line. Any idea why
this is happening and what can I change to achieve my desired layout?
It seems to me that the CSS line "margin-left: 21.375%;" may be
causing webkit browsers a problem.

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

Not sure where you get the idea that it is "W3C 1.0 HTML and W3C 1.0
CSS"?

Consider getting rid of all your CSS and instead:

#btnRestartAudio {vertical-align: middle; float: left;}
#nav {width: 12em; margin: auto; text-align: center;}
#btnReferenceMaterial {margin-left: 10%;}
#btnLastViewedSlide, #btnRestartAudio {float: left;}
#btnExit {float: right;}
#btnReferenceMaterial {float: right; margin-right: 3em;}

and rearrange the html as in

http://dorayme.netweaver.com.au/alt/align.html

Good stuff. I almost suggested something like that but thought you might
come up with something.

He did say he wanted Reference Material centered between Next and Exit
though, which you can do something like this:

http://www.tidraso.co.uk/misc/alignProb.html

Involves moving things around in the HTML a bit.

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

On 2009-02-07, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article
19e21a6f-23c0-4205-94b7-61a75ab61b99...oglegroups.com>,
"celoftos (AT) gmail (DOT) com" <celoftis (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
....

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

Not sure where you get the idea that it is "W3C 1.0 HTML and W3C 1.0
CSS"?

Consider getting rid of all your CSS and instead:

....

http://dorayme.netweaver.com.au/alt/align.html

Good stuff. I almost suggested something like that but thought you might
come up with something.

Two can play at this game pal, see below <g>

He did say he wanted Reference Material centered between Next and Exit
though, which you can do something like this:

http://www.tidraso.co.uk/misc/alignProb.html

Involves moving things around in the HTML a bit.

Yes, I cheated on this last bit. Nevertheless, I began and then thought,
bugger it, why should I do all the work, Ben will come up with something
on this. And you did, nicely. <g>

Looking at yours, I notice that the 'ref material' button steps down the
page when text enlargement is clicked on Safari (*less* noticeable on
FF).

I looked at mine again and noticed previous/next buttons doing the same
thing!

I have tweaked with a line-height of zero for the prev/next buttons
wrapper. I also took a stab at a different margin to make the reference
button appear a little more centred (because I am lazy and is what I
would do instead of fussing over the exact specification).

<http://dorayme.netweaver.com.au/alt/align.html>

--
dorayme

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

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

On 2009-02-07, dorayme <doraymeRidThis (AT) optusnet (DOT) com.au> wrote:
In article
19e21a6f-23c0-4205-94b7-61a75ab61b99...oglegroups.com>,
"celoftos (AT) gmail (DOT) com" <celoftis (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
...

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

Not sure where you get the idea that it is "W3C 1.0 HTML and W3C 1.0
CSS"?

Consider getting rid of all your CSS and instead:

...

http://dorayme.netweaver.com.au/alt/align.html

Good stuff. I almost suggested something like that but thought you might
come up with something.

Two can play at this game pal, see below <g

He did say he wanted Reference Material centered between Next and Exit
though, which you can do something like this:

http://www.tidraso.co.uk/misc/alignProb.html

Involves moving things around in the HTML a bit.

Yes, I cheated on this last bit. Nevertheless, I began and then thought,
bugger it, why should I do all the work, Ben will come up with something
on this. And you did, nicely. <g

Looking at yours, I notice that the 'ref material' button steps down the
page when text enlargement is clicked on Safari (*less* noticeable on
FF).

Yes-- floats do that. But arguably it's better than scrolling off to the
right.

I looked at mine again and noticed previous/next buttons doing the same
thing!

I have tweaked with a line-height of zero for the prev/next buttons
wrapper.

I suppose that's to get the text in them aligned with the text in the
floats? Noticeable at large font sizes.

You could also use #nav input { vertical-align: top }.

My version probably needs that for the Reference Material button since
that one isn't a float and all the others are.

I also took a stab at a different margin to make the reference
button appear a little more centred (because I am lazy and is what I
would do instead of fussing over the exact specification).

http://dorayme.netweaver.com.au/alt/align.html

On Feb 7, 7:46*pm, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:

In article <slrngos4sn.382.spams... (AT) bowser (DOT) marioworld>,
*Ben C <spams... (AT) spam (DOT) eggs> wrote:





On 2009-02-07, dorayme <doraymeRidT... (AT) optusnet (DOT) com.au> wrote:
In article
19e21a6f-23c0-4205-94b7-61a75ab61... (AT) v38g2000yqb (DOT) googlegroups.com>,
*"celof... (AT) gmail (DOT) com" <celof... (AT) gmail (DOT) com> wrote:

I have a simple page with some buttons arranged using some CSS.
Everything looks OK in IE & FireFox but in Chrome & Safari (Webkit
...

The page is valid W3C 1.0 HTML and W3C 1.0 CSS. Here is a sample page:
http://www.freewebtown.com/emailceloftis/ButtonBar.html.

Not sure where you get the idea that it is "W3C 1.0 HTML and W3C 1.0
CSS"?

Consider getting rid of all your CSS and instead:

...



http://dorayme.netweaver.com.au/alt/align.html

Good stuff. I almost suggested something like that but thought you might
come up with something.

Two can play at this game pal, see below <g



He did say he wanted Reference Material centered between Next and Exit
though, which you can do something like this:

http://www.tidraso.co.uk/misc/alignProb.html

Involves moving things around in the HTML a bit.

Yes, I cheated on this last bit. Nevertheless, I began and then thought,
bugger it, why should I do all the work, Ben will come up with something
on this. And you did, nicely. <g

Looking at yours, I notice that the 'ref material' button steps down the
page when text enlargement is clicked on Safari (*less* noticeable on
FF).

I looked at mine again and noticed previous/next buttons doing the same
thing! *

I have tweaked with a line-height of zero for the prev/next buttons
wrapper. I also took a stab at a different margin to make the reference
button appear a little more centred (because I am lazy and is what I
would do instead of fussing over the exact specification).

http://dorayme.netweaver.com.au/alt/align.html

--
dorayme

Thanks for your suggestions!