Wrox Programmer Forums
CSS Cascading Style Sheets All issues relating to Cascading Style Sheets (CSS).
Welcome to the p2p.wrox.com Forums.

You are currently viewing the CSS Cascading Style Sheets section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
Old July 19th, 2006, 05:53 PM
Registered User
Join Date: Jul 2006
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Default image resizing with CSS

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:

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

Any help you can provide would be much appreciated!
Old July 19th, 2006, 06:02 PM
Friend of Wrox
Join Date: Jun 2003
Posts: 425
Thanks: 0
Thanked 3 Times in 3 Posts

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

Old July 20th, 2006, 08:09 AM
richard.york's Avatar
Wrox Author
Join Date: Jun 2003
Posts: 1,706
Thanks: 0
Thanked 6 Times in 6 Posts

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.


Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results


Similar Threads
Thread Thread Starter Forum Replies Last Post
ASP.net image resizing itHighway ASP.NET 2.0 Basics 2 April 5th, 2008 04:48 PM
background image width through CSS problem inOpera iamrakesh22 CSS Cascading Style Sheets 0 May 31st, 2007 06:09 AM
text over an image using CSS? toilandtrouble CSS Cascading Style Sheets 4 July 16th, 2006 05:47 PM
Image Properties & CSS TSEROOGY CSS Cascading Style Sheets 2 October 10th, 2004 09:26 PM

Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.