You need to Register for free and Login to post a message in the forum.

Forum

Forums > Users Lounge > DNN Creative Articles
Subject: Multiple layouts vs. iehacks.css
Prev Next
You are not authorized to post a reply.

Author Messages
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124
15 Oct 2007 4:14 PM  
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
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124
16 Oct 2007 11:50 AM  
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
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3325
17 Oct 2007 3:58 AM  
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.
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124
17 Oct 2007 2:59 PM  
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
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3325
17 Oct 2007 3:11 PM  
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....
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
DavidWSnow
DNN Creative Magazine Subscriber
Nuke Master
Nuke Master
Posts:124
17 Oct 2007 9:07 PM  
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
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3325
18 Oct 2007 3:12 AM  
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,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
leesykes
DNN Creative Staff
Nuke Master III
Nuke Master III
Posts:3325
18 Oct 2007 11:18 AM  
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,
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts

Twitter: www.twitter.com/leesykes

Lee Sykes's Facebook Profile
You are not authorized to post a reply.
Forums > Users Lounge > DNN Creative Articles > Multiple layouts vs. iehacks.css


ActiveForums 3.7

Latest Forum Posts

RE: Reversing Limited Access to the Admin Menu by wynnjon
OK-So I've updated the TABS table entries in the database and set the previously modified entries (t...
RE: localhost Install issues by leesykes
If you go to the subscribe page and click on the get free trial button - this takes you to a page wh...
localhost Install issues by cdees
I've set up a local host and want to run DNN for a local development machine.  The host is set up; h...
RE: Reversing Limited Access to the Admin Menu by wynnjon
That is what I thought.  So for my clients that will need to manage user accounts, I can not limit t...
RE: Reversing Limited Access to the Admin Menu by leesykes
I seem to recall it doesn't work
RE: Reversing Limited Access to the Admin Menu by wynnjon
Thanks Lee-  I will give that a try.An additional question- If you place the "User Accounts" page un...
RE: Reversing Limited Access to the Admin Menu by leesykes
all you need to do is reverse the process within the SQL tables.Compare the data to the other rows i...
RE: Module not working when logged off. by leesykes
thanks for the info,
Reversing Limited Access to the Admin Menu by wynnjon
Hi!  I followed the tutorial for limiting the access to the admin menu.  What a great thing!However,...
RE: Trouble installing! Designer trying to be a Developer. by leesykes
glad to hear you found a solution, thanks,
RE: Skim Question by leesykes
You could but you will not be able to have an XHTML compliant page as the SolpartMenu is non-complia...
RE: Include in Menu - Weird Request by leesykes
For your sitemap.xml file - use GSiteCrawlerYou could create the site map before moving the sub menu...
RE: Trouble installing! Designer trying to be a Developer. by awright14
It looks like I had ASP installed in the wrong order.  Copying and pasting this into the Run Command...
RE: Need Help Changing Containers Contentpane's Text Color by leesykes
Hello,Have you tried adding a class to the content area of your container and then styling the p, a,...
RE: Vertical SolpartMenu by leesykes
hello,If you wish to display the admin and host menus within the house menu, you need to enable it i...
RE: Firefox Does Not Display WMV File In Media Module by leesykes
Hello,I have just tested this and I can play a wmv file in Firefox 3.0.3, so it does suggest that it...
RE: advice wanted convert site to DNN while keeping existing asp functionality by leesykes
You could try using the IFrame module in DotNetNuke and then just link the IFrame to the current pag...
RE: Need Help Changing Containers Contentpane's Text Color by CROKeefe
Thanks for the quick update... I know it looks broken right now, but I had the TITLE classes working...
RE: Need Help Changing Containers Contentpane's Text Color by leesykes
The default class for a container is .head so you will find that the .head class will override any s...
RE: Module not working when logged off. by t.ramya85
have to set the cache time to '0' in that module setting.
DotNetNuke Modules
RSS Feeds