4

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?

Jitendra Vyas
  • 148,487
  • 229
  • 573
  • 852

7 Answers7

9

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.

Tim
  • 9,171
  • 33
  • 51
2

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.

Adam Kiss
  • 11,811
  • 9
  • 48
  • 81
  • 11
    Hah! That's what they said about atoms, too. I don't believe a word you say! – Pekka Feb 14 '10 at 17:50
  • @Pekka: Well... you don't want your LCD to produce electricity, do you? Then pixel splittin is big no no. @Andrew... why would you do such a thing? – Adam Kiss Feb 14 '10 at 17:55
  • @Pekka: Technically it should be possible to position text using sub pixel size. It's possible to position text to 1/3 of a pixel if you use ClearText aliasing. So I guess it could be possible. But only for text. Just to make it clear: I'd avoid such situation as well because it smells of problems. – Robert Koritnik Feb 15 '10 at 16:02
  • @Robert, I was only joking :) Though the sub pixel thing is interesting, now that you mention it. However, does ClearType really adress *sub pixels*? I always thought it does simple anti-aliasing with the background. – Pekka Feb 15 '10 at 16:12
  • @Pekka - Both Quartz (Mac OS X) & ClearType (Win) use sub-pixel rendering. You can read about it i.e. here: http://szafranek.net/works/articles/font-smoothing-explained/ – Adam Kiss Feb 15 '10 at 19:26
  • @Adam Interesting! Thanks for the link. – Pekka Feb 15 '10 at 19:29
  • 4
    CSS pixels are not the same as (current) physical display technology pixels (http://www.emdpi.com/csspixel.html) and so it *can be* useful to set non-integral px values, for example if you expect the user to use the browser's zoom function. Browsers will, however, convert to an integer pixel boundary for final display to avoid blurry (anti-aliased) display. – natevw Apr 06 '11 at 20:11
  • 1
    The accepted answer is incorrect. See http://stackoverflow.com/a/2262161/543738 (below) and http://stackoverflow.com/a/9080685/543738 for better answers. – Mr. Lance E Sloan Sep 03 '13 at 14:29
2

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.

Kevin
  • 25,946
  • 2
  • 19
  • 21
  • 1
    -1: Changing the `display` to `inline` only works now, until the browsers decide to follow the specifications on the matter. `inline` elements cannot have a set width and height and their dimensions are calculated based on their content and the current `line-height` of the parent element. – Andrew Moore Feb 14 '10 at 18:07
  • Thats why I said "but that is not always what you want" meaning he would want to drop that in the IE6 conditional comment. I Should have been more clear. Thanks for pointing this out :D – Kevin Feb 14 '10 at 18:12
  • 3
    @Andrew Moore -- using "display: inline" in an IE-only stylesheet is the accepted way to deal with the IE double-margin bug. Since the technique will only ever be seen and interpreted by the broken Microsoft browsers in question, there's no "future failure" issue. – Pointy Feb 14 '10 at 18:14
  • @Pointy: In this case, that's fine, but the answer, before being edited, this not contain that information and was suggesting to apply `display: inline` globally. – Andrew Moore Feb 14 '10 at 19:10
  • @Andrew: that's not the case. If you float an element it becomes a block element and the display property has no effect. I'm pretty sure that's following the spec. – DisgruntledGoat Feb 24 '10 at 18:13
2

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...

Seva Alekseyev
  • 59,826
  • 25
  • 160
  • 281
0

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

Knu
  • 14,806
  • 5
  • 56
  • 89
-1

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.

Ray
  • 21,485
  • 5
  • 48
  • 64
  • I can show you how to move a black/white pixel (on inverted background) horizontally in 1/3 pixel increments on an LCD screen. Something ClearType does. – Robert Koritnik Feb 15 '10 at 16:04
  • Interesting. How does it work? Does it access the individual RGB elements of a pixel or something? – Ray Feb 15 '10 at 16:20
  • Exactly. White pixel is still white if all three colors are lit no matter what order they are. RGB, GBR or BRG... – Robert Koritnik Feb 15 '10 at 18:38
  • pretty cool, but I wonder if it is (or will ever be) available to us poor html hacks, or if it requires low-level access to the graphics system to get any benefit. – Ray Feb 15 '10 at 19:23
-1

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.

ЯegDwight
  • 24,821
  • 10
  • 45
  • 52
  • 1
    -1: No side effect right now, until the browsers decide to follow the specifications on the matter. `inline` elements cannot have a set width and height and their dimensions are calculated based on their content and the current `line-height` of the parent element. – Andrew Moore Feb 14 '10 at 18:02
  • @RegDwight - display: inline; not solving the problem – Jitendra Vyas Feb 15 '10 at 16:55