Question

I’m creating a liquid j-query slider using Mark Tyrell’s blueberry plugin (all hail!), but am having a problem with thumbnail images not re-sizing in Safari (mobile or desktop) that work in IE 8, and Firefox 7.01 and Opera 9.5.

You can see the (almost) working page at http://development.carrollorganization.com/blueberry3.php

IN Safari, the thumbnail images do not shrink to fit the height of the container (div called thumbnail) and are not restricted to overflow:hidden in that container. They do obey the overflow:hidden command in the div’s parent (an a tag). The big issue is the refusal to re-size to fit the height of the parent div tag.

I honestly don’t know if this is a Safari bug, a box-model problem, user-error (could be likely) or some combination of all. I would appreciate any help anybody can give. If I cou

My style sheets are:

* {
    margin: 0;
border: 0;
padding: 0;
}
body {
background: #f0f0f0;
font: 14px/20px Arial, San-Serif;
color: #404040;
}
a { color: #264c99; text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4,p { margin-bottom: 0px; }
h1 {
font-size: 48px;
line-height: 60px;
color: #ffffff;
text-transform: lowercase;
}
h2, h3 {
font-weight: normal;
font-size: 22px;
line-height: 40px;
color: #808080;
}
h3 { font-size: 18px; color: #404040; }
h5 { font-weight: bold; font-size: 14px; color: #000; }

#header {
height: 60px;
padding-top: 0px; padding-bottom: 0px;
text-align: center;
background: #405580;
}
#header h1 {
margin: 0 auto;
min-width: 740px;
max-width: 1140px;
}
#doc { 
margin:0px;
padding:0px;
width:100%; 
background-color:#F00;
}
#content {
margin: 0 auto;
padding:0px;
width:90%;
min-width: 740px;
max-width: 1440px;
}

.blueberry { max-width: 1440px; position: relative;}
.blueberry { margin: 0 auto; padding:0px;}
.blueberry .slides {
display: block;
position: relative;
overflow: hidden;
}
.blueberry .slides li {
position: absolute;
margin:0px;
padding:0px;
bottom: 0;
left: 0;
overflow: hidden;
}
.blueberry .slides li img {
display: block;
margin:0px;
padding:0px;
width: 100%;
max-width: none;
}
.blueberry .slides li.active { display: block;  /*position: relative; */}
.blueberry .crop li img { width: auto; }

.blueberry .pager {
position:absolute;
top:0;
right:0;
height:100%;
background-color:#0F0;
text-align: center;
width:30%;
margin:0;
padding:0;
/*max-width:400px;*/
}
.blueberry .pager li { 
overflow:hidden;
display: block; 
height:25%;
width:100%;
margin:0;
padding:0;
}
.blueberry .pager li.active  {
background-color: #F00; 
}
.blueberry .pager li a {
overflow: hidden;
display: block;
height:100%;
text-align:left;
margin:0;
padding:0;
}
.blueberry .pager li a span {
margin:0;
padding:0;
color:#000; 
font-size:1em;
}
.blueberry .pager div.thumbNail {
height:75% !important; 
margin:5%; 
border:1px solid #fff; 
}
.blueberry .pager div.thumbNail img  { 
display:block;
float:left; 
height:100%;
width:auto;
}

My page code is (it’s a php page, not html):

    <div id="doc">
    <div id="content">

    <!-- blueberry -->

    <div class="blueberry">
    <ul class="slides">
    <li><img src="images/slider_images/slider_01.jpg"/></li>
    <li><img src="images/slider_images/slider_02.jpg"/></li>
    <li><img src="images/slider_images/slider_03.jpg"/></li>
    <li><img src="images/slider_images/slider_04.jpg"/></li>
    </ul>
     <ul class="pager">
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_01_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_02_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_03_TN.jpg"/></div></a></li>
    <li><a href="#"><div class="thumbNail" ><img src="images/slider_images/slider_04_TN.jpg"/></div></a></li>
  </ul>
</div>

Answer 1

height: 100% is not working as you might expect it to

I’d choose

.blueberry .pager div.thumbNail {
  position: relative


.blueberry .pager div.thumbNail img {
  position: absolute;
  top: 0px;
  bottom: 0px;
}

additionaly