CODEWITHSUNDEEP
jquerycssfirefoxgoogle-chromerendering
Matthew
Matthew

Reputation: 15662

setting widths works correctly in chrome, but not firefox?

I'm building a little pagination with jquery. I found a plugin that does some similar things (I'm still using my own). Both mine and this plugin: http://tympanus.net/jPaginate/ have a similar problem in firefox. If you view the "Demo 5" on that plugin's demo page, you can see the problem. In chrome it's perfectly fine. In firefox the last number wraps around to the next line.

Basically I have an ul with li elements in it. I need to add up all the li widths and set the ul width to that number. I need it to be precise (if you add more to the width, then the wrapping issue doesn't occur, but when you scroll to the end of the list of numbers, there's a bunch of space)

Any ideas why firefox is behaving this way?

I'm on mac osx by the way.

Upvotes: 2

Views: 1444

Answers (3)

Saikat Mallick
Saikat Mallick

Reputation: 21

I solved the issue: Jquery.paginate.js -> Just replace 

_ul.css('width',insidewidth+'px'); [3rd line from last]

with

_ul.css('width',insidewidth+5+'px');

Its Solved.Working in FF,Crome,i.e 7,8,9 Enjoy

Upvotes: 2

Boris Zbarsky
Boris Zbarsky

Reputation: 35084

What method are you using to get the <li> widths? If you're using jQuery's width() or offsetWidth or clientWidth then you'll get incorrect numbers, because all those round off non-integer widths. The only things that will give you correct answers are computed style widths and getBoundingClientRect().width.

Chrome rounds widths to integers before doing layout, so the rounding methods don't do any more damage there (but as a result it can end up with seams around edges when the sum of the rounded widths doesn't actually end up to the width of the container).

Upvotes: 1

Thomas Shields
Thomas Shields

Reputation: 8943

I played around with the dev tools in IE and when i removed the letter-spacing:2px style on the body, it fixed it. Not sure if this will fix it for firefox, but it fixed it for IE9-10 and i'm guessing it's the same issue.

Upvotes: 0

Related Questions