aligning text and images with css

I'm trying to convert a site to css and eliminate all tables and am having trouble lining up images with text. For instance, I want some text to be centered vertically and horizontally and have a grey background and have it line up next to and be the same height as a rounded gif of the same color. This is easy to do with tables but is giving me grief in css. Here is a link to my page: http://www.co.jefferson.wa.us/idms/...xhtml10_ssi.asp

The trouble is in the "Central Services" block at top left and the page footer.

The style sheet is: http://www.co.jefferson.wa.us/idms/devtest/layout1.css

It looks close to how I want it in Netscape 7.0 but seems to be unnecessarily complicated and looks horrible in IE. How can I line up text with an image and give the text a background color of the same height as the image?

jmiller...

Do yourself a favor & start from scratch. Everything on the page should be organized within blocks of layout - no 'free-floating' groups of images, for example. <div> header, two <div> blocks for menu/content, with float:left specified for side-by-side placement, <div> footer, etc. Your best bet is to spend an hour or so playing around with template-based layouts until you get the hang of it; then set up your page and add content, dialing in CSS as needed to arrange things. hth

http://www.google.com/search?hl=en&...-8&q=css+layout