[Pro] IE 7 problem with Mootools??

Freeway
1

Can anyone who has access to Windows look at this test site?

I am testing a site that works fine on Mac bowsers, but noticed today at a friends that it kind of falls apart in IE7 (it works on IE8 ok). The site uses, Mootols accordion and slimbox and was created from one of the skeleton box models.

The site can be found at http://tabouligrill.com/testsite/

I’m still working on the site, but is there anything I can do to prevent this from breaking apart on windows browsers (what I saw in IE7 was that the left container moved completely left and the right container completely right, so I end up with a big gap. Also the accordion items all opened at launch. When the slimbox/lightboxes opened there was a message that javascript should be enabled. However, when I checked my friend’s IE options it looked like javascript was active.

Thanks in advance for any help.

Jeff

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

2

Remember that you can always use NetRenderer Moved - to give you a static view of how various flavours of Exploder will mangle your site.

David

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

3

But also remember that it won’t run any JavaScript, so you will see
the “no-script” view of your page. Useful in some contexts, but it
won’t help here.

Walter

On Nov 24, 2009, at 6:53 PM, DeltaDave wrote:

Remember that you can always use NetRenderer Moved

  • to give you a static view of how various flavours of Exploder
    will mangle your site.

David

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

4

remember that it won’t run any JavaScript

Yes - that is what I meant by ‘static’ - but it does show clearly in IE7 that Jeff’s RH container moves well over to the RHS of the page.

What about the fix then Walter?

David

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

5

Thanks David for the tip about netrenderer.

So is it just the way that 7 and earlier render sites, or did I do something wrong in my design, a combination of both…

And is there a way to fix this.

Would using Scripty accordion and scripty lightbox work any better?

Jeff

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

6

You’re right, Dave, sorry I didn’t add value with my reply. I took a
quick look at the source in Xyle scope, and saw a bunch of structures
that didn’t look familiar, but they all seem related to the lightbox,
so I doubt they come into play. IE6 has the same problem as 7, don’t
have 8 to test with here.

This looks like it might be the dreaded doubled margins bug at work. I
notice that both of your main columns are set to float left, and you
have used margin on the accordion to create the gutter. You might want
to consider using right float on the right column (placing it first in
the document flow) and left float (and a narrower width) on the left
column. Leave some unused space in the middle for IE to get its math
wrong, as is its wont.

Walter

On Nov 24, 2009, at 7:39 PM, DeltaDave wrote:

remember that it won’t run any JavaScript

Yes - that is what I meant by ‘static’ - but it does show clearly in
IE7 that Jeff’s RH container moves well over to the RHS of the page.

What about the fix then Walter?

David

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

7

Thanks Walt

I worked off of the 3 row, 2 column skeleton template that was posted on Freeway and the float left settings were how the default was set up.

When you say placing the right column first in the document flow, what do you mean exactly and or how do I insure this.

Can I still keep the margin on the accordion or is there a less troublesome way to do that.

Jeff

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

8

Start with a new page, draw an HTML box large enough for both columns, then insert an HTML box for your header and stretch it out to size and set it to float left. Double-click beneath that box and insert another HTML box for the right column, then another for the left column. Click on the first of these, and set it to float right. Then set the other box to float left. Drag out the dimensions of these boxes to the desired sizes, and leave a healthy gap between them to establish the space that your margin setting is currently creating. By not explicitly setting any margins in this process, you avoid the double-margin bug in IE.

Walter

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

9

Thanks Walt

Just to be clear about this, when you say leave a healthy gap between the two columns, how big a gap are you talking about - i.e. is 10 px enough? I tried to modify my original and left about a 10-15px gap but it didn’t seem to work.

Once I set up the new page, could I then copy and paste all my accordion boxes and images into this new layout or will I be bringing my previous problems with them?

And so I understand the problem a bit better, is it the margins I added to my navigation/accordion boxes that is causing the double-margin bug. I added them to keep my copy from being completely flush left. If yes, how do I avoid this if I can’t add margins.

Sorry if I’m being a bit too bothersome with this, but I’m still fairly new to FW and trying to understand it all.

Thanks again

Jeff

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

10

On Nov 25, 2009, at 10:50 AM, Jeffrey Stern wrote:

Thanks Walt

Just to be clear about this, when you say leave a healthy gap
between the two columns, how big a gap are you talking about - i.e.
is 10 px enough? I tried to modify my original and left about a
10-15px gap but it didn’t seem to work.

In your original, you have both columns floated left, so you need
something between them to give the spacing. But that leads to a
“tight” layout, which cannot withstand any non-standard behavior from
the browser without breaking. That’s why float right then left, with
the two not adding up to the parent width, gives you some wiggle room
for IE to do whatever it is that it does. You may need to experiment
with how much room to give it, it’s notoriously fickle in these things.

Once I set up the new page, could I then copy and paste all my
accordion boxes and images into this new layout or will I be
bringing my previous problems with them?

As long as whatever you paste doesn’t have any margins in it, then yes
you can do this.

And so I understand the problem a bit better, is it the margins I
added to my navigation/accordion boxes that is causing the double-
margin bug. I added them to keep my copy from being completely flush
left. If yes, how do I avoid this if I can’t add margins.

You can float another element to the left of the accordion that has
the width you need, maybe, or apply padding to the parent container of
the accordion. Padding is safe to use, by the way.

Sorry if I’m being a bit too bothersome with this, but I’m still
fairly new to FW and trying to understand it all.

Not at all. Nobody (except PPK) understands it all. Nibble around the
edges until you get full is my motto.

Walter

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

11

Thanks again for all the valuable info.

Do I need any clear settings on my column, header or footer boxes? I’m not 100% clear on what clear does.

One other somewhat basic question. Does it really matter what the height of my page size is if I have undefined html boxes. I’ve noticed that if i"m in design view and my left column gets longer than the FW page height that the accordion elements won’t preview correctly.

I may have to wait to test this until after Thanksgiving.

Have a happy Thanksgiving btw

Jeff

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

12

Ok

I got things partially working – that is, I solved the page breaking apart left and right. I wasn’t getting anywhere with trying to leave a gap between my two columns, so I tried working with the 3 row 2 column skeleton with colored boxes to see what was going on. When I first tried it it did the same thing as my site. I then tried Walt’s suggestion of having the right column container come before the left and have it float right (not left as the skeleton is setup). In rearranging the skeleton I also noticed that if I turned the clear for the two columns to none it also worked (rather than both as they were set).

So went back to my original site design and tried making the clears for both column containers “none” and that also worked at solving the right container moving off the page (even with my margins).

The new problem in IE6 and 7 – as viewed using IE NetRenderer – is that my footer bar now floats up onto the page. (And the spacing between my navigation/accordion items is off)

So I tried my reworked page, with no margins (just padding) and that didn’t help. Also tried adding some padding to top of footer and bottom of left and right containers and that didn’t help either (foot is set to float left 00 -tried various settings for both float and clear but none seem to help).

Walt or anyone want to offer any new suggestions.

Jeff

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

13

Float the footer left, and give it a 100% width.

If you start down the float road, pretty soon everything has to float
or you don’t get proper boundaries between objects.

As to your accordion items, what structure are they made of? If
they’re list items, you can get a lot of mileage out of setting the
HTML output method to “More Efficient”. This causes list items to be
coded like this:

<ul><li>list item</li><li>list item</li></ul>

instead of the human-friendly:

<ul>
	<li>list item</li>
	<li>list item</li>
</ul>

IE has this horrible habit of considering the whitespace between list
elements to be important, effectively giving a line-break + a couple
of tabs the same space it would give a paragraph break. More Efficient
collapses as much of the HTML into single lines as possible, so it
gets around that bug.

Walter

On Nov 25, 2009, at 2:24 PM, Jeffrey Stern wrote:

The new problem in IE6 and 7 – as viewed using IE NetRenderer – is
that my footer bar now floats up onto the page. (And the spacing
between my navigation/accordion items is off)

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

14

I have the footer set to float left (and clear to both – try all possibilities with clear). As far as width the box is extended to full width. Do you mean I should actually set it 100%

Accordion items were set up based on a Moo-Tools screencast by DanJ that suggested a container with insert html boxes for header, another for body copy, etc. Type in body is just regular type – didn’t want the bullets of the list type.

Jeff

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

15

Ok

Made the floats of the footer 100% (foot box and nest type html box). that seems to have done it – except for the spacing on my accordion menu items – farther apart than on Mac rendering. I spaced them some using padding (bottom and top) otherwise they were too close to each other.

Is there a better way to space them out?

Jeff

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

16

Got to see my test site today on a windows computer (IE7).

Only major issue I see is that accordion headers bounce as you scroll over them (should just change color).

Also ran page through the W3C validator. Only error that showed up was:

Line 211, Column 62: document type does not allow element “div” here; missing one of “object”, “applet”, “map”, “iframe”, “button”, “ins”, “del” start-tag

…=“fwGeneratedMap1” style=“width: 364px; height: 246px”>

:email:

The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as “

” or “

”) inside an inline element (such as “”, “”, or “”).

I’m assuming this is the GoogleMap. Since I’m not well versed in reading these error messages yet, can someone tell me in lay terms what I did wrong and how to fix this?

Also, I intended to have a background texture (a jpeg file created in photoshop). If I add this and then check validation, I get all sorts of validation error messages about duplicate colors, etc. Is this because the image repeats?

Happy Thanks giving to all.

Jeff

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