Michael Richard Murphy » XHTML/CSS

CSS Floats and Absolute Positioning

Michael R. Murphy — Fri, 26 May 2006 09:43:24 +0000

Just yesterday I made what I thought was a simple change to a layout. It had a horizontal navigation at the top (an floated list) and two floating content areas below it taking up approximately half the screen each.

For some reason,when I removed a menu item from the end of the navigation,all hell broke loose in Firefox. The left-hand float moved right and the right-hand float bumped down under it. Amazingly the design still rendered as desired in Internet Explorer so I didn’t put a whole lot of detective work into it. The site would only be accessibly on our corporate network where Firefox is almost a four letter word. But it did bother me that removing that one item (which should have no effect on the floats) broke everything so badly. Alas,I still had bigger fish to fry and other problems to focus on so that was going on the back burner.

It’s funny how solutions sometimes present themselves in unlikely places just when you need them. I had cut out reading my regular blogs some time ago to focus on other things but I had a few minutes so I decided to check some out. I’m glad I did since the latest post from Shaun Inman discusses the fragile nature of floats and his solution.

I think I may have found the solution I’m looking for. Check it out,it’s definitely worth a read.

Microsoft Expression

Michael R. Murphy — Sat, 25 Mar 2006 14:10:41 +0000

Our intranet has tons of documents published by a dozen or so different business groups. A good portion of those documents are web pages that have been thrown together assembled in FrontPage and published. Maintenance of those documents fall on the webmaster so when necessary,I need to go in and update them accordingly. This is a terrible,terrible job.

FrontPage writes some of the most awful code I’ve ever seen in my entire life. It even writes some code I’ve never seen in my entire life,like the <big> tag. Where did that come from? I’ve been doing this for a long time and I’ve only ever seen it in FrontPage code.

The FrontPag- generated documents are usually so bloated that I can’t even do a simple find on the text I’m looking to modify because it’s broken up by nested or empty tags. If just looking at the code doesn’t immediately suck out my will to live and send me into sinking depression,I’ll usually try to clean it up and simplify. It’s so bad that the other day I literally replaced about 900 lines of HTML (yes,HTML) with about 100 lines of semantic,standards-based XHTML and CSS. Yeah me!

That’s why it makes me happy to introduce Expression,the new FrontPage from Microsoft. That’s right,I’ve read that FrontPage is being replaced by Expression which supposedly writes valid Strict and Transitional HTML and XHTML,has better support for CSS,and will even validate accessibility if you so desire (and you should).

IE7 CSS Support and Float Clearing

Michael R. Murphy — Fri, 24 Mar 2006 10:18:08 +0000

I’ve heard that the beta of Internet Explorer 7 has finally been released,so now is the time for developers to step up testing of their work to make sure everything is copacetic.

The good news is that IE will now support transparent PNGs. The bad news (among other things) is that it now parses the comment filter /**/ that is commonly used to hide styles from its older siblings.

I’ve also heard that IE7 isn’t supporting the :after pseudo-element which developers commonly use to clear floats,although that didn’t immediately jump out at me on developer’s checklist provided by Microsoft. Take a look and see what you need to get your sites ready for IE7.

Yahoo! Developer Network

Michael R. Murphy — Sun, 19 Feb 2006 02:28:30 +0000

I was originally going to tell you how this book I’ve been reading,Ajax in Action by Dave Crane and Eric Pascarello with Darren James,has made me a Javascript phenom and how I’m putting together amazingly interactive interfaces using Ajax.

Instead,I’ll just tell you how Yahoo!’s Developer Network has pre-built interfaces and design patterns. All open source under BSD license. Want to implement drag n’ drop functionality? How about breadcrumbs or pagination? Auto-complete? Look no further,it’s all there. Quite a few of these have sparked my interest and will no doubt save time on future projects.

I’ll probably still finish the book however.

CSS pointers and a starting place

Michael R. Murphy — Wed, 15 Feb 2006 03:26:35 +0000

Whenever I begin work on a new project,I have three files that I always turn to: an XHTML document,a CSS file,and a Javascript file. The XHTML document is a blank canvas but the important part is that it contains a valid doctype declaration and links to the CSS and Javascript files.

Relatively recent articles by Mike Stenhouse at Content with Style and Faruk Ate? at KuraFire Network discussed and published their CSS “starter” files so I figured why shouldn’t I do the same? My CSS file actually comes from Faruk’s orginal (mentioned here) but now updated with the improvements he mentions in his most current post. You can download my template site which includes a valid XHTML “starter”,CSS,and Javascript files.

