I see from the posts that a few others have already tried to put Issues 25 into practice on their web sites.  I just spent half a weekend working on a new skin that is a combination of my old skin and the Issue 25 skin.

I used to use IE as my default browser, but over the past month I have switched almost completely to Firefox. My skins usually have a horizontal Snapsis two level menu and a almost full width ContentPane. This time I started with Lees' "2pane" design and crafted in the elements that I needed from my old skin. Then I did a "1pane" and a "1paneNoSearch" layout. Finally I went back and tweaked Lee's "3pane_main" even though I had no plans on having any three column pages.

I usually don't do different layouts such as 1pane and 2pane. Since all of these have a full-width header and menu followed by the panes for content, I usually have a full-width ContentPane followed by a SplitLeftPane and a SplitRightPane. If I don't put any modules in them they don't take up space. My full pages go in ContentPane. For the Blog that really requires to columns I leave the ContentPane empty and fill the other two.

On this layout I did both - I used Lee's layouts but had the SplitLeftPane and SplitRightPane divs there as well.

All went very well at first. All three layouts were almost right in FireFox when I went to IE to check them out with it.  Wow! The 3pane worked ok except for the background color dynamically changs from light blue to the dark blue that I wanted when you scrolled to the bottom of the page.

Next I went to the 2pane, it was a single pane with huge margins, and so was the 1pane, yet they were OK in Firefox.  Finally I renamed "iehacks.css" and the layouts looked much more correct. The problem seems to be that Lee was adjusting the same variables in iehacks that he adjusted for the 2pane.css. As a result you get a mess only in IE.  This problem limits the usefulness of iehacks if you are changing the same variables that you have in 2pane.css!

I have opened a port on my development system and you should be able to see the layout at dsnow2.dnsalias.com/asi3  and my old production layout at www.AgingSafely.com.

Since I don't really need the 2pane and 3pane layouts I can work around this problem. The one that really gets me is the background differences between IE and FF that show up with the scrolling.  I have to fix this bug before I do a new logo and some graidents and can put the skin on my production server.

The other problem that showed up in this layout was that I had placed a Google Analytics module with "don't display container" and "place on every page" in the SplitRightPane. On my old layout it only took up space for Admin, but was "visible" for everyone so that Google could see it.  On this layout it made the column lengths different between the two split panes.  I finally added yet another full width div for the Google Analytics module.

If you have any idea for a fix to the background color diffs between IE and FF I'd love to hear it.

/Dave Snow

After thinking about this a bit more I suspect that to fully support multiple layouts with the same skin.css file the JavaScript code that loads iehacks.css and print.css needs to be extended to allow for a layout-specific version of both iehacks.css and print.css

/DaveS

Basically on your multiple layout version, if you use a new class for styling the new layout this can be specified in skinname.CSS - then you will also need to add those details into the ie hacks file (only if a hack is required for ie).

The iehacks file is read by all IE browsers so you do need to be careful with how you use it.

I don't think that we are talking about the same issue.

In iehacks.css you adjust
#mainbody
{
 width: 74.7%;
 voice-family: "\"}\"";
    voice-family:inherit;
     /* for IE 6 and above */
    width: 76.7%;
}
To get the widths more even with IE in the 3pane layout

In your 2pane.css you adjust
#mainbody
{
    width: 99%;
}
To widen the layout.

You can't have it both ways. The 2pane layout changes are over written by the iehacks changes and you get a mess. As long as you are adjusting the same properties in the extra layouts that you had to tweak in iehacks you are in trouble.

/DaveS

Well spotted - I've just looked through the code, there is a mistake. - The 2pane version is supposed to have the id of #pane2mainbody - which you then specify the details for in the 2pane.css file without causing clashes with the iehacks file.

mmm I now need to somehow add that change to the tutorial....

It wasn't well spotted. I tripped over it and still took over an hours to figure it out.  After your explaination of the magic in the iehacks code I finally understood the crazy "voice" stuff.  How come you just don't have JavaScript to a case on the data about which version of IE this is and have a seperate version of iehacks for IE5, 6 & 7?  That would seem easier, more understandble and work ok until IE8 came out.

I had always though that the voice crap was black magic and I guess that it really is.

I assume that your #pane2mailbody requires renaming throughout the set of css, & ascx files and sort of defeats the multiple layouts from a comon css file just a bit.

/DaveS

It doesn't defeat the object of the skinname.css file as it still reduces the code needed in the main skin.css file. - This is a small example, if you have 6 variations of skins, this can save a lot of code in the skin.css file and can all be placed in separate skinname.css files.

The change required just needs you to rename the one div id in the skin.html file and the skinname.css file.

re: Javascript, I don't know that much about javascript and Nik Kalyani created the code for me so if you know enough about javascript to write some code which will just target an IE version then let us know.

I now need to look through the video and check what I said, I may need to re-record a section of it to clarify some of these points...

Thanks for bringing this up,

ok Ive managed to record an extra 6mins or so extension to the original video which demonstrates the problem in IE and then goes through other options and explains a couple of extra things as well. - Im going to try and work through this evening and get it edited hopefully to release the new video tomorrow. - I will send an email out to all subscribers informing them of the new addition to the video and the new code available for download when its uploaded.

Thanks,