Mark Brown - Web Standards & CSS

.NET developers are incompetent

Mark — Tue, 05 Aug 2008 01:29:05 +0000

What an outrageous, perhaps justified statement.

The amount of times .NET developers struggle to make the simplest of changes to the output of a page blows my mind.
Whether it’s working around ‘features’ of the framework or customising one of their controls, it’s always just too dang hard.

Some developers are better than others, but it seems to be the very framework that encourages people to build things using controls that are hard to maintain/tweak.
Abstracting things for the sake of abstracting.
‘’Hmm, you can only have one asp.net form tag in a page”, “ahh, but I’m using a Grid for that”

–

I just needed to vent.. ASP.NET is the poo and All developers should learn the technologies at hand and not cover them up with controls and server-side code. geez

Absolute positioning setting dimensions

Mark — Tue, 22 Jul 2008 03:20:45 +0000

I don’t use absolute positioning all that often but have found a new use for it, setting dimensions of an object to occupy dimensions that are hard to get. Like 100% -200px.

By giving an element opposing position values i.e left:0 and right: 0; you are saying make this elements left margin touch the left edge of the parent element - and the right margin touch the right edge of the parent element - give me a width of 100%.

Some HTML

 class=“panel_container”>
   class=“panel left”>
 
  
   class=“panel right”>

Some CSS

html, body {
	height: 100%
}
.panel_container {
	height: 100%;
	position: relative;
}
.panel {
	top: 10px;
	bottom: 10px;
	position: absolute;
	overflow: auto;
	border: 1px solid #bbb;
}
.left {
	left: 10px;
	right: auto;
	width: 200px;
	background: #FC6
}
.right {
	left: 220px;
	right: 10px;
	background: #9C6;
}

Compatibility:
This use of absolute positioning works perfectly in all modern browsers except IE6 and below. Ouch.

The solution is to use an IE only ‘expressions’ to set the dimensions of the elements.

