SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border isn't showing on all sides

    Hello,

    I'm hoping someone here can help me figure this out. On this site http://goo.gl/qPolwA, I am having trouble with the row of 3 featured images (under the slider) and their borders. As you can see, they are cut off on the right. If I change the padding to 9px, it fixes it but only in the full size view. When I resize the browser, the problem still happens no matter what the padding is set to. If I add the box-sizing property, it fixes it in all views, but as expected, the images are much smaller than they are now. The problem also happens on the row of 4 images further down the page when you resize the browser.

    I've run into this kind of thing before, but I cannot for the life of me remember how I fixed it. I don't even know what to google. Any ideas?

    Thanks!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi, Welcome to Sitepoint

    Your container is 300px wide but the image is 280px + 20px (padding) + 2px (borders) = 302px wide and is therefore 2px too wide and sticks out of the container but is invisible because you have cut off the overflow with overflow:hidden.

    Although you could reduce the padding for normal view the same thing happens when the page shrinks because the image is set to max-width 100% so it again overflows the container.

    The correct solution would be to start with containers that are 302px wide and where the borders and padding are on the containers and not the image so that when it is max-width 100% the container doesn't get any larger.

    A quick fix would be to place the padding and border on the anchor that surrounds the image like so.

    Code:
    #home-feature-wrap .featuredpage .page > a{
    display:block;
    border:1px solid #000;
    text-align:center;
    padding:10px 10px 0;
    }
    #home-feature-wrap .featuredpage img{
    padding:0;
    border:0;
    }
    The image still overflows but it overflows the padding on the anchor and therefore is still visible as it doesn;t go outside the container.

    You may need to add a specific class to the anchor to target it if the rules I used above is not specific enough.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks for the welcome and a super huge thanks for the explanation! I applied it to both rows of thumbnails and it works beautifully.

    Can I bother you with one more question? If you scroll to the bottom of the page, you'll see there's a slider on the left side (entitled Photo Gallery) that isn't cooperating. I'm not sure if it's a CSS issue or something going on with the plugin. In your opinion, is it a CSS issue?

    Thanks again!
    Susan

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    The issues with the slideshow seems to be CSS ones to me. The first thing I would do is remove the margins and paddings here:

    Code:
    .sidebar.widget-area ul li, #footer-widgets .widget-area ul li {
    background: url(images/arrow-right.png) no-repeat 0 7px;
    list-style: none;
    margin: 0 0 7px 3px;
    padding: 0 0 5px 15px;
    word-wrap: break-word;
    }
    That may mean separating out the two styles if you need to keep those settings in the sidebar.

    You also need to adjust the width of the soliloquy-container-76 div. It's currently narrower than your images, which leads to some jerky behavior.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2013
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much, Ralph! I totally missed that part. I really appreciate your help.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •