Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > CSS Cascading Style Sheets
Password Reminder
| FAQ | Members List | Search | Today's Posts | Mark Forums Read
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 tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developers’ questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old July 19th, 2006, 05:53 PM
Registered User
Join Date: Jul 2006
Location: McLean, Virginia, USA.
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!
Reply With Quote
  #2 (permalink)  
Old July 19th, 2006, 06:02 PM
Friend of Wrox
Points: 1,315, Level: 14
Points: 1,315, Level: 14 Points: 1,315, Level: 14 Points: 1,315, Level: 14
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: , , .
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

Reply With Quote
  #3 (permalink)  
Old July 20th, 2006, 08:09 AM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
Join Date: Jun 2003
Location: Camby, IN, USA.
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

Reply With Quote

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

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

All times are GMT -4. The time now is 02:47 PM.

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