[Pro] I hate IE!

Dear all,

I’ve been getting reports that my dear friend Internet Explorer 7 is breaking a site.

http://www.mandmkent.co.uk/focalpoint/

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.

Thanks

Heather


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

http://www.mandmkent.co.uk/focalpoint/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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

It’s a mad, mad world, methinks.

Colin


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Or float the three boxes left and give some left-margin to the second
box to push it to the right

David

On 13 May 2009, at 16:04, 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!
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).


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 13 May 2009, at 16:38, David Owen wrote:

Or float the three boxes left and give some left-margin to the
second box to push it to the right

I think this might be worth a try. I’ll give it a go in the morning.

Thanks everyone.

Heather


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

±------------------------------------+
| ±----------------+ |
| | | |
| | | |
| | | |
| | | |
| ±----------------+ |
| ±-------------------------------+ |
| | pad–> ±----------------+ | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | ±----------------+ | |
| ±-------------------------------+ |
| ±----------------+ |
| | | |
| | | |
| | | |
| | | |
| ±----------------+ |
±------------------------------------+

Walter

On May 13, 2009, at 12:22 PM, Heather Kavanagh wrote:

On 13 May 2009, at 16:38, David Owen wrote:

Or float the three boxes left and give some left-margin to the
second box to push it to the right

I think this might be worth a try. I’ll give it a go in the morning.

Thanks everyone.

Heather


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Nice Pic Walt, hope it did not take long :wink:

I’ve also found that IE at times does not like margin bottom, since
then I try and use padding instead where possible as a “just in case”.

David

On 13 May 2009, at 17:46, Walter Lee Davis wrote:

Beware the margin-doubling bug on IE


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Copy and paste, young Skywalker. Copy and paste.

Walter

On May 13, 2009, at 1:31 PM, David Owen wrote:

Nice Pic Walt, hope it did not take long :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.

Can I call on the good offices here to give it the once over again to
confirm that it appears fixed? Thanks.

For the record, I’ve floated all boxes left and added 50px left margin
to push the boxes to the right. So far, it seems to work.

http://www.mandmkent.co.uk/focalpoint/

Thanks everyone for the help!

Cheers

Heather


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

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.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 14 May 2009, at 11:51, Colin Alcock wrote:

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.

Cheers

Heather


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options