Products

Solutions

Resources

Partners

Community

Blog

About

QA

Ideas Test

New Community Website

Ordinarily, you'd be at the right spot, but we've recently launched a brand new community website... For the community, by the community.

Yay... Take Me to the Community!

Welcome to the DNN Community Forums, your preferred source of online community support for all things related to DNN.
In order to participate you must be a registered DNNizen

HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Left Content Pane indenting too much in IE6 and Firefox, Okay in IE7Left Content Pane indenting too much in IE6 and Firefox, Okay in IE7
Previous
 
Next
New Post
3/3/2008 9:00 PM
 

Hi,

My new skin was looking great in IE7. I previewed it in IE6 and the left content pane is indenting too far over to the right. It's doing the same thing in Firefox. Can anyone help?

Also, if you're checking it out, maybe you can tell me why the LINKS tokens at the bottom of the page are different sizes..it's kind of random, every time the different links change sizes.

http://www.cowetacogop.com/AboutUs/Makeover/Makeover2/tabid/85/Default.aspx

Thanks,

Bee

 
New Post
3/4/2008 8:15 AM
 

After 2 hours of troubleshooting I have solved both problems on my own. I solved the content pane shifting problem by changing the parent table to add padding right and left, and removed the margin-left settings on the left pane. This had the effect of removing the extra margin on the left in both IE6 and Firefox. It didn't show up in IE7 at all.

The token LINKS I corrected by changing the visited CSS. I had specified the text settings in the link part and assumed those would be inherited, but they are not. They have to be specified in both the link and visited.

Just adding my solutions here in case it helps anyone else. I did find it helpful to install the web developer toolbar in firefox.

~Bee

 
New Post
3/4/2008 3:54 PM
 

BeeMarie wrote

After 2 hours of troubleshooting I have solved both problems on my own. I solved the content pane shifting problem by changing the parent table to add padding right and left, and removed the margin-left settings on the left pane. This had the effect of removing the extra margin on the left in both IE6 and Firefox. It didn't show up in IE7 at all.

The token LINKS I corrected by changing the visited CSS. I had specified the text settings in the link part and assumed those would be inherited, but they are not. They have to be specified in both the link and visited.

Just adding my solutions here in case it helps anyone else. I did find it helpful to install the web developer toolbar in firefox.

~Bee

 

Do you have a doctype file?
skinname.doctype.xml in your skin package?  This will cause the behavior of the browsers to be slightly more consistant.

 


Josh Martin

 
New Post
3/5/2008 6:02 PM
 

I guess I don'thave a doctype file because i don't know what one is. I have the skin.css, the skinname.ascx, and the image files.

~Bee

 
New Post
3/5/2008 7:57 PM
 

BeeMarie wrote

I guess I don'thave a doctype file because i don't know what one is. I have the skin.css, the skinname.ascx, and the image files.

~Bee

I didn't know much about a doctype either, until I started creating skins of my own, and noticed some wierd behaviors. 

Anyhow the short of it:

You need an XML file in the root of your skin named   skinname.doctype.xml where skinname is the name of the htm or ascx file of the skin.  Example:

MyCrazySkin.htm needs MyCrazySkin.docytpe.xml

The contents of the doctype file should be, for most people, as follows:

<SkinDocType>
 <![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">]]>
</SkinDocType>

What it does is tell the broswer what version of the w3 standard you wish to use.  It won't eliminate all the inconsistancies, BUT it will certainly allow you to eliminate alot of struggle.

 

The long of it:

When I first started trying to skin with DotNetNuke, I was using Virtual Web Developer express(and still do).  I would write my html or ascx whichever, get it looking all nifty, package it and upload it(note that the problems  appear more if you are trying to do tableless).  When I'd upload it, and apply the skin, all the sudden it would look all screwed up. 

So then I'd have to go back into VWD, fix it manually, tabbing back and fourth to IE, 'cause when it looked right in VWD, it looked wrong on the site.  Drove me nuts, but I had no clue why.  Then I'd get it all looking right in IE, and it would look wrong in seriously wrong, not even close, in Firefox and desgin view of VWD.  This would make it almost impossible to troubleshoot 'cause it was like....it was like it was doing whatever it wanted in whichever browser.

Anyhow digging around, I noticed that VWD was putting a line in the top of the code : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

but when it was applied to DotNetNuke if you look at the source code, this line from VWD is about 1/2 way down the page, and instead a similar line is at the top...this one: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 

So...DotNetNuke has a default DTD(that line), that it puts into all the pages it serves up.  This DTD 'causes the browser to go into "quirks mode" which I guess is common practice for some people.  Quirks mode is the same as telling the browser "Ehhh!!! Do whatever you want with this code, I dont' really care", and so the browser does!  Sweeet(not).  The only reason I can see why the head guys and gals who operate the DNN project keep this doctype in, is I guess to make sure you are aware of it at some point..who knows.  The other doc type, the one I mention throws the broswer into "Standards Comliant Mode"...As in, it tells the browser "look at this standard and come as close as possible to it when you display my code"...nice ehh...so now it looks exactly like it does in VWD when it's skinned.

 So the way DNN is constructed, it has to throw a doctype in, 'cause it throws all kinds of stuff in before it even starts your skin....and you have to somehow override this setting.  The browser can only have one doctype, so it looks at the first one and uses it, yours is so far down it just kinda ignores it.  You tell DotNetNuke what doc type to use in....(drum roll please) the doctype file!  skinname.doctype.xml.  DNN Reads this file when building the output pages, throws your DTD in where it puts the otehr one normally ,and you skins look the same in VWD as they do in IE.  Slightly differnet in firefox, but much easier to troubleshoot.

 

A cool way to see this in action is to load up a skinned DotNetNuke site in firefox, and look at the page properties(tools, properties or something like that), and you'll see "Quirks mode" for the standard doctype, then throw that skinname.doctype.xml file in your skin package and load it...and look at the same properites...viola..it shows "Standards Compliant" and it'll even look slightly differnet if your using alot of DIVs and stuff I'm sure.

 

Anyhow important concept to understand.  I hope I didn't confuse you more, or bore the heck out of you.  I just think alot of times its good to explain "why" (or my interpretation of why) something happens or is, rather than just "do it this way".

 

You can give a man a fish and he'll eat for a day, or teach him to fish and he'll never be hungry again! (isn't that how it goes?? :->).

 

 


Josh Martin

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Left Content Pane indenting too much in IE6 and Firefox, Okay in IE7Left Content Pane indenting too much in IE6 and Firefox, Okay in IE7


These Forums are dedicated to discussion of DNN Platform and Evoq Solutions.

For the benefit of the community and to protect the integrity of the ecosystem, please observe the following posting guidelines:

  1. No Advertising. This includes promotion of commercial and non-commercial products or services which are not directly related to DNN.
  2. No vendor trolling / poaching. If someone posts about a vendor issue, allow the vendor or other customers to respond. Any post that looks like trolling / poaching will be removed.
  3. Discussion or promotion of DNN Platform product releases under a different brand name are strictly prohibited.
  4. No Flaming or Trolling.
  5. No Profanity, Racism, or Prejudice.
  6. Site Moderators have the final word on approving / removing a thread or post or comment.
  7. English language posting only, please.
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out
What is Liquid Content?
Find Out