I wrote a menu where the total width of the buttons should be always the same width of the menu bar. So i take the whitespace and devide it over the buttons. It works on: Windows: FF IE6 IE7 IE8 Mac: Safari Chrome But it doesnt work on Firefox on the Mac can does anyone have an idea? The example can be found: http://www.bobkarreman.com/menu_prototype/menu/menu.html EDIT: The steps i take are: I Calculate the whitespace. Divide that by the number of buttons and round it. Add that together with the current padding to the button. To be sure there are no rounding issues Each time a add the padding to a button i subtract it from the totalWhitespace and on the last LI i add the totalWhitespace. So it can be that the last LI gets 1 or 2 pixels less or more.

Reputation:

Firefox Mac alignment issue

I wrote a menu where the total width of the buttons should be always the same width of the menu bar. So i take the whitespace and devide it over the buttons.

It works on: Windows: FF IE6 IE7 IE8 Mac: Safari Chrome

But it doesnt work on Firefox on the Mac can does anyone have an idea?

The example can be found: http://www.bobkarreman.com/menu_prototype/menu/menu.html

EDIT:

The steps i take are:

I Calculate the whitespace.
Divide that by the number of buttons and round it.
Add that together with the current padding to the button.
To be sure there are no rounding issues Each time a add the padding to a button i subtract it from the totalWhitespace and on the last LI i add the totalWhitespace.

So it can be that the last LI gets 1 or 2 pixels less or more.

Upvotes: 3

Answers (2)

eyelidlessness

Reputation: 63529

Looking at your console output, it looks like it is not necessarily applying the calculated padding as expected. It seems to be calculating marLeft to 38 (and last to 43) but applying 43 to every <a>. I could be off, I'm only guessing at the meaning of your console output.

It's worth noting also that it's off by a pixel for me in Safari (the last menu's <a> has padding-left: 39px whereas the others have padding-left: 40px, and it is one pixel from the edge of the container).

Edit: I may be misunderstanding your console output, Safari is saying marLeft is 35 but applying 40 (except for last).

Edit 2: I really appreciate there being information in the console to look at. This is the right way to post an example. Thanks!

Upvotes: 0

tybro0103

Reputation: 49723

Well since you're changing the li's widths dynamically their width values are floats rather than integers. It looks to me like the browsers all handle that differently. Try doing the Math.floor function after it's calculated.

Upvotes: 1

Firefox Mac alignment issue

Answers (2)

Related Questions