Chap 1, Example 1-1

toddburch · February 28th, 2008, 10:39 AM

Hi. I'm enjoying your book. I've typing in the example and checked my code with the downloaded code to make sure I did every correct. It appears I did type everything in correct, as diff tells me so.

But just to be sure, I am using the downloaded html and css files, and the images still do not show up correctly.

In Safari, the images of the planets are pretty much centered left to right and top to bottom in the areas where the reside. However, in IE 6, they are leftmost and topmost in their respective areas.

Here is Safari: http://www.burchwoodusa.com/miscpix/...r_position.png

Here is IE 6: http://www.burchwoodusa.com/miscpix/...on_jupiter.PNG

The other difference is the dark background behind the planet facts. In Safari it is transparent, while in IE 6 it is opaque.

Is there a fix?

Thanks., Todd

richard.york · March 18th, 2008, 11:11 PM

Ah, well, it seems I used a "fixed" background image for div#solar-system. And IE6 doesn't support "fixed" background images on anything other than the <body> element, that's what gives the illusion of transparency in Safari. IE7 does support this effect though.

You could just drop the "fixed" keyword from that declaration, and you should get the star background back, it won't look as cool as it does in Safari, but it should render.

In any case, this example wasn't really meant to be pixel-perfect. It was just meant as a quick, get your feet wet example. As you will have learned later in the book, you can fine tweak the various aesthetic anomalies present in IE with a conditional comment style sheet until you get a rendering that much more closely matches the other browsers.

Regards,
Rich

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

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