Grow your CSS skills. Land your dream job.

Sizing something to tenths of a pixel?

  • # April 9, 2009 at 2:18 pm

    Here’s an interesting situation – I’m working on a page where I need to have five image thumbnails that stretch across the width of the site. The entire site is in a container that’s 980px wide, with a 1px border on each side, so the total width of the content area (where the thumbnails will sit) is 978px.

    The thumbnails all need to be the same size, and they need to extend from the left edge of the container to the right, with no gaps between themselves or the edges of the container. If you do the math, you’ll see that each thumbnail needs to be 195.6px wide.

    So, I put 195.6px for the width of the thumbnails in my stylesheet. Lo and behold, it actually works in Firefox! But in IE6/7 (and Chrome), the .6 is ignored, so the thumbnails come out to be 195px wide, which leaves a slight gap between the last thumbnail and the edge of the container (and it’s really noticeable, because the thumbnails are dark against a white background).

    Two questions:

    1. Is there a way to make this work in the other browsers?
    2. Why does this even work in Firefox? How can the browser draw a fraction of a pixel? That doesn’t seem to make sense. But, if it works, I’m not going to complain :lol:

    # April 9, 2009 at 3:31 pm

    The only way that I’m aware of, and what I would’ve done first, is to change the size of the images.

    # April 9, 2009 at 3:52 pm
    "TheDoc" wrote:
    The only way that I’m aware of, and what I would’ve done first, is to change the size of the images.

    How would I do that? I can’t make an image that’s 195.6 pixels wide. That’s why instead, I made the images 196px wide and then specified 195.6px in the CSS. It works in Firefox, but nowhere else.

    # April 9, 2009 at 5:31 pm

    For maximum compatibility, i’d say your only option is to alter the size of your overall container, so that it fits and you have no extra space.

    # April 9, 2009 at 5:34 pm

    what about changing the conatiner slightly?

    damn just beaten

    # April 9, 2009 at 8:18 pm

    No can do. It’s reused on hundreds of other pages, and making any alteration in the width will break a lot of the layout, which is designed to fit that exact size.

    I might just have to deal with the gap being there :lol:

    # April 10, 2009 at 11:12 am

    There is no such thing as a fraction of a pixel. Even if the browser recognises it, it isn’t possible to render 0.6 of a pixel on your monitor. I think FF is rounding up and down.
    Could you maybe make the two outer images 195px wide and the three inner ones 196px? That would give you your 978px and the difference would be a lot less obvious than a gap on one side.

    # April 10, 2009 at 2:59 pm
    Quote:
    There is no such thing as a fraction of a pixel. Even if the browser recognises it, it isn’t possible to render 0.6 of a pixel on your monitor. I think FF is rounding up and down.

    Right? That’s what I thought. But 195.6px works in Firefox! It’s really weird. If I put 195px in my CSS I get a gap, and if I put 196px the images flow outside of the container. 195.6px is mathematically correct, but I can’t understand how Firefox is drawing it. You can’t draw anything on screen smaller than a pixel, right? It’s bizarre.

    Quote:
    Could you maybe make the two outer images 195px wide and the three inner ones 196px? That would give you your 978px and the difference would be a lot less obvious than a gap on one side.

    That might be doable. The images come from our CMS so I’d have to see if I can change them. If so, that would work.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".