images overflow when screen is smaller

[mlegg]

On this test page (http://andrewsamonas.com/gallery.html) for a new site I have smaller images that open into a lighbox when you click on them. The page looks fine in full size but when it's smaller the images fall out of the container.

5695

The css for the visual lightbox is http://andrewsamonas.com/photo_files/vlb_files1/vlightbox1.css

#vlightbox1 {
width:100%;
zoom:1;
}
#vlightbox1 .vlightbox1 {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
position:relative;
vertical-align:top;
margin:5px;
width:300px;
font-family:Trebuchet,Tahoma,Arial,sans-serif;
font-size:11px;
font-weight:normal;
text-decoration:none;
text-align:center;
opacity:0.87;
outline:none;
}
#vlightbox1 .vlightbox1 a{
margin:0;
}
#vlightbox1 .vlightbox1:hover, #vlightbox1 .vlightbox1 a:hover{
opacity:1;
}
#vlightbox1 .vlightbox1 img{
display:block;
border:none;
margin:0;
}
#vlightbox1 .vlightbox1 div {display:none}

[mlegg]

the other part is http://andrewsamonas.com/photo_files/vlb_files1/visuallightbox.css

#vlb1overlay{
position:absolute;
top:0;
left:0;
z-index:190;
width:100%;
height:auto;
background-color:#ffffff;
}

#vlb1lightbox{
position:absolute;
top:20px;
left:0;
width:100%;
z-index:200;
text-align:center;
color:#707070;
line-height:0;
}
#vlb1lightbox td{
vertical-align:top;
}
#vlb1lightbox a, #vlb1lightbox a:hover{
border-bottom:none;
color:#707070;
text-decoration:underline;
}

#vlb1lightbox a img{ border:none; }

#vlb1outerImageContainer{
width:auto;
height:auto; /* without this line error in IE8 detected */
margin:0 auto;
position:relative;
}

#vlb1lightboxImage{
width:100%;
height:100%;
}

#vlb1imageContainerMain{
margin:0 auto;
overflow:visible;
position:relative;
font-size:0;/* ie fix - big info bar*/
}

#vlb1imageContainer{
width:50px;
height:50px;
margin:0 auto;
overflow:hidden;
position:relative;
font-size:0;/* ie fix - big info bar*/
}

#vlb1loading{
position:absolute;
top:40%;
left:0;
height:25%;
width:100%;
text-align:center;
font-size:10px;
z-index:1;
}
#vlb1loadingLink{
display:block;
margin:0 auto;
padding:0;
width:60%;
height:32px;
background:url(loading.gif) center center no-repeat;
text-indent:-9999px;
}
#vlb1hoverNav{
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:10;
}
#vlb1imageContainer>#hoverNav{ left:0;}
#vlb1prevLinkImg, #vlb1nextLinkImg{
top:0;
width:48px;
height:100%;
position:absolute;
z-index:20;
outline-style:none;
display:block;
text-indent:-9999px;
background:none;
}
* html #vlb1prevLinkImg,* html #vlb1nextLinkImg{
background-image:url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
}
#vlb1prevLinkImg { left: 0; }
#vlb1nextLinkImg { right: 0; }
#vlb1prevLinkImg:hover, #vlb1prevLinkImg.hover, #vlb1prevLinkImg:visited:hover {
background:url(prev.png) 5% center no-repeat;
_background-image:url(prev.gif)
}
#vlb1nextLinkImg:hover, #vlb1nextLinkImg.hover, #vlb1nextLinkImg:visited:hover {
background:url(next.png) 97% center no-repeat;
_background-image:url(next.gif)
}


#vlb1imageDataContainer{
font: 12px/1.231 Trebuchet MS, "Lucida Grande", Arial;
width:100%;
}

#vlb1imageData{
overflow:hidden;
width:100%;
}
#vlb1imageDetails{ width:70%; float:left; text-align:left; padding:10px 10px 0 0;}
#vlb1caption{ display:block;}
#vlb1numberDisplay{ display:block; float:left; padding:2px 10px 0 0; color:#339EFF;}
#vlb1detailsNav{display:block; float:left; padding:0; }
#vlb1prevLinkDetails, #vlb1nextLinkDetails, #vlb1slideShowControl{ background-repeat:no-repeat; outline-style:none; display:block; float:left;}
#vlb1prevLinkDetails{
margin:2px; width:18px;height:18px; background-position:left 100%;
background-image:url(navigation.gif);
}
#vlb1prevLinkDetails:hover{
background-position:0 0;
}

