If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

I don't have time to go into details right now, maybe later. But Looking at the page in the two browsers I almost immediately ask why a 380px top margin is required for:

HTML Code:

<div id="CB" class="columnblock">

Without looking much farther I assume there is some, perhaps a lot of one or more of the following:

position: absolute;

position: relative;

float: left; (without effective cross browser clear: left;)

float: right; (without effective cross browser clear: right;)

Once you start doing these sorts of things, the design is more prone to break down across browsers. With a relatively simple visual layout such as the page presents, well that should be able to be achieved without any of the above.

The problem was that .notice has layout in IE 10 pushing things below it farther down the page, but not in Chrome. I think IE 10 is correct because .notice was position relative, which should have layout. In any case, by making it position absolute, it no longer can have layout in either browser. But then it gets positioned in relation to the body. By making its parent position relative, it now gets positioned relative to it.

I haven't fully tested these styles yet, so they may need tweaking, or perhaps even a different approach will need to be taken.

The browser cache may need to be cleared and/or the page refreshed to see changes.

BTW, the .notice img never seems to appear in Chrome, even when you submit without a Where or What. That form and/or its script code needs to be rethought. And there's a missing ajax loading image that I think is supposed to come up when the What and Wanna sections are being populated. The fact that it's missing may or may not be related to the .notice img never showing up in Chrome.

There are two reasons why the #ballon doesn't show up in Chrome. First is this:

Code:

<div hidden class="notice" id="notice">

As far as I know that's non-standard. But it has the effect of rendering that div display: none; in Chrome, which is also why you could use such a large top margin on the columnblock div and not have it look as it does in IE 10.

Get rid of it (the non-standard hidden attribute), and use the styles from my last post to correct what that will do to the layout.

Second is this (the code used to show #ballon when the required information hasn't been chosen yet). Look at the end: