[RESOLVED] Firefox CSS Width Issue

I’m diving head first into CSS-driven thinking and trying to get out of my beloved table heavy designs.

First order of business is setting up my online portfolio. Here’s the site: [URL=”http://www.elevan.net”]www.elevan.net[/URL].

As you can see (in Firefox), the middle section is not expanding to its set width and also not displaying it’s x-repeated background image, but in IE, it’s a different story, once I set the vertical-align property to get it to behave, it works fine.

I’m displaying the three divs inline.

CSS below:

html, body, p, table, tr, td, div, span
{
margin: 0px;
padding: 0px;
font-family: Verdana;
font-size: 10pt;
color: #333;
}

body { background-color: #000; }
img { vertical-align: bottom; }
a img { border: 0; }

#container
{
padding-top: 30px;
width: 100%;
height: 100%;
}

#contentbody
{
width: 788px;
}

#header
{
width: 788px;
height: 58px;
}

#logo
{
display: inline;
width: 230px;
height: 58px;
}

#bg
{
display: inline;
width: 200px;
height: 58px;
background-image: url(top_bg.gif);
background-repeat: repeat-x;
vertical-align: bottom;
}

#phrase
{
display: inline;
width: 358px;
height: 58px;
}

Thanks for any help!

Also in #CSS _↴