image resizing with CSS

LTrout · July 19th, 2006, 05:53 PM

Hi Richard,
I'm somewhat new to CSS, at least to using it for page layouts. I recently purchased your book "Beginning CSS for Web Design". In Chapter 10 (Liquid Design/Box Model), you mention that you use images slightly larger than you need so that the design scales gracefully. I tried incorporating the code you used in the book into my own, but I'm not having much success. In IE 6, the image does not resize, and in Firefox it does, but it's horribly pixelated. My question is, how can I achieve this without the image looking so bad?

Here's my CSS code: (am I missing something?)

body {
    margin: 0;
    padding: 0;
    background: url('../images/bg_3.gif') repeat;
    }

div#logosearch {
    width: 48em;
    background-color: #FFFFFF;
    margin: 0 auto;
    }

div#logosearch > a > img {
    width: 12em;
    height: auto;
    }

Here's the HTML:

<body>
<div id='logosearch'>
<a href=''><img src='images/igroup_logo.jpg' alt='immixGroup Logo' /></a>
</div>
</body>

Any help you can provide would be much appreciated!

meow · July 19th, 2006, 06:02 PM

It doesn't work in IE because you use a selector IE doesn't understand. You don't need such a specific selector. A simple contextual selector will suffice.

#logosearch img

Or if you have more images in #logosearch and need to target the linked one...

#logosearch a img

--
http://yupapa.com

richard.york · July 20th, 2006, 08:09 AM

Just so you understand why I used those selectors. I used a variety of selectors simply for the reason of seeing and using those selectors in a real document. I tried to use as many different ones as I could, so that through repetition and reuse, you'd become familiar with the different kinds of selectors. So that means that I didn't always use the best or most compatible approach.

As far as IE not supporting those selectors, I also demonstrated how to get the more advanced selectors working in IE in Chapter 18, should you desire to use them, but as Meow pointed out already, the same thing can be acheived with a descendent selector, which is in turn compatible with IE 6.

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html