Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sizing something to tenths of a pixel?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #24543
    daGUY
    Member

    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:

    #56043
    TheDoc
    Member

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

    #56044
    daGUY
    Member
    "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.

    #56049
    maris
    Member

    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.

    #56050
    ikthius
    Member

    what about changing the conatiner slightly?

    damn just beaten

    #56047
    daGUY
    Member

    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:

    #56086
    apostrophe
    Participant

    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.

    #56113
    daGUY
    Member
    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)
  • The forum ‘CSS’ is closed to new topics and replies.