On Wednesday, January 14, 2004, at 09:10 AM, russ weakley wrote:


Do we need the HEIGHT and WIDTH attributes for the IMG element?
http://annevankesteren.nl/archives/2004/01/12/images-height-and-width- attrib
utes

It's already been said on that page's comments, but the height and width attributes speed up the rendering of the page in every browser I can think of, because the layout engine doesn't have to wait to know the image size (or come back and adjust later).



Also interesting is this image gallery that uses a definition lists to
create the gallery:
http://www.btinternet.com/~historiae/gallery.html

This is something Peter and I have been discussing recently. It seems the
most semantically correct way to display a list of thumbnails and links. The
big problem is that definition lists are hard to style as they are couplets,
unlike unordered lists. The gallery version only works if each thumbnail and
associated content is a separate definition list - not ideal semantically:
http://www.maxdesign.com.au/jobs/css/definitionlist/

These LOOK GREAT, but the fact that they're using a separate DL for each image doesn't tun me on at all... If it's a list of one item, then it's not really a list, is it? Is a DL really appropriate for this anyway? It probably is, but I'm not 100% convinced.


It occurs to me that I achieve the same results with less mark-up using generic divs, although they carry a little less semantic meaning.

<style type="text/css" media="screen">
        body
        {
                margin: 20px;
                padding: 0;
                font: 90% arial, sans-serif;
                background-color: #fff;
        }
        
        div.gallery
        {
                border: 1px solid #000;
                background-color: #ddd;
                width: 102px;
                text-align: center;
                padding: 10px;
                float: left;
                margin-right: 1em;
        }
        
        div img
        {
                display: block;
                border: 1px solid #000;
                width: 100px;
                height: 100px;
        }
        
        div a
        {
                display: block;
                margin: 5px 0 3px 0;
        }
</style>

<div class="gallery">
        <img src="flower.jpg" alt="">
        <a href="#">Title here</a>
        Description here
</div>

<div class="gallery">
        <img src="flower.jpg" alt="">
        <a href="#">Title here</a>
        Description here
</div>


Granted, yours has MUCH better structure when presented unstyled, but that isn't really semantics, is it.


Interesting discussion!


Justin French







*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************




Reply via email to