* html .panel {
 height: expression((d = document.compatMode == “CSS1Compat” ?
 document.documentElement : document.body) && (d.clientHeight - 20 +“px” ));
}
* html .right {
 width: expression((d = document.compatMode == “CSS1Compat” ?
 document.documentElement : document.body) && (d.clientWidth - 230 +“px” ));

Complete example:


 xmlns=“http://www.w3.org/1999/xhtml”>

 http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
</span></a></span>Panels example<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">
 type=“text/css”>
/* reset */
* {
	margin: 0;
	padding: 0
}
body {
	font-size: 80%;
	font-family: Arial, Helvetica, sans-serif;
}
h1, h2, p, pre {
	margin: 0 0 1em 0
}
h1 {
	font-size: 150%
}
h2 {
	font-size: 130%
}
pre {
	font-size: 110%
}
/* layout */
html, body {
	height: 100%
}
.panel_container {
	height: 100%;
	position: relative;
}
.panel {
	top: 10px;
	bottom: 10px;
	position: absolute;
	overflow: auto;
	border: 1px solid #bbb;
}
.left {
	left: 10px;
	right: auto;
	width: 200px;
	background: #FC6
}
.right {
	left: 220px;
	right: 10px;
	background: #9C6;
}
.inner {
	padding: 10px
}
/* IE6< filter */
* html .panel {
 height: expression((d = document.compatMode == “CSS1Compat” ? document.documentElement : document.body) && (d.clientHeight - 20 +“px” ));
}
* html .right {
 width: expression((d = document.compatMode == “CSS1Compat” ? document.documentElement : document.body) && (d.clientWidth - 230 +“px” ));
}



 class=“panel_container”>
   class=“panel left”>
     class=“inner”>
      Left Panel
      The left panel is 10px from the left edge and 200px wide.
      
.left {
  left: 10px;
  right: auto;
  width: 200px;
  background: #FC6
}

class=“panel right”> class=“inner”>

Absolute positioning setting dimensions

Both panels have the following to make them 100% of the height -20px: />


.panel {
  top: 10px;
  bottom: 10px;
  position: absolute;
  overflow: auto; // scrollbars if contents exceed dimensions
}

Right Panel


.right {
  left: 220px;
  right: 10px;
  background: #9C6;
}

Compatability

This use of absolute positioning works perfectly in all modern browsers except IE6 and below. Ouch.

The solution is to use an IE only feature called expressions to set the dimensions of the elements.


* html .panel {
 height: expression((d = document.compatMode == "CSS1Compat" ?
 document.documentElement : document.body) && (d.clientHeight - 20 +"px" ));
}
* html .right {
 width: expression((d = document.compatMode == "CSS1Compat" ?
 document.documentElement : document.body) && (d.clientWidth - 230 +"px" ));
}

Soul destroying

Mark — Thu, 08 May 2008 07:55:14 +0000

Menu’s built by javascript and Menu’s with text-decoration: blink;

Web Development position at PageUp People

Mark — Wed, 27 Feb 2008 10:15:06 +0000

If anyone is looking for a job in software development, you should strongly consider this software development position at pageup people

Please Contact me if you’re interested in finding out more - Or just go ahead and apply at the page above.

I’ve only been with pageup 3 months but i’m thoroughly enjoying my work.
The company itself is a rapidly growing one which specialises in creating web applications to help manage an organisations talent… What does that mean?
We offer recruitment and management tools to help employers get the right employees and to get the best out of those employees throughout their time within the organisation.

PageUp is made up of a very talented bunch of young employees with a wide range of skills.

The Development team is looking to find someone with an interest in back-end web development, a knowledge of ASP, .NET and SQL would be ideal - but if you feel you have something that you could add to the team - then what are you waiting for?

Bezier curves with <canvas>

Mark — Thu, 21 Feb 2008 06:35:43 +0000

Having some fun with the html canvas element. linky linky

" />

Overlays and fixed positioning.. including IE6

Mark — Wed, 20 Feb 2008 06:33:42 +0000

There’s many incarnations of lightbox js that have popularized this approach as a kind of dialog box.
It turns out it’s wonderfully simple to achieve in modern browsers:

 id=“overlay”>
 id=“dialog”>
  Some content

#overlay {
	position: fixed; /* A marvelous property */
	z-index: 100;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: #000;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	opacity: 0.75;
}
#dialog {
	height: 400px;
	width: 700px;
	margin: 0 auto;
	position: fixed;
	z-index:101;
	background: #F2F2F3;
	left: 50%;
	top: 50%;
	margin-top: -200px; /* half total height - could be scripted if unknown but css is smoother and cooler */
	margin-left: -350px; /* half total width */
}

With a bit of unobtrusive js to show/hide these two elements and wallah!

IE6 craziness:

/* IE6< fixed positioning - kind of */
* html #overlay, * html #dialog {
	position: absolute;
}
* html #dialog {
	top: expression(ignoreMe = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)+ (document.documentElement.clientHeight / 2));
}

It’s a little jumpy but all scripted versions of this kind of positioning have that effect.

Easy peasy Japanesey.

png 8’s and alpha transparency

Mark — Tue, 05 Feb 2008 11:55:36 +0000

Firstly, PageUp People has a new website and it’s pretty sexy. The menu’s took some work to get right in IE6< - but nothing unusual there.

I have an interesting challenge at work at the moment, we are creating a new application that will act as a kind of portal for all the different applications we offer.
In this 'portal thingy', we'll have a collection of 'widgets'.
To allow for rapid development and customisation of these widgets we need to be able to create a new one simply by adding a new entry into the Widget table. This in itself poses interesting design challenges - You can't use background-images specific to any widget - they all need to be generic - The colors, number of rows, columns and amount of content is all unknown. It means that I can't use background images like I normally would.

As it turns out PNG 8's support for Alpha Transparency enables us to create some nice images with gradient highlights to make generic images sexier.
Using overflow to crop content and sizing all font's / padding in em's will mean we can control all aspects of the design from the CSS and a couple of inline widget-specific styles.

