CSS

DotNetNuke Core Team all up in my Grill

Tuesday, June 3rd, 2008 | CSS, DotNetNuke, Improving Code, Programming, Skinning, Web Development, XHTML | No Comments

Man, I’ve been getting quite a bit of attention from the DNN Core Team the past couple days.

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.

DotNetNuke Default.CSS: Seriously??

Monday, June 2nd, 2008 | Artemis Solutions Group, CSS, DotNetNuke, Improving Code, Programming, Ranting, Skinning, Venting, Web Development, Work Stuff | 14 Comments

Here’s another one of the myriad of reasons that I am displeased with DotNetNuke as a web development platform:

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. 

CFD Smile Goes Live!

Monday, November 12th, 2007 | CSS, Clients, Code, Custom Development, Design, Portfolio, Portfolio - Freelance, Programming, Projects, SEO, Semantic XHTML, Skinning, Web Development, Websites, Work Stuff, XHTML | No Comments

Well, my first side project has finally gone live! After months of hard work, I now unveil www.cfdsmile.com to you. We wanted to bring out the services right up front for best emphasis, and lots of heavy stock photo usage for high impact.

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!

Login Usability: Am I in or out?

Wednesday, August 1st, 2007 | CSS, Code, Design, Feedback, Improving Code, Javascript, Programming, Usability, Web Development, Websites | No Comments

UPDATE: After making this post, and refreshing the parallels forums page, I was presented with “Welcome, Joseph Sak” instead of a login prompt. So maybe I got it wrong, or they did, but this post still stands!

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.

› Continue reading

Semantic XHTML - More than Table-less layouts

Wednesday, July 18th, 2007 | CSS, Improving Code, Life, Programming, Semantic XHTML, Web Development, Work Stuff, XHTML | No Comments

OK so I have a confession to make. I didn’t know that semantic XHTML is different from standards-compliant XHTML.

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.

New Project “Marionette” in the works

Tuesday, April 3rd, 2007 | CSS, Code, Design, Life, Marionette, Photoshop, Programming, Projects, Web Development, Websites, Wordpress, XHTML | No Comments

OK, so I know I haven’t worked on the veritas project in a long time, but I promise you it is because my client has been busy working a second job and we just haven’t been in touch on the matter lately. It’s no big deal, I’m not charging money for the project and there is no strict deadline. I will be posting about that soon, though. I just got on him to purchase a domain and hosting solution so I can begin scripting the site. I will use wordpress and convert it into a CMS just like I did for Shirock Photography.

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.

Fix your Javascript Print Style Switcher for Internet Explorer

Monday, February 19th, 2007 | Browsers, CSS, Code, Design, Internet Explorer, Javascript, Programming, Web Development, Websites, Windows | 4 Comments

So you’ve decided to use javascript to swap out a print style css sheet that basically hides a bunch of divs and maybe widens the content area. Perhaps your re-color the links and the text and fix the font sizes.

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.

The Beauty of Standard Code

Wednesday, February 14th, 2007 | CSS, Code, Collaboration, Programming, Teamwork, Web Development, Websites, XHTML | 1 Comment

Eric Puidokas used to be a coworker of mine, but now he works in Florida for the New York Times. While he was here, he developed a standard skin and css naming convention for us to use so we could easily jump into each others’ code when need be to fix problems or implement redesigns.

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.

CSS for IE 6 and 7 with no hacks

Tuesday, January 16th, 2007 | Browsers, CSS, Internet Explorer, Programming, XHTML | 7 Comments

UPDATE
Since the time of this writing I have learned some important things:

  • 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:

<!--[If lt IE 7]>
<body class="ie6">
<![endif]-->
<!--[If IE 7]>
<body class="ie7">
<![endif]-->
<!--<![If !IE]>-->
<body>
<!--<![endif]>-->
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: <body class="ie6"> If IE 7 then read: <body class="ie7"> If NOT IE, then read: <body>

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 <![If !IE]>. 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.

About the Author

I'm a real Web Developer from East Lansing, MI. I like HTML, CSS, JavaScript, last.fm, 37signals, flickr, Getting Real, dogs, bikes, social life, ROWE, speaking my mind, UX design, dinner dates, dancing, movies, indie rock music, hipsters, scene kids, bars, food co-ops, drums, writing, books, organic food, eco-friendly, progressive thinkers, the secret message of Jesus, and lots of other things.