Strange CSS Firefox issue

[Chris Ashley]

See here:

http://devsite.webmoney.co.uk/defaultold.asp

In IE this renders fine, but in Firefox a strange break seems to appear
causing the top right box to float in the centre of the page. Anybody
have any idea why?

I've managed to fix it using a P tag with a blank space character in
(alt + 0160) but I appreciate this might not be an ideal solution
because some systems might render this differently.

Here's the version with my fix:

http://devsite.webmoney.co.uk/default.asp

Does anybody know why this might be happening?

Thanks in advance

 

[dorayme]

See here:

http://devsite.webmoney.co.uk/defaultold.asp

In IE this renders fine, but in Firefox a strange break seems to appear
causing the top right box to float in the centre of the page.

In Safari, it behaves as in FF but only over a certain (not that
big) a text size.

Anybody
have any idea why?

Someone will have an idea that you will no doubt want. I took a
look at your css, and had the casual thought that it looks like
an example of the price you have paid for trying to implement the
orthodox religion around here.

I reckon either use tables and simplify all your html and css
this way or study hard and get to make simpler code along the
general ideals of separating style from content. The latter
entails, for most people, using a different approach to the
design, not doing what tables are good for... I better stop...

 

[Wÿrm]

See here:

http://devsite.webmoney.co.uk/defaultold.asp

In IE this renders fine, but in Firefox a strange break seems to appear
causing the top right box to float in the centre of the page. Anybody
have any idea why?

You can fix it by putting extra div there between 3rd and 4th
productoverviews (before "Motor & Classic Car Insurance" thing).

<div style="clear:left;"></div>

Seems that clearing floats between 1st and 2nd row of product overview
fixes it.

Can't recall or think what might cause this, atleast not straight away, but
gonna take closer look some point later just out of curiousity.

 

[Wÿrm]

"Chris Ashley" <[email protected]> kirjoitti
viestissä:[email protected]...

http://devsite.webmoney.co.uk/defaultold.asp

In IE this renders fine, but in Firefox a strange break seems to appear
causing the top right box to float in the centre of the page. Anybody
have any idea why?

Ok, could not leave this issue rest (or bother me) just yet. Might be best
if you use

<div style="clear:left;"></div>

between each product overview row.

Issue why 1st item in 2nd row ends up in middle of the screen is rather
simple to find if you set

* { border: 1px solid red;}

and tweak wrapper bit wider, say 766px;

After that it's rather clear that first product overview box (Home
Insurance) is HIGHER than others (on FF atleast) in that row, so 4th
floated box ends up in middle of the screen because of that...

So just use clearer divs between each row of boxes if you plan to have more
than just those two rows.