CSS display:block breaks my layout in ie

so I've created a nice menu for my clients website well at least it looks nice in FF Chrome Safari on mac and IE 8 but it breaks in IE 6,7

here is what a believe to be the relevant CSS

.home{
    padding-top:5px;
    position:relative;
    background: black;
    width: 260;
    height: 280px;
    margin:0px 30px 0px 20px;
    top:-60px;
    float:left;
}

.home img{
    max-width: 300px;
    max-height: 100px;
    padding-bottom:8px;
    margin:auto;
    border:none;
    display:block;
}

but its all on the sit开发者_StackOverflow中文版e

I've been trying different ways of getting the same result but I just can't see to get it to work in IE < 8

any ideas ?

Edit

os if i take out display:block it showsup but then then are not stacked vertically like i want them so then I tried float left clear right and that works except they are not centered then any more suggestions ?

---

Semantically, there are a few things you might want to look at with your HTML. First, you've got an HTML5 doctype, but you're not leveraging any HTML5 tags. For instance, your nav elements should be in a <nav>, your "story" could be in a <section> and so on. Have a look at Dive into HTML5's pointers section for info on the new tags.

Second, you will probably want to place your three logo images into a separate container outside of the nav. You can still position the nav where you have it by using negative top margin, or a negative top and relative positioning. You can add a z-index to the logos container and the nav to order them respectively so the background of the nav doesn't overlay the logos.

You might want to look at using one of the standard CSS resets floating around the Internet. Eric Meyer's reset is a good place to start. Once you start using HTML5 elements, you'll need to provide a fallback for browsers that don't support it yet. I use Google's shiv for this, and it suits my needs well.

Lastly, I see you're using GIFs with transparent backgrounds for your product photography, and you've got "the jaggies". Since you need to support old versions of IE, I would go with PNG8 for those. You'll get a higher quality image and be able to have transparent backgrounds with no jaggies.

I think you'll have a much easier time fixing this layout once you make some structural changes to your HTML to clean it up and you're not having to fight with positioning those logos within the nav unordered list. Plus, you'll have a layout that's more semantically correct and reads easier for people using screen readers.

Happy coding!