Why margin:2.5px does not work? How to solve this problem

Question

Why margin:2.5px does not work? at one situation in my code i want to give margin:2.5px in IE6 conditional CSS to solve IE double margin and my default css has margin:5px but in IE6 css margin:2.5px and margin:2px creating same margin. then how to get same margin on both browser?

This is code of default screen CSS

    #newsHeadline LI 
{font-weight: bold; 
list-style-position: inside; 
font-size: 13px;
margin: 5px 0px;
width: 320px; 
line-height:
normal; list-style-type: disc; 
position: relative}

this is css code in conditional i'm writing #newsHeadline LI {margin: 2.5px 0px}

Edit: 15 feb

if margin:2.5px does not work then how to get same margin in both browser IE and FF? Is there any other way?

Answer 1

Because px is the smallest unit possible. U really can't divide one display point, can you?

Edit: AS for your problem, if there is no interference with background (i.e. different color), you can try setting padding instead of margin for IE6.

Answer 2

You have to understand that a pixel is kind of like an atom. A pixel is the smallest discrete component of an image or picture on a screen.

Therefore, it is impossible to have half a pixel as it is already the smallest unit of measure possible. IE6 is properly interpreting the style in that case.

Answer 3

A pixel is the smallest unit of display on your screen. Since nothing smaller can be displayed, so there is no way to place an item on the screen at a fractional pixel position.

Answer 4

You can always set the box to display: inline, but that is not always what you want. Double margin affects block level elements.

As @Andrew Moore points out if you use this in your main stylesheet it will not be future proof and should be included in the IE6 stylesheet. Thanks.

Also, in some cases, you can use padding instead of margin since padding doesn't double. However, padding effects different properties of your layout and box model.

Answer 5

Why margin:2.5px does not work?

As others have pointed out already, a pixel is, by definition, the smallest unit, and thus can't be divided any further, by definition.

Then how to get same margin on both browser?

The usual fix is to set display: inline; on the element in question. In fact, some suggest to just apply the inline fix to all floats if you like, making sure that the fix only applies to IE5 and IE6 (e.g. by using conditional comments), since there are no known side effects in these browsers.

Answer 6

While plenty of people have suggested that the pixel is indivisible, and therefore a fractional pixel value makes no sense, the CSS standard does not actually rule out fractional values. Indeed, it suggests that when a high-resolution device is used, a CSS pixel unit should be mapped to a larger number of device-specific elements. My reading is therefore that 2.5px should not be explicitly wrong, just that you might not be able to rely on it to do something useful, especially, I might say, in Internet Explorer.

Answer 7

On the indivisibility of pixel: with the Zoom feature in modern browsers comes the notion of a "logical pixel". A smart enough implementation of zooming could and should use the fractional pixels...

Answer 8

you probably just need the fish fix

<ul
><li>content 1</li
><li>content 2</li
></ul>

remember no space between each ul/ol or li