#vlb1nextLinkDetails{
margin:2px; width:18px;height:18px; background-position:right 100%;
background-image:url(navigation.gif);
}
#vlb1nextLinkDetails:hover{
background-position:100% 0;
}
#vlb1slideShowControl{
display:block;
width:18px;
height:18px;
float:left;
margin:2px;
background-image:url(navigation.gif);
background-position:-18px 100%;
background-repeat:no-repeat;
}
#vlb1slideShowControl:hover{
background-position:-18px 0;
}
#vlb1slideShowControl.started{
background-position:-36px 100%;
}
#vlb1slideShowControl.started:hover{
background-position:-36px 0;
}

#vlb1close{
padding:16px 0 0;
float:right;
}
#vlb1closeLink{
display:block;
outline-style:none;
margin:0;
padding:0;
text-decoration:none;
width:32px;
height:32px;
background:url(close.gif) no-repeat 0 100%;
}
#vlb1closeLink:hover{
background-position:0 0;
}

.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}
* html>body .clearfix{display:inline-block; width:100%;}

* html .clearfix{
/* Hides from IE-mac \*/
height:1%;
/* End hide from IE-mac */
}


#vlb1outerImageFrame{
height:100%;
width:100%;
position:absolute;
}


#vlb1outerImageContainer{
overflow:visible;
}
#vlb1outerImageContainer td{
text-align:center;
padding:0;
}

#vlb1lightboxFrameBody{
background:white;
}

#vlb1outerImageContainer td, #vlb1outerImageContainer tr{
font-size:0;
border:0 none;
}
/* frame style */
#vlb1outerImageContainer td.tl, #vlb1outerImageContainer td.br{
height:50px;
width:50px;
}
.vlb{display:none;}
#vlb1outerImageContainer td.tl{
background:url(back_corvers.png) 0 0;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_lt.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.tc{
background:url(back_tb.png) 50% 0;
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_ct.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.tr{
background:url(back_corvers.png) 100% 0;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_rt.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.ml{
background:url(back_lr.png) 0 50%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_lc.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.mr{
background:url(back_lr.png) 100% 50%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_rc.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.bl{
background:url(back_corvers.png) 0 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_lb.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.bc{
background:url(back_tb.png) 50% 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_cb.png', sizingMethod='scale');
}
#vlb1outerImageContainer td.br{
background:url(back_corvers.png) 100% 100%;
_background-image:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='photo_files/vlb_files1/back_rb.png', sizingMethod='scale');
}

[jundo12]

if i understand responsive-ness correctly, you want a FLUID design. fluid means percentages instead of px in image sizes. but it can get really complicated when you have a complicated site. for example, when you have alot of margins and padding and a mix of percentage and px in image dimensions. it'll drive ya bonkers. lol

[mlegg]

that's not really any help

[mlegg]

does anyone know?

[molendijk]

Jundo12 already pointed out what the problem is.
Try to reduce pixel widths wherever you have them, or replace them with percentages, then see what happens.

[Beverleyh]

I'm with Jundo12 and Arie.

Try to use percentages, making sure that total number of elements' width, padding, margin and borders, when combined, do not exceed 100% (box-sizing in CSS can help make the box model more predictable, but be aware that it doesn't include margins).

Alternatively, set smaller pixel widths, but as Jundo12 already pointed out, mixing units of measure can lead to headaches.

A good tip is to use the develop toolbar - F12 in most common browsers. Then work through the elements (starting with the innermost one and working outwards can help) disabling/adjusting widths, paddings, and margins, until you get a handle on what is creating the problem. Once you know what element(s) is causing the issue, you can edit the CSS based on your findings in the developer toolbar.

[mlegg]

I think that I'm going to try another lightbox code. I fiddled around in Firefox with the web developer toolbar and couldn't get the images to stay in the container without overflowing. Is there a responsive lightbox code that you would suggest?

[molendijk]

Is there a responsive lightbox code that you would suggest?
That doesn't seem to be a good idea to me. Try to understand the problem, then you may be able to solve it.

[mlegg]

I have MS, so a lot of times my brain/memory gets clogged up. This is one of those times. :(

[molendijk]

I'm so sorry to hear that!
I don't know if there are other lightboxes around that you could use. Maybe someone else can help you.

[mlegg]

Thank, and don't be sorry, everyone has their own cross to bear. I'm thankful that I haven't needed my wheelchair in a long time but the bad memory thing does get frustrating.