Forums

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

Home Forums CSS 1px Borders – How To

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #34265
    ClipartGuy
    Member

    What is the best way to get these preview thumbnails to appear to have 1px borders? Currently when they align each other, side-by-side, they appear to have 2px borders.

    Here’s my test page: http://www.hittoon.com/t

    Each thumbnail is wrapped in a div with the class name img165.

    Here’s the CSS currently being used.


    div.img165 {
    position:relative;
    border: solid #333333 1px;
    float:left;
    width:165px;
    height:165px;
    overflow: hidden;
    }
    #86714
    BoringCode
    Member

    Add a little padding between each picture, or add border-right: none; for all but the last img.

    #86715
    chrisburton
    Participant

    @clipartguy – First, you’re listing items so lets use li tags.

    You can give all the list items a border-top, border-left and border-bottom. Use last:child to style the last item with a border-right. http://jsfiddle.net/XkErc/

    #86716

    @ChristopherBurton How would you approach it if the images span multiple lines? I was thinking along the same lines (but using first-child as it has better browser support), but eventually came to the same conclusion as @BoringCode. Using some margin between each image is the easiest way.

    #86717
    thomas
    Member

    Unfortunately :last-child won’t work because it will only target the very last item and not the last item for each row. I would recommend adding margin/padding between each item as BoringCode suggested or perhaps revising your HTML to use some row wrappers.

    Updating the CSS with JavaScript is also a possibility, as it could calculate the width of the window to determine how many items are currently in a row and apply borders appropriately.

    #86719
    chrisburton
    Participant

    Ooh good call.

    Also, do negative margins play nicely in IE?

    #86720

    @wolfcry911 has a good solution. You would need to add margin: 1px 0 0 1px; to the containing element so that it remains in place.

    #86722
    chrisburton
    Participant

    I dabbled into it more. Not sure the bugs of it.

    http://jsfiddle.net/X8gGQ/

    #86724

    @ChristopherBurton The big issue is that it relies on a fixed width (and browser support isn’t great). @wolfcry911’s solution is near perfect.

    #86725
    chrisburton
    Participant

    true dat

    #86834
    ClipartGuy
    Member

    Thanks for all the help!

    I ended up putting the images in a list tag, like @ChristopherBurton suggested. I then applied top/left borders to <ol> and right/bottom borders to each <li>.

    This method Works great in all the browsers I tested including IE 9, 8, 7, 6, and 5.5!

    I tried @wolfcry911’s method but it displayed 2px bottom borders below each image in IE 7, 6, and 5.5.

    #86842
    chrisburton
    Participant

    @clipartguy, go with the list but use @wolfcry911’s method.

    #86846
    ClipartGuy
    Member

    I used the following website to test compatibility with IE 9, 8, 7, 6, and 5.5. http://ipinfo.info/netrenderer/index.php

    Here’s @wolfcry911’s results in IE7: http://www.hittoon.com/Screengrab—ie7-issues-wolfcry911.png

    I’m not sure why it’s displaying the 2px border below each image in IE 7, 6, and 5.5.

    #86898
    ClipartGuy
    Member

    @wolfcry911 I must of used someone elses code (thinking I was using your code), your solution with the negative margins is spot on! I’m not sure why the extra top border is showing in the top-right corner though.

    Here’s the latest css being used (test page available here: http://www.hittoon.com/t):


    #img165 {
    list-style-type: none;
    display:inline-block;
    padding:0;
    margin:0;
    border-left: solid #CCCCCC 1px;
    border-top: solid #CCCCCC 1px;
    }
    #img165 li{
    display:inline-block;
    position:relative;
    margin: -1px 0 0 -1px;
    border: solid #CCCCCC 1px;
    float:left;
    width:165px;
    height:165px;
    overflow: hidden;
    }

    Btw, i’m not interested in developing sites that are IE5.5 compatible!

    #86934
    ClipartGuy
    Member

    Guess if I looked a little harder I would have noticed that :D Thanks again! This is by far the best css help forum ive come across.

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.