CSS - Need To Get Objects To Sit Next To Each Other

I used the CSS Tricks dot com guide to make my menu bar items equidistant from one another and it works perfectly in Chrome, Firefox and IE8.... but not IE7 (or IE8 Compatibility Mode). BTW the guide example works fine in IE7 but I'm doing something only ever so slightly different. I really don't have a clue what to do, so would appreciate some help.

Here's the relevant CSS code I'm using:

Quote:
#content {
width:1000px;
margin-left:auto;
margin-right:auto;
margin-top:0;
margin-bottom:0;
padding:0;
padding-top:230px;
}

/* Menu */

#menu {
height:40px;
padding:0;
padding-left:40px;
padding-right:40px;
display:block;
}

#menu a {
margin:0;
padding:0;
display:block;
float:left;
}

#menu a span {
position:relative;
display:block;
z-index:-1;
}

#menu-row {
margin: -40px 0 0 150px;
padding: 0;
height: 40px;
}
#menu-row div {
width: 33.3%;
float: left;
}
#menu-row div a {
float: right;
}

#menu .home {
background: url(images/menu-home.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .science {
background: url(images/menu-science.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .radio {
background: url(images/menu-radio.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}

#menu .club {
background: url(images/menu-club.png) 0 0 no-repeat;
display: block;
width: 150px;
height: 40px;
outline: none;
}


and HTML

Quote:
<div id="content">
<div id="menu">
<a href="#" class="home"><span>Home</span></a>
<div id="menu-row">
<div><a href="#" class="science"><span>Science</span></a></div>
<div><a href="#" class="radio"><span>Radio</span></a></div>
<div><a href="#" class="club"><span>Club</span></a></div>
</div> <!--/movers-row -->

</div> <!--/menu -->


All the links in the menu-row div are shifted up vertically from the first link in IE7 and I don't know why?

Hello,

In CSS is there a way to tell an object to extend the full height and width of its parameters without specifying height and using absolute positioning?

Thanks,

Andy

Hi, I'm new here and hope someone can help! I wasn't sure whether to post this in the CSS or Flash forum; it's a problem caused by Flash which I suspect needs some clever CSS to resolve.

My new website is carolineofbrunswick (dot) co (dot) uk. As you can see, there's a ton of blank space off to the right of the pages, and I can't figure out how to get rid of it.

It's caused by the Flash objects in the right-hand column. Changing the width attributes on those Flash objects just causes them to not appear at all, though the blank space still exists.

Can anyone help?

Cliff