Page 1 of 1

Add image width & height to css

Posted: Sun Oct 21, 2007 3:43 am
by WaldoMonster
I'm planning to move most image width & height to a style sheet.
This way it is easier to manipulate the skin with other image dimensions.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>Untitled</title>
    <style type="text/css">
    img.small {
        height: 22px;
        width: 22px;
        border: 0px;
    }
    </style>
</head>
<body>

<img src="skin/default/small_play.gif" alt="" class="small">

</body>
</html>
The HTML example validated well with the w3c validator.
But before I start mass editing my scripts…
Is this a good way to do it?
Is it better to leave the border to the img tag?

Thanks for the help,

Posted: Sun Oct 21, 2007 7:28 pm
by Kieran Huggins
All styling should be done in CSS, always.

That being said, why are the thumbnails not the correct size already? Are you not generating them?

Resizing images in the browser can also make some look nasty.

Posted: Sun Oct 21, 2007 7:31 pm
by JAB Creations
My latest method of cleaning and organizing my CSS has been to use specific selectors.

Code: Select all

#content img {float: right;}
#side img {vertical-align: middle;}
#prompt img {height: 14px;}
img {border: 0px;}
Element specific (img) declarations I do after ID selections, properties alphabetical, etc.

If you have lots of the same image you don't even necessarily need a class on all or any those images. Just give the container an ID and do something like...

Code: Select all

#sameimages img {height: 22px; width: 22px;}
img {border: 0px;}

Posted: Sun Oct 21, 2007 7:34 pm
by s.dot
Using only CSS you can only give your image precise heights and widths, leaving the viewability of that image in question.

Posted: Sun Oct 21, 2007 7:37 pm
by JAB Creations
That is true though as I've been testing numerous old browsers this would only occur possibly in IE3, Opera 3, and other beyond archaic browsers (no intention of being rude, just been working specifically with really old browsers of late). It's good to keep in mind, like anyone who cares about their work always test it in the browsers you know and expect your visitors to use. :wink:

Posted: Sun Oct 21, 2007 7:48 pm
by Kieran Huggins
That's excellent advice. In practice I usually just ignore minor style glitches in browsers < IE 5.5. It's a little rude, but not worth the time to hack it IMO.

Also, CSS rules are processed in a certain order, sorted by selector rules. It doesn't matter where in the file they are, since they're re-ordered by the rendering engine. The CSS file they appear in DOES affect the weight, but only as a last resort. An ID selector will always be given priority over a class selector. The order they exist in is considered only for conflicting rules of the same weight.

The weighting algorithm is published somewhere, and is good to know.

Posted: Mon Oct 22, 2007 3:18 am
by pickle
It's fine to put it in the CSS - it cuts down on the filesize. To mirror ~Kieran's question - are you actually resizing the images or just declaring their dimensions?

Posted: Mon Oct 22, 2007 3:54 am
by WaldoMonster
Kieran Huggins wrote:All styling should be done in CSS, always.
Thanks
Kieran Huggins wrote:That being said, why are the thumbnails not the correct size already? Are you not generating them?
Resizing images in the browser can also make some look nasty.
I'm not resizing the images, I want to declaring the dimensions for better rendering before the images are downloaded.
pickle wrote:It's fine to put it in the CSS - it cuts down on the filesize.
The HTML above is just an example.
Later I will use a separate css style sheet.

In the menu section I have many images with a different width.
I have tried out this with IE 6 but often renders the images to small.
When completely leaving out the width it renders always correct in IE 6.

Code: Select all

img.menu_top {
    width: auto;
    height: 33px;
    border: 0px;
}
Now that I use more image groups I have separated the border size to all images like this:

Code: Select all

img {
    border: 0px;
}

Posted: Sun Oct 28, 2007 4:42 am
by WaldoMonster
Thanks JAB Creations for the valuable feedback.
Before I have read over it :oops:

Posted: Sun Oct 28, 2007 4:48 am
by Benjamin
Right, image sizes should be specified because then the browser knows how much space to allocate to an image before it is downloaded, preventing the page from jumping around while the images are loaded. That being said, you might be opening up a can of worms by specifying all images of a certain class to be a certain size, but your circumstances might warrant it. Generally, if you don't want image borders you can just add a global border-width: 0px; attribute for the img tag. I don't see any reason not to specify the height, width and alt attributes in the image tag, unless you have a lot of them that you may need to change all at once in the future.

Posted: Sun Oct 28, 2007 3:12 pm
by JAB Creations
Exactly what browsers fail to correctly render an image's actual height and width if it's not specified? I have never seen this and I've worked with literally dozens of browsers/versions/etc.

Posted: Sun Oct 28, 2007 3:34 pm
by Benjamin
What browser can detect the height and width of an image before it downloads it when it's not specified in the html or css?

Posted: Sun Oct 28, 2007 3:37 pm
by JAB Creations
That is true, though how is it relevant?

Posted: Sun Oct 28, 2007 3:39 pm
by Benjamin
astions wrote:image sizes should be specified because then the browser knows how much space to allocate to an image before it is downloaded, preventing the page from jumping around while the images are loaded.

Posted: Sun Oct 28, 2007 3:40 pm
by JAB Creations
I want to declaring the dimensions for better rendering before the images are downloaded.
Oh ok, didn't catch that, it seems a bit silly to worry about styling before the styling can be applied. That is like shipping a product to someone before they have paid for it.