Update: A while back I added the line-height property to my CSS declarations after reading somewhere that giving elements a line-height slightly larger than the text size gave text more breathing room. I can confirm that this produces more legible,more professional looking copy. I read recently however on Eric Meyer’s site that I hadn’t been implementing this in the best fashion. I’d been specifying line-height in terms of ems which computes line-height based on the font-size of the element. This is fine and dandy for the element itself but any descendants inherit the computed line-height of the element rather than calculating their own. It appears that the best manner is to specify a unitless line-height which passes the number on to descendants as a sort of multiplier from which each descendant calculates its own line-height. So,my base CSS file has been updated to use a unitless line-height declaration.

JavaScript Calendar

Michael R. Murphy — Wed, 18 Jan 2006 02:08:12 +0000

It’s called The DHTML/JavaScript Calendar and it definitely is. I promised a few days ago that I would start to post links to scripts I’ve found online that were useful to me,so here goes.

The javascript calendar available from dynarch.com can easily be set up in about 5 minutes simply by copying a few scripts from their download to your web server and adding the appropriate links to them in your document’s head tag. It also comes with a half dozen “themes”,which consist of pre-made stylesheets that just need to be copied and linked to.

Once you’ve got the script and stylesheet links in place,Dynarch provides a demo page with all the different types of implementations possible. Find the one you like and copy and paste the source into your document. Further customization is possible with only intermediate knowledge of Javascript and HTML but it really is as simple as cut and paste.

See below for a sample implementation:

Sitecore CMS

Michael R. Murphy — Mon, 28 Nov 2005 02:05:54 +0000

I attended a demo for a CMS by Sitecore recently. The organization is looking at it in order to more efficiently update content on our external sites but it’s also of interest to me as an intranet developer for the same reasons. Sitecore offers full support for Microsoft’s .NET plus XML, SOAP, XSLT, HTML, CSS,Javascript,C#,and the DOM so that it can easily integrate with ERP systems,CRM tools,financial systems,etc. More about that in a later post however. Because of the wide range of department representatives attending,the demo didn’t get too technical but focused more on the role of an Editor.

The Editor functions seem to most closely map to the responsibilities of copywriter,meaning they are ultimately responsible for generating content. What I liked most about Sitecore in this regard is the ability to establish a workflow. Within the system,the overall adminstrator can specify areas which are editable by the Editor. The Editor can then add,delete,modify,etc content within these areas and mark it as pending for the next step in the workflow. This could be the adminstrator,another higher level Editor,legal counselor,compliance,corporate branding,or anyone who might need to approve content before it is published. Any level can send copy back to lower levels for revisions along with the ability to attach notes to the copy. It’s my understanding this workflow can have unlimited steps as long as it stays linear.

Sitecore also makes allowances for dated content. Content can be created in a staging area and then given a date in the future when it should automatically be published. For example,the developers for an E-Commerce web site can put together promotional materials ahead of time for their big post-Thanksgiving sale and set it to be published Thanksgiving day at11:59p or whenever they like. Conversely,content can also be set to expire automatically at a future date.

The technical developer-focused demo is this week so I’ll have additonal details after that. So far though,I’m pretty impressed with this product and excited about the opportunities using it could uncover.

CSS2 Certification from Brainbench

Michael R. Murphy — Tue, 15 Nov 2005 02:36:02 +0000

I was hoping to complete more certifications while Brainbench is offering them for free but since the promotion’s end date is tomorrow,I probably won’t manage it. All in all though,I received four certifications for free that normally retail for $50 each. Not a bad deal. I should take this opportunity to thank RichInStyle.com for the crash course in CSS2. It’s quite possibly the ugliest site I’ve ever seen but it gave me the knowledge I needed to complete the CSS2 certification.

Frankly I’m a little surprised that scoring in the 91% percentile didn’t qualify me for a Master level certification since I scored in a slightly lower percentile for the HTML 4.0 certification and still managed to make the Master level. Maybe I’m just splitting hairs but I guess I’m just a perfectionist like that. Maybe the quality of the people taking the CSS test raised the bar a little higher? At any rate,I managed to get some resume boosting certifications under my belt at no cost so I’m pretty content.

IE/Win whitespace bug

Michael R. Murphy — Wed, 07 Sep 2005 10:05:17 +0000

Those of you using IE/Win may notice that I finally fixed the whitespace bug that’s been causing a 2 pixel or so whitespace to appear between the top banner and the navigation elements of this site. Although the fix was so simple,I wouldn’t necessarily consider myself lazy for taking so long to do it. It’s more a matter of actually remembering to do it (I primarily use a Mac for at work browsing or FF/Win at home).

IE hates “tags”

Michael R. Murphy — Wed, 31 Aug 2005 03:04:12 +0000

As reported by Eric Meyer amongst others,a problem users of A List Apart’s new release are experiencing is that IE/Win seems to hate,amongst many other things,“tags” as an id value.

It appears that “tags” is a method in the IE/WIN DOM. Therefore setting id="tags" changes it from a reference to the element with that id rather than the method. A more thorough explanation can be found here but suffice to say,refrain from using “tags” to identify an element.