I just wanted to say I appreciate the feedback and I’m interested in the advancements and improvements being considered in upcoming versions of the platform. Thanks for putting up with my candor and overt angst in these past few bitch posts.

I’d be particularly interested in knowing about any plans to move forward with .Net 3.5 and its ability to allow designers to define all the HTML in the controls. I’d like to see DNN reach the point where all rendered HTML is controlled by the front-end engineer, and we can achieve W3C compliance and simpler control over themes and content generation.

The “default.css” included with all installs of DNN has this (and more CSS for other stuff like it) in it:

H1
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
font-weight: normal;
color: #666644;
}

H2
{
font-family: Tahoma, Arial, Helvetica;
font-size: 20px;
...

(I think you get the point)

Excuse me, DotNetNuke core team, but isn’t stuff like this up to the Designers and Developers? Why are you including a default stylesheet with definitions for HTML elements that would be used by Web developers? I can’t tell you how many times default.css has left me absolutely baffled about the smallest details not being quite right according to our design specs because it has these random “defaults” in it. It’s not up to DNN Core team to define my font families, sizes, and colors. And seriously, stop using pixel font sizing.

It’s becoming clearer to me almost on a daily basis, that DNN is not the right CMS for a professional Web shop to be using. They probably have this default.css for people who don’t make skins or know anything about Web development. And if you remove default.css, it completely hoses all the Admin pages and Control Panel. It takes way too much time and effort to figure out what’s removable and what’s not, and you always end up surprised when some random element isn’t positioned or styled correctly later on down the road.

It’s time for us to move on to a CMS that gives the developer full control over the theme, and not put a bunch of defaults in it that you can’t get rid of. 

We also worked with a professional web content writer to make the content more effective and search-engine optimized. This, coupled with semantic HTML, CSS, and google web master tools, will help this site rank high in keywords for Texas Dental Services.

So, please visit the site if you get a chance, and enjoy!

The Parallels Forums recently got some redesign and information restructure, which all looks good and is organized quite well. But they’ve missed a couple really easy issues with their login functionality.

When you log into the Parallels Forums, it takes you to a “logging in” screen and redirects you back to where you were, which is fine, but what is this?!

Am I logged in or out?

This is what you see in the top right of the forums after logging in. Apparantly, I’m logged in because I can start threads, but unless I click on the “+” symbol in the top left and opening a post-thread page, I have no visual cue that I am logged in.

Originally, with the old design, you saw your name and a “logout” link next to it. Or you could click your name to edit your profile. This was highly usable and gave immediate feedback to the user that yes, John Smith, you are logged in.

Now, Parallels, if you’re not willing to clean up that little mess, why are you making me erase “Login” from your textbox before typing my user name?

You can solve this with a simple function.


onclick="eraseInput();"

Pretty simple usability points, and I can’t believe Parallels just got rid of them with their new design.

I formally apologize to the entire web development community. My terrible practice over the last seven years has finally caught up with me and put me in my place!

I am deeply ashamed and will be making every effort to step up my game and read all about the wonderful world of semantic web development.

So, I am working on a new project, teaching myself cakePHP, and for now, it is codenamed “Marionette”. I’m very, very excited about this project and I hope to produce something in the coming weeks. Stay posted.

You try it in Firefox and it prints perfectly, but when you print in IE, you’ll notice IE didn’t really print your printable version.

So you think, ‘Ok I’ll add media=”print” to my stylesheet link!’ and then you refresh your page, try your Print this Page link, and nothing happens! And it still prints the wrong version! What to do?

Well, your old pal Joe here figured it out.

Here’s what you do:

1. Create a separate stylesheet called print.css
2. Add this code to your master stylesheet:
   
   @media print {

   @import "print.css";

   }


3. Implement your javascript for making the stylesheet override your master stylesheet
4. Test
5. Enjoy!

This allows you to switch to your print style so it is preview-able before printing and also tells IE to use print.css when it prints a page on your site. So incidentally, if a user just clicks print in IE without switching to your style, they will still get your printable version. I suppose this might cause confusion but considering the most reasons for making hard copies of digital information, it probably shouldn’t pose too much of a problem for your average user.

Now if your user wants to have a pretty print out of your website because they can’t access a computer to show it to someone else away from home, they’ll probably get stuck with the fact that IE does not print background images and colors by default any way.

I recently had the opportunity to do just that. I had to put in a new design for a client based on roughly the same layout. Eric’s standard coding made it very simple, and a process that takes 4 to 5 hours from a blank sheet took about 1 hour with Eric’s code.

We use the same names for similar layout elements in every single web page we do. It goes kind of like this: (this list identifies common unique DIV IDs)

• Frame (main container)
• Header
• Nav (main nav bar)
• Sidebar (sub page nav bar)
• Main – or – Content
• Footer

So thanks to Eric for the great code, and let this be an encouragement to other development teams to use standard naming conventions for your CSS and HTML elements.

Download a zipped example of our standard code.

• With correct doctypes, IE6 almost always renders the same as FFX and IE7, except when it comes to PNGs.
• If you set your body’s font-size to 62.5%, you reset browsers to 10px.

Eric posted about this some time ago, but I really think this is one of the most unique methods I use in my coding process. I’ve yet to see this idea brought up by most sites I browse for CSS/XHTML solutions. The idea is that you can use pure XHTML in conjunction with conditional comments to create a CSS style sheet that is free of your usual hacks. The reason we found this out is because the people on the IE 7 dev team actually managed to bring their new browser into closer range for compliant style rendering. IE 7, for the most part, follows the box model pretty well, and ignores the usual string of hacks we use in our CSS.

Before we learned about conditional comments, we were using an underscore to rewrite any definitions that IE 6 needed to render our code correctly. The most common fix was usually to the width attribute. Add your padding back. Well, no more underscores. Here’s what you do:

When you create your body tag, write it as so:







OK, so what is this mess, you wonder. This is code that only Internet Explorer since v5.5 understands. Microsoft did a good thing by adding this functionality so that web developers like us can fix our coding problems without hacks. Essentially here’s what it says in order from top to bottom:

If Less Than IE 7 then read: If IE 7 then read: If NOT IE, then read:

Since the first two statements are commented out, all browsers except IE ignore the HTML inside the comments. The last statement is commented it out, as well, but the HTML: is not. This is actually a twist on down-level revealed comments. The tags supplied by MS in the link above would have you use . This tag is not valid XHTML. All we did was put comments around it. IE still understands, and the code is perfectly valid. IE will skip that tag, no other browser will. Everyone is happy.Here’s how you use it in CSS:One thing I noticed is font sizes in IE tend to be bigger than Firefox. Here’s what I usually do at the top of my CSS files:

body{
font:normal 1em Arial, Helvetica, sans-serif; }
body.ie6, body.ie7{
font-size:0.9em;
}


Starting my stylesheets with this declaration almost always guarantees my fonts will be the same size on Firefox, IE6, and IE7.

And of course, if you need to fix a width problem due to improper box model:

.bigdiv{
width:140px;
padding:0 5px;
}
body.ie6 .bigdiv{
width:150px;
}

Using body.ie6 as the parent selector will cause .bigdiv’s new width to only be implemented by IE 6.

You may read Eric’s post and notice he didn’t differentiate between IE 6 and 7 in his comments. Since his post, I’ve come to find that sometimes IE 6 needs fixing, sometimes IE 7 needs fixing, and sometimes they both do. That’s why I’ve chosen to differentiate between them in my body sub classes.