Border isn't showing on all sides

HTML & CSS
1

Hello,

I’m hoping someone here can help me figure this out. :slight_smile: 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

Hi, Welcome to Sitepoint :slight_smile:

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.



#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

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

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

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:

.sidebar.widget-area ul li, #footer-widgets .widget-area ul li {
background: url(images/arrow-right.png) no-repeat 0 7px;
list-style: none;
[COLOR="#FF0000"]margin: 0 0 7px 3px;
padding: 0 0 5px 15px;[/COLOR]
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.

5

Thank you so much, Ralph! I totally missed that part. I really appreciate your help. :slight_smile: