webkit just cuts off decimals in css number … how to workaround?


Tags: css,webkit,integer,width

Problem :

when i use numbers with decimal in my css specs like this:

#UploadWrapper.OneRow #UploadList #UploadUl li div.imageDiv, #UploadWrapper.TwoRows #UploadList #UploadUl li div.imageDiv{
    width: 58.8px;
    height: 44px;
}

it seems, that Firefox uses the right number do calc the position but rounds the amount to thisplay it ... because it can only display it to native pixels.

Webkit browsers just takes the integer of the number (58) ...

How can i:

1. Force the Webkit browser to behave like FF?  ... or ...
2. Sepecify an other width, that only takes effect in webkit browsers? I already tried
   -webkit-width: but it didn't work ...

Thanks for any advice!



Solution :

I don't think you can do this elegantly. In generally it's best to see pixels as atomic units that can't be divided.

Solutions:

  1. Find another way of positioning your elements. i.e. Use percentages or make the last column 1px shorter (or whatever your design needs to allow whole numbers to be used)
  2. Use JS browser sniffing to add a class of "webkit" or similar to the body element and then use this to apply different style rules.

I'd suggest not using the second solution as it's probably unnecessary complicated.


    CSS Howto..

    CSS3 Menu Shows Up Wrong (CSS3/HTML5)

    How to write page specific CSS in backbone js

    how to disable width: 100%; and box-sizing: border-box;

    How can I dynamically assign css line-height to nested objects using jQuery?

    How to convert css margin value to pixels with just plain javascript?

    Generated web font doesn't show dots above Ü

    How to set different table widths using CSS or jQuery?

    How to display grid line on top of highchart

    How to dynamically change a class css styling?

    How to get an li to expand to fit thumbnail content?

    How to select multiple elements using CSS

    Show/Hide elements in a table

    How to Auto-Resize a DIV with CSS while keeping Aspect Ratio?

    How to disable selection with specific class with js/css?

    How to change CSS attribute value based on querystring using jQuery

    How to call the event of one element in another element in JQuery

    How to indent input controls for a nested HTML list using CSS to a single column

    How to properly float this image verticaly aligned?

    How do I make a symmetrical downward pointing angle that is greater than 90 degrees using CSS?

    c# cassette - how to create different css bundles for different pages

    How to stop html/css object from resizing

    How to add a ToolTip for an icon inside my CSS file

    How to place elements on top of each other

    How to make the slider move right and left alternatively

    How to reuse footer with only HTML/CSS?

    How to change the text my button displays?

    Compass delimited list separator - how to set to – [duplicate]

    How do I make everything on this page centered and fully responsive for all browsers?

    How can I style html/form elements using CSS?

    how to open specific div by class name onclick