Empty Div for Images - IE Problem

I'm hoping this has a simple fix, but suspect it might need some IE hack.

The website I recently designed has an empty div in the HTML that, ideally, should be formatted with CSS to include an image. The code below works great on all Mac browsers, but chokes in IE PC - it doesn't appear.

The website is LandWorks (http://www.landworksvt.com)

<div id="imagebar" class="img-portfolio"></div>

The class changes depending on the section of the site.

#imagebar {
z-index: 1;
position: relative;
width:688px;
height:85px;
margin: 93px 0 0 0;
padding: 0;
}

#imagebar.img-home {background-image: url(../images/img_01.gif);}
#imagebar.img-company {background-image: url(../images/img_02.gif);}
#imagebar.img-capabilities {background-image: url(../images/img_03.gif);}
#imagebar.img-portfolio {background-image: url(../images/img_04.gif);}
#imagebar.img-contact {background-image: url(../images/img_05.gif);}
#imagebar.img-client {background-image: url(../images/img_06.gif);}

The image should display like this: http://www.landworksvt.com/IE_MAC_screenshot.gif
(http://www.landworksvt.com/IE_MAC_screenshot.gif )

I've tried changing the positioning/ making it a float, but that seems to mess things up in Mac browsers.

Any help would be great!

Thanks!

I was having this IE problem myself, and just put the image in the div like this... <div><img /></div>

Dan

It appears to me IE is not respecting the margin you have set on 'imagebar' and it's being layered behind the absolutely positioned 'nav'.

If you are using the margin to position the imagebar, try swapping the margin and padding values, or specify the relative position as top:93px; and set margin to 0.

Thanks guys!

I'm hoping to do all of the formatting using only CSS. I've got the XHTML all set.

try swapping the margin and padding values

This worked! Thanks for the info. I had to add a couple of other commands/tweaks, including specifying a background-image for the entire div.

#imagebar {
z-index: 1;
position:relative;
background-position: bottom;
background-image: url(../images/img_01.gif);
background-color: #fff;
width:688px;
height:77px;
margin: 0;
padding: 93px 0 0 0;
}

At this moment, IE is ignoring the background-images for the separate classes. I'm guessing that I need to either change the classes to ids, or apply the above code to each class. Either way, at least something is showing up!

Thanks again!