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, ...Using CSS in Multiple BrowsersUsing CSS in Multiple Browsers
Previous
 
Next
New Post
12/19/2007 4:07 PM
 

I am in the process of creating a purely liquid CSS interface.  I have the first part of it up.  Currently it renders as close as possible in IE6, IE7, Mozilla, Netscape, Safari and Opera.  I am having a problem in IE (similar to one in Opera and Safari) where the ability to "Show the Conrol Panel" button is invisible (disabled, not rendering - pick one).

I have spent the last few months trying to make a truly liquid CSS skin and have a client paying for most of the work.  It scales to 1600 and reduces to 700 keeping column integrity.  I use javascript to render rounded corners to make modules and the like scale.

I am at a lost.   Anyone willing to help is welcome to the code I have.  I will update and refactor it once it is done and release the stylesheets.  Seriously, I have worked for months testing every possible tag in every possible browser to make this work.  And now I am stumped.

I hate being stumped.

 
New Post
12/21/2007 11:42 AM
 

I finally had a break and so spent some more time on this.  I recommend to anyone working in CSS to download the IE Developer Toolbar to confirm stylesheet changes.  I had been using it to troubleshoot but had yet to explore the "matches" menu option which shows hits on stylesheet entries for the current page.  I knew from traversing the DOM that the id of the control not rendering was:

dnn_IconBar.ascx_imgVisibility which I tagged in my stylesheet as IMG#dnn_IconBar.ascx_imgVisibility

Matches showed that this CSS entry received no hits.  On further inspection I saw that IE had rendered the name of the stylesheet tag:

IMG.ascx_imgVisibility#dnn_IconBar

I am now under the assumption that the (.)period in the ID of the tag is somehow causing IE to choke on the stylesheet.  When I get a bit more time I will edit the ascx file and rename the id of the control to see if in fact this is the problem.  If so...I will post and propose a change.  I also recommend not using (.)periods in id's.

 
New Post
12/21/2007 12:15 PM
 

I never noticed the dot in the id, but it is legal...

W3C:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

 
New Post
12/21/2007 12:46 PM
 

The dot may be legal.  But I changed the iconbar.ascx.vb file so that the line 137 reads:

From - Me.ID = "IconBar.ascx"
To -      Me.ID = "IconBar"

Once I did that it picked up the styles in my stylesheet.  Again I used the IE developer toolbar's match count option on the stylesheet and now the styles are coming up with one hit each.  I had to add 2 entries to get it to work:

a#dnn_IconBar_cmdVisibility
{
width: 12px;
height: 15px;
}

img#dnn_IconBar_imgVisibility
{
width: 12px;
height: 15px;
}

It is not unusual for some browser implementations to choke on images without width and height.  I might also mention my renaming brought it in line with the standard naming convention used in DNN skins which don't regard a (.)period on tag id.  The fix works across IE Mozilla Netscape Safari and Opera.  Everything now renders within a 1 or 2 pixels of each other.

One more mention on the Control Panel and liquid CSS.  Set the width on the container DIV you create to 99% to fix stability problems with it bumping the screen width (and producing a scroll bar) when appearing in some browsers. 

At some point I am going to nail the control panel in pure CSS.

 
New Post
12/21/2007 1:04 PM
 

It appears then that IE, Safari and Opera have a problem implementing a (.)period in an ID then.  Now that I can set the width and height the icon doesn't look so ugly in some of the browsers anymore.

Browsers are supposed to be compliant with W3C standards?  Who would have figured.  LOL

 
Previous
 
Next
HomeHomeUsing DNN Platf...Using DNN Platf...Skins, Themes, ...Skins, Themes, ...Using CSS in Multiple BrowsersUsing CSS in Multiple Browsers


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