Graphic designers just love creating pages that we know will cause IE6 issues. I honestly don’t think they can help it 
As I come across my usual bugs I’m going to start posting what the bugs were and how I solved them.
Simon Day – Professional web designer since 1997
Blog about CSS, XHTML and SEO ideas
Archive for March, 2009
IE6 Bug – white space between 2 divs
CSS3, Javascript and presentation in general
There is a lot of talk at the moment about the best way forward to control the presentation of pages. CSS3 could still be a long time in the making and designers are itching for new ways to take control of their presentation due to the shortfalls of CSS2.
An increasing amount of designers are turning to JavaScript and the likes of jQuery for the answer. Don’t get me wrong I think jQuery is an incredibly powerful tool but these options all have one major flaw; HTML and CSS are not blocked by users but JavaScript is blocked by an ever increasing number of people. JavaScript should be about user behaviour and the presentation should be left in the safer hands of CSS.
FireFox is up to roughly 20% of the market and rising quite fast. NoScript is one of the most downloaded add-ons for a browser ever. I am one of those who have been using NoScript for its safety for a number of years. My problem is an increasing amount of sites are broken or un-navigational because the presentation, or even worse the navigation, have been created in JavaScript with no thought to the impact of the users with JavaScript turned off. Yes they should know better and yes it is usually easy to create the alternatives but the simple truth is by giving JavaScript more control over the presentation CSS should be doing it is causing more and more issues.
Most problems could be solved by allowing CSS to handle some variables and math formulas and maybe even modify DOM. With the use of basic math you could have an amazing amount of control over presentation without the worry of the browser not rendering your fine work.
The CSS work group seem to be saying that CSS is meant to be simple so DOM manipulation and maths should not factor into it. This I find weird when we have pseudo-classes like :nth-child in CSS3 which you can give a formula like :nth-child(3n+1) – The syntax is :nth-child(an+b), where you replace a and b by numbers of your choice. For instance, :nth-child(3n+1) selects the 1st, 4th, 7th etc. child. So there you go, no maths for CSS3… hmm…
We are currently in a state of flux and it is one that worries me because we seem to be on the precipice of a change in the wrong direction. I would like more control over the presentation but I would like it controlled by the languages that should be handling them. We should not run of the risk of the presentation being further blocked or require even more degrading op top of the CSS degrading for older browsers. Do we really want to start going down a route where we are degrading the CSS for older browsers and then degrading the JS for those with JS turned off?
Network with Simon on LinkedIn ~ Twitter ~ Facebook ~ freelancer homepage.
Free tools you can’t do without
Tools to speed up every process
Unlike my last post where I list the more unusual sites for web designers, in this post many of them will be common but are simply too good to not use.
Firebug
Firebug is an add-on for FireFox that is simply the most must have tool you need. It allows you to manipulate your code on the fly. For larger websites there are often multiple CSS files for layout, block elements etc so you can also see what file could be possibly over-riding your work. This one tool saves me hours and hours of time each month. I simply could not live without it.
(A screenshot of Firebug)
Html validator
A lot of cross browser problems can be fixed by having valid code. If you forget to close a tag there can be a ripple effect down the page which can then start breaking other elements on the page. By having valid code you not only have a more accessible website but helps stop cross browser problems; win win! This FireFox add-on called html validator will show you if you have errors and by double click the icon it will show you where and why.
Cross browser testing is always problematic when it comes to testing your work but none more so than IE. You can have various versions of other browsers running on the same OS but not with IE. Thankfully you have two options;
MultiIE – http://tredosoft.com/Multiple_IE (Windows XP only at time of writing)
Microsoft virtual PC – Free download from http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx
Both have their drawbacks. Multi IE won’t run on vista and virtual PC is time-bombed so you have to update the image from time to time. I have Vista on my main work machine so I have had to go the virtual PC route but I’m glad i did because I can install older versions of other browsers on the same image as IE6
Network with Simon on LinkedIn ~ Twitter ~ Facebook ~ freelancer homepage.
A web designers bookmarks
My most useful bookmarks
Where would we be without bookmarks? Some are common but here I try to show the ones I don’t see on others but I couldn’t live without…
Premade code to speed up hand coding
http://html-ipsum.com has a ton of code pre-made to make hand coding easier
Heat Map
No matter how much thought went into the structure of a page there are times when the user does things you never expected them to do (clicking on non-relevant, non-hyperlinked links for example). A heat map is a great way of seeing what users are doing and then fine-tuning the page to the max. Labmedia’s free heat map tool is very easy to set up and it is a must have, must use bookmark.
A heatmap in action
Website Grader
http://website.grader.com is one of the best online SEO tools out there. You can instantly check to see where you’re going wrong with regards to your SEO strategy. Simply a must use tool!
Lorem Ipsum Generator
http://www.lipsum.com is a lorem Ipsum generator for quickly adding sentences or paragraphs of text into a design.
Fav Icon creator
http://tools.dynamicdrive.com/favicon/ is an online favicon generator. Handy if you don’t have the plug-ins or tools to make one.
IE6 Bug list
http://www.positioniseverything.net has a great page here listing all the IE6 bugs in one place.
Network with Simon on LinkedIn ~ Twitter ~ Facebook ~ freelancer homepage.