HTML CSS - fieldset containers do not line up

Question

I am trying to move away from tables but it's proving too difficult.

This is the webpage "http://outsidemma.com/index.php"

I don't understand why the two green boxes don't align properly on Chrome and older versions of Opera.

This works perfectly well with firefox 3.5 and IE8.

I would like to know the reason behind this strange behaviour.

Answer 1

Instead of display:inline-block, try float:left

Answer 2

Fieldset is treated very differently in each browser.
You should be using either

• dividers <div>content</div>
• A list <ul><li>content<li></ul>

to seperate these.

In both cases you should set the style float:left;

Answer 3

As others have mentioned this is because some browsers treat a fieldset with different display defaults.

It may interest you to use a CSS foundation like YUI Reset to remove all the inconsistencies of how different browsers treat elements:

http://developer.yahoo.com/yui/reset/

One nice thing about the YUI foundation is that you can use YUI Reset, Fonts, and Grids separately if you only want a piece. You can also use YUI Base to add default styling that is consistent across all browsers.