Browser compatibility problem

[Six6siX]

Hi, I started using wordpress and have been running for a while now, getting more familiar with how things are working and adding some of my own stuff code wise.

My main problem is this:

There are some problems with layout between browsers - specifically IE7 (mainly) and Opera (not so bad) - see screenshots

IE7

There should be a couple of bars going across the page where the white boxes are.

Opera 9

There is no space between the lower bar and the header images, but the top one displays fine.

Everything displays perfectly in Firefox.

I have already sorted out a few issues (mainly relating to IE handling CSS) like borders around images and specific font sizes and styles being displayed differently, but this one has me stumped.

I'm assuming its a CSS problem?

Any advice would be great - site link here

Also, if anyone can test in other browsers (IE6, Safari, different versions of FF etc) it would be appreciated

 

[Six6siX]

Hey thanks for the replies.

Using the first method that Mr_L posted, gives exactly what I was looking for - perfect result in FF and IE7.

Still getting the problem in Opera with the lower of the two elements in the header being too close to the images though - I can't see what it could be - I'm guessing a line break of sorts is needed...? I've tried playing about with margins and paddings but with no luck.

I tried using the div method, as suggested too, but it wouldn't display as I wanted it to - probably something i'm doing wrong - but that didn't seem to sort the Opera problem either - the element was still displayed too close to the images.

 

[Six6siX]

Ahhhh

I was running 9.00, upgraded to 9.10 and all is fine - many thanks