IE6 vs IE7 display error - background image getting cut off...

[ShootingBlanks]

Hello. Can someone please help me understand why this page looks fine in IE7 and Firefox, but not in IE6:

http://www.shootingblanks.net/TEMP/Nevermind/bio.php

You can see that the background image is completely cut off on the left in IE6, and I'm not understanding why. Here's the CSS code for that div:


#bioContent {
background: url(../images/bkgnds/bio.jpg) no-repeat top left;
width: 140px;
min-height: 550px;
float: left;
margin: 0;
padding: 0;
}

Also, there's one other page on the same site that's also behaving oddly only in IE6. The picture is not on the bottom-right like it should be, and it's getting cut off:

http://www.shootingblanks.net/TEMP/Nevermind/news.php

Here is the code for that div, if anyone has suggestions on that one too. Thanks!!!:


#newsContent {
background: url(../images/bkgnds/news.jpg) no-repeat bottom right;
min-height: 400px;
text-align: left;
}

[BLiZZaRD]

Hey ShootingBlanks! (you ever going to finish the Riddle Trail :p )

USUALLY this is caused by IE's presentation of auto margins and spacing.

In your CSS, if you start with:



* {
padding: 0;
margin: 0;
}


It may just clear that up. If not I will have a deeper look at it.

[ShootingBlanks]

What's up, BLiZZ!!!

Yep - that did it. Thanks, man!!!

:D

[BLiZZaRD]

Awesome! Not that that is fixed, get back to riddling! :D

[ShootingBlanks]

Haha...I wish I had the time!!! :p

[kuau]

Dear Bliz: I learned css by being thrown into the deep end so never really got the basics. Are you saying that every css file should start with...

* {
padding: 0;
margin: 0;
}

I do start my files with: html { margin:0; padding:0; } Is that the same thing? I'm not familiar with * in css. Is it a wildcard that refers to all elements?

Thanks for being a know-it-all. haha :) erin

[BLiZZaRD]

Aloha. It is a good practice, and is shorter than using body, html {

Basically, yes the * acts as a catch all.