Css: cannot change size of <li>

Question

Hi,

I asked a friend to help me with web site and I have to finish it by myself. I've got little screenshot boxes and I want to change their size, but I do not succeed. Those boxes are used for choosing a screenshot to show. I've got a Firefox addon that shows me the size of the screenshot box. And it's always constant - 25x25 pixels. I changed the CSS code but didn't succeed. Here is the HTML:

<ul class="imgzchoose">
<li><img src='data/images/screenshots/01.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/02.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/03.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/04.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/05.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/06.png' alt='' title='none'></li>
<li><img src='data/images/screenshots/07.png' alt='' title='none'></li>

<li><img src='data/images/screenshots/08.png' alt='' title='none'></li>
</ul>

And here is the CSS:

ul.imgzchoose{
margin-left: 110px;
padding-top:20px;
width:185px;
padding-bottom: 10px;
}

ul.imgzchoose li{
float:left;
position:relative;
overflow:hidden;
list-style:none;
margin: 5px 5px;
width: 50px;
height: 50px;
border: 1px solid #fff;
}

ul.imgzchoose li img{
cursor:pointer;
margin-left: 9px;
margin-top: 1px;
width:16px;
height:24px;
position:relative;
display:none;
}

What may the problem be?

Thank you in advance.

Answer 1

I would strongly suggest you change the size of the actual underlying images instead of relying on the browser to change the size. This adds extra stuff for the user's browser to do when it downloads each image. In addition, changing the size of the underlying image allows you greater control over what image will look like.

Answer 2

The reason your image boxes are always 25px x 25px is because the img elements are all being styled with:

ul.imgzchoose li img {
    margin-left: 9px;
    margin-top: 1px;
    width: 16px;
    height: 24px;
}

Your margin-top + height = 24px + 1px = 25px, and your margin-left + width = 16px + 9px = 25px. All of these values are used to determine the size of the image box. You'll have to adjust them if you want to change the size.

Using CSS to resize images isn't the best solution since most browsers do not resample them natively. You're going to want to also enlarge the image itself. You can enable the built-in resampler in Internet Explorer if you really want to, but for bandwidth reasons you're going to want to just resize the images themselves.

Answer 3

reading your sourcecode I found you are using some script called imgz.js, this script states the following:

if(typeof($imgz_thumb_w)== 'undefined'){$imgz_thumb_w = 25;}
if(typeof($imgz_thumb_h)== 'undefined'){$imgz_thumb_h = 25;}

that makes that if you don't define the width and height of the pictures explicitly, it becomes 25x25px

fix it by adding width="24" and height="16" to your images

<li><img src='data/images/screenshots/01.png' alt='' title='none' width='24' height='16'></li>

it's not the best approach, but it works if you don't want to mess up with the imgz.js

Answer 4

If you want to set the size of the <li> you can do it by setting as a block type object (i.e. <div/>) instead of it's default of an inline object (i.e. <span/>). To do this you do:

li {
    display: block;
}

there is also

li {
    display: inline-block;
}

which is an IE only protocol, but is understood by many modern browsers, and is suppose to be in CSS 3 in the future.

Answer 5

Building on @ONi 's answer:

If the width and height are set using inline styles (including those created by JavaScript), you can override them by using the !important directive, like this:

ul.imgzchoose li img{
    cursor:pointer;
    margin-left: 9px;
    margin-top: 1px;
    width:16px !important;
    height:24px !important;
    position:relative;
    display:none;
}