Strange CSS Firefox issue

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
See here:

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:

Does anybody know why this might be happening?

Thanks in advance

Re: Strange CSS Firefox issue

In article

Quoted text here. Click to load it

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

Quoted text here. Click to load it

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...


Re: Strange CSS Firefox issue

Quoted text here. Click to load it

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.

Re: Strange CSS Firefox issue



Quoted text here. Click to load it

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.

Site Timeline