What’s happening is IE is mangling the inline DIVs, rearranging their order so they float over other content.
The layout is set up along the lines of container box, inline box with text and border floated left, ditto floated right with a top margin, and another ditto floated right with a top margin. What seems to happen is the second box is pushed up and to the right - outside of the container DIV.
Any ideas? Is there any way I can fix this problem from within Freeway?
I don’t have an up-to-date PC here to do instant checks on, but I do have a tame test team.
I’m no expert on this but have you set the inline boxes to clear (in
the Inspector): Second box clear: left. Third box clear: both, might
be worth trying. And double check your third box is actually inline
and hasn’t by some strange mishap become a floating layer!
I can confirm, however, your ‘dear friend’ is right. Now I’ll leave it
to those who know more and can read the source code better than me.
Colin
On 13 May 2009, at 14:59, Heather wrote:
Dear all,
I’ve been getting reports that my dear friend Internet Explorer 7 is
breaking a site.
Another quick thought: I believe is is the convention to start inline
elements with float: right, then float:left, etc. Don’t ask me why!
I don’t know if that affects IE, but it would mean putting your second
box in first, then floating and clearing to bring it below the first
box, which you put in second!! (I’ve done it once and it worked).
Another quick thought: I believe is is the convention to start
inline elements with float: right, then float:left, etc. Don’t ask
me why!
I don’t know if that affects IE, but it would mean putting your
second box in first, then floating and clearing to bring it below
the first box, which you put in second!! (I’ve done it once and it
worked).
That convention is only needed when you are floating things next to
one another, not when they are actually clearing one another as in
this layout. If you wanted to put two boxes side-by-side, you would
put the right one first into the parent container, then the left one.
It’s for Firefox’s benefit as well as IE.
Walter
On May 13, 2009, at 11:04 AM, Colin Alcock wrote:
Another quick thought: I believe is is the convention to start
inline elements with float: right, then float:left, etc. Don’t ask
me why!
Beware the margin-doubling bug on IE. If you set a large margin on an
object, there are conditions under which it will appear to offset by
twice that amount. If you find that to be a problem, try nesting one
more box around the middle element, adding left-padding to that
wrapper to scootch the element to the right, and test that in the
shameless excuse for a browser.
It does! It looks fine on IE7 - and, for the record, the boxes stay
separate in IE6, so no problem reading them.
However in IE6 (or is that IE Sick!) the orange panel moves further to
the right and clips the images - but only by the width of its border,
so nothing to worry about, except aesthetically. You also get those
little grey squared off corners to your coloured borders that IE6 is
so fond of throwing up!
Colin
On 14 May 2009, at 10:34, Heather Kavanagh wrote:
On 13 May 2009, at 17:22, Heather Kavanagh wrote:
I think this might be worth a try. I’ll give it a go in the morning.
Oooookay, I’ve made adjustments to the site, and I’ve reports that
it appears to have worked.
You also get those little grey squared off corners to your coloured
borders that IE6 is so fond of throwing up!
Thanks Colin.
I think it’s inevitable that IE6 will break something anyway. The grey
corners will be the PNGs not being read properly, and I suspect the
rollover zoomed images in the main shop section will look rubbish, too.
I’ve said before that these days I’m only prepared to go so far to
break a working site to support a rubbish browser. We were very
tempted to add a link to the Firefox download page to encourage
visitors to start using a sensible browser for once!
Thanks for all the help, everyone. I think we can say we’ve fixed the
issues for now.
