CODEWITHSUNDEEP
htmlcssalignmentcss-floatcontainers
John
John

Reputation: 1069

HTML CSS - fieldset containers do not line up

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.

Upvotes: 1

Views: 1283

Answers (3)

Kristopher Ives
Kristopher Ives

Reputation: 6025

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.

Upvotes: 0

Ally
Ally

Reputation: 2245

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;

Upvotes: 4

eozzy
eozzy

Reputation: 68670

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

Upvotes: 1

Related Questions