I'll put up an example at some point to put this in context.. But, PNG 8's alpha transparency has full support in all modern browsers except IE6< - But it degrades nicely in those browsers, all alpha channels are completely transparent similiar to .gif - on or off transparency. Similar to this Sitepoint example but a bit more complex.
I’ve had a quick look at using IE’s Alpha Image Loader filter to make the same thing work in IE6< but couldn’t seem to get it work..

If all goes well we’ll have an efficient widget making machine.

Page up on Prototype

Mark — Fri, 11 Jan 2008 23:43:02 +0000

Prototype has been given the go-ahead for testing in page up admin system. Yay, as it makes my job more enjoyable.

Actually incorporating the Rich Text Editor

Mark — Fri, 11 Jan 2008 23:32:31 +0000

May be more difficult than building it..

The rich text editor is built into an ASP ‘control’ so it can be re-used and customized server-side, currently all of the HTML for the textarea, iframe and toolbars are put into the page through this control depending on it’s properties. A script tag is embedded into the page just below this HTML and links to an ASP page and the js is customized depending on variables in the session.

 type=“text/javascript” src=“functions.asp”>

This is a fairly hefty script and I imagine, not being able to cached would slow down the pages considerably.

Putting the new editor into this control was pretty straightforward, include the link to the javascript if the control is used. Edit the Draw() function to output:

 name=“{id}”, id=“{id}” style=“height: {height}; width: {width};” class=“PURichText”>{content}

Simple, change those things and correct the links to the css and images and it should just work..

And it did, in Firefox, Safari and Opera.. IE had soiled it’s undergarments though.
Ahhh, Quirks Mode!

The admin system was designed to work in Internet Explorer only, it was probably first built at a time when IE5.5 was the most widely used browser - And of course when IE6 came out it didn’t make much sense supporting two separate box models.

Don’t add a doctype and the page will continue to look the same in IE6 and any future releases of IE - it was probably the most logical choice at the time. But of course now, we know better

The only way to get cross-browser consistency and some of the more advanced features out the browser - you must render the page in standards-mode. So it seems incorporating the editor has put another task on my agenda. Fixing the styles across the whole admin system to work in standards-mode. This is a fairly big undertaking as the stylesheet is about 4000 lines and some of the styles are rendered out inline by the controls, so there will be lots of digging to fix all of the styling that was relying on IE’s buggy implementation.

It was interesting to see how badly the page broke just by adding the doctype.

After fixing the styling issues to work in Standards-mode and incorporating the editor, I will continue to make the rest of the controls and pages cross-browser compatible. It’s not a goal too unrealistic - The system as a whole is not all too far off being cross-browser, just A Lot of little things that are sometimes hard to get to.

document.all[] is used all over the place, so I just need to go through and add id’s to all the elements that were being referenced by name attribute alone - and change the document.all’s to document.getElementById()

Any traces of Active X controls need to be killed, burned and holy water sprinkled on the ashes.

Any attachEvent’s will need to become a cross-browser alternative.

Dialogs are opened using IE’s showModalDialog functions these all need to be replaced with the standard window.open method.

The innerText property is used to get just the textNode’s values from within an element, being IE only i’ll need to change any uses of this to a little DOM walking.

Just lots of little things.. may the force be with me.

Rich Text Editor.. and another iteration

Mark — Wed, 09 Jan 2008 10:31:30 +0000

The Rich Text Editor in all it’s glory..

One thing I haven’t figured out is how to register key event listeners on the iframe’s in Opera.
I managed to get editorKeyUpHandler being called in Safari and Firefox but haven’t yet tamed Opera - Any clues?

I am loving Prototype, as I’ve learnt more about it over the last week - I’ve updated the script to use more of it’s Class, DOM and Event functions. Writing cross-browser OO javascript has never been so easy.

The pageup website is about to get a facelift which is looking really good. Also, a section of the pageup people application named ‘the Hiring Manager Interface’ which is a subset of features of the app - Is soon to be put into a testing environment so my browser-compatible updates can be tested.

I’m enjoying my work at pageup, and enjoying doing more work with javascript.