IE 7 CSS problem

[Antoon]

For a school assignment I have to form my name using only div blocks and css, it works great in firefox but in IE7 a nested div shows up completely at the wrong side of the screen. It's the bottom div that's showing up completely wrong.. (at the wrong side of the div next to it). I'm out of ideas..

my css is:

@charset "UTF-8";
/* CSS Document */

* {
margin: 0;
padding: 0;
}

#container {
margin-top: 30px;
margin-left: 30px;
}

.letterContainer {
float: left;
margin-left: 15px;
}

#topCell {
width: 20px;
height: 20px;
background-color: #000;
margin-left: 432px;
}

/* herbruikbare klasses om letters te vormen */

.letterBody {
width: 20px;
height: 100px;
background-color: #000;
float: left;
}

.smallMiddle {
width: 20px;
height: 20px;
background-color: #000;
float: left;
margin-top: 40px;
}

.smallVertical {
width: 20px;
height: 60px;
background-color: #000;
float: left;
margin-top: 40px;
}

.smallBottom {
width: 20px;
height: 20px;
background-color: #000;
margin-top: 80px;
margin-left: 20px;
}

/* letter t */

.cellBlack {
width: 20px;
height: 20px;
background-color: #000;
float: left;
margin-top: 20px;
}

#tBody {
width: 20px;
height: 115px;
background-color: #000;
float: left;
}

#bottomLine {
width: 235px;
height: 20px;
background-color: #000;
margin-left: 35px;
margin-top: 95px;
}

/* letter h */

/* letter i */

#iDot {
width: 20px;
height: 15px;
background-color: #000;
float: left;
margin-top: 15px;
}

#iBody {
width: 20px;
height: 60px;
background-color: #000;
margin-top: 40px;
}

/* letter b */

/* letter a */

#aRight {
width: 20px;
height: 67px;
background-color: #000;
float: left;
margin-top: 33px;
}

#smallDot {
width: 7px;
height: 20px;
background-color: #000;
float:left;
margin-top: 80px;
}

/* letter u */

#uBottom {
width: 20px;
height: 20px;
background-color: #000;
margin-top: 80px;
float: left;
}

/* letter t */

#tLeft {
width: 235px;
height: 20px;
background-color: #000;
margin-left: 235px;
}

[swa66]

homework ... the purpose is to learn to find solutions for it yourself ... It would be unethical to fix it for you.

To get you inspired:
Why float it all when you have position:absolute to work with.

[Antoon]

i don't expect anyone to just fix it.. i just have no clue why it isn't working. and i did get it working in firefox, so..

well, we HAVE to use floats..

[swa66]

General advice regarding troubleshooting: [webmasterworld.com...]

Take special note of the validating and the doctype (you don't want IE in quircksmode)

In case of IE problems: use conditional comments and try to figure out what's going on. Finding out why it's putting things in the wrong place isn't easy.

Try to figure out what parent blocks are supposed to do when they have floated children, see if IE obeys that in your case. Hint: use backgrounds to see how big/tall blocks are.

[simonuk]

That use background tip works great and has been the initial step to solve most of my positional problems over the years.