Smart red fox

I know this is a common problem, and is well documented on a number of sites, but each time I run into this problem I seem to forget the best method for narrowing down where the problem is coming from.

First, the problem

This is a real example from a project I’m working on at the moment. This layout worked perfectly in FF3, Chrome, and IE8. It was only when I came to look at the layour in IE6 that I saw the problem.

When first loading the page the following shows:

Broken in IE6

As you can see the box with the tick in it is in completely the wrong place – it’s supposed to be just above the “read more” link. Now is where IE6 shows it’s real strangeness. When I hovered over the read more link, or the item itself, it moved to the right place.

I’d seen this problem a few times before, and thought I knew what I was doing to fix it – a light smattering of Position:relative, and Zoom:1 and I’d be done. Unfortunately, it wasn’t that simple. My next step was a search around the internet-o-web where lots of people seem to describe something very similar, and most of them recommend applying Position:relative to the parent of the float. This didn’t work for me.

A bit more playing with my setup revealed that applying Position:relative to the list item (the parent’s, parent’s, parent) fixed the problem. One to file away for the future!

Here it is where it’s supposed to be.

For a while now I’ve been working on a simple way for people to record their working hours and create timesheets automatically, and now it’s finally ready for release.

Timebot is an automated system that checks to see if someone is onsite by looking for their mobile phone or bluetooth enabled device. Timebot is easy and quick to configure, and saves a users time out to Google Calendar for easy management and sharing.

Take a look now – any feedback is greatly appreciated.

UPDATE: I’ve made a couple of changes to the script to make it easier to use and there’s now a demo available.

A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.

I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.

A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.

So my final stop was to combine the two. I also incorporated any fixes I saw in the comments section of jQuery for Designers.

You can download the script here.

Or see a demo here.

The image file I use for the tooltips can be downloaded here, and is free for anyone to use.

Just recently I had to style an asp datagrid that another developer had created. Now almost all of our default styles for this site use simple image buttons for actions but the datagrid automatically pumps out the Edit, Cancel, and Delete buttons as plain text. Unfortunately Microsoft have given very little control to designers/developers over what is pumped out onto the page, so it’s pretty much a link, or an input button as standard.

I had a brief look for a way around this and found lots of people with similar problems but no perfect way round this problem.

The simplest way I found around the problem is to put an image tag into the text attribute. E.g.:

Read more…

Just recently I needed a page peel script for a client. A look around the ‘net lead me to a script that seemed to do everything I needed it to, but it used the document.write method which I’m not a big fan of, and it all seemed a bit inefficient.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

<script src="/pathtojquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/pathtopeel/peel.js" type="text/javascript"></script>

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.

Okay, I’ll be honest I’m a bit of a magpie when it comes to web development, and in particular css frameworks. One week I’ll be telling everyone that’ll listen (which isn’t many people) about how great YUI is, and the next week I’ll be waxing lyrical about the excellent Blueprint framework.

So with that little disclaimer out of the way, here’s my take on the rather excellent YAML CSS framework, and my first foray into using it to layout a site.

First things first; YAML seems to be very well thought out. It claims to be cross browser compliant in almost every browser that’s still in use by more than one man and his dog, and it fixes most of the major problems web developers run into with the older browsers.

Unlike YUI and some of the other Frameworks you’ll need to download the css files etc. and host them yourself. These can all be downloaded from here.

YAML lets you get off to a flying start without any real work creating css reset files etc. After slicing and dicing a design I’ve been working on for a week I managed to get a site up and running cross-browser on the first attempt. This seems to happen very rarely for me. I’ll admit there were a few tweaks here and there to make it perfect, but overall it just worked.

It’s got a few default styles that are well thought out and I’m already finding myself duplicating them in other projects I work on that don’t use YAML. I’ll cover details of some of these styles and a bit more on how to use the framework in later posts.

Today I ran into a strange bug that saw me and another developer pulling our hair out, and reverting back to older and older code trying to work out when we introduced the bug.

The problem is this: we have a drag and drop desktop page that does an ajax call when a module is moved (it’s based on Jquery and Ajaxpro). It all worked fine a few days ago, and it worked fine on our test server that runs IIS, but in the local development environment (Visual Studio 2008 using its local web server) it runs really slow in Firefox3. Other browsers seem fine – we tested with Chrome, and IE7 with no problems.

After I managed to narrow down that the problem doesn’t occur once we publish the current code to an IIS box I started to do a little Google fu…

The problem was actually simple -  It looks like this is a problem with Firefox’s IPv6 setting. To fix it type About:config into the address bar in Firefox, Agree to the warning message, and then navigate to the net.dns.DisableIPv6 setting. Double click this setting to set it to true, and close the tab. That’s it! The problem should now be fixed.

Credit where credit is due – I found the fix here through my Google fu.

It seems that there’s two main reasons why people still need good ol’ IE6 running even though they’ve gone all new fangled and got Vista installed:

1. Some old Intranet programs just refuse to work with ie7 or Firefox. Some don’t even try and fail as soon as they see the browser isn’t ie6, others try and fail miserably because of code targeting ie6 specifically.
2. You’re a developer, and as a large number of your users still use IE6 (mainly because of the reason above) you need to test that your website or application works for them.

The good news is that Microsoft is well aware of the need for Vista users to be able to use IE6, and they’ve made some tools available to the publci for free. all it’ll cost you is a bit of time…

Read more…

We all know the problem: You need to set a minimum height on an object but IE6 ignores it and ruins your layout. Well worry no more, there is a simple fix:

selector {
min-height:500px;
height:auto !important;
height:500px;
}

This takes advantage of two IE6 bugs:

1. IE6 ignores the !important and sets the height using the last line.
2. IE6 treats height like it should treat min-height and lets child objects cause the parent to expand.

I found this helpful solution here.

Created a site design but keep getting white space showing below your loving crafted footer? Me too, a bit of research later and I’ve found a fix that works well, integrates with the yui framework, and seems to work well cross-browser.

The basic principle is pretty simple.

• Make the body 100% tall no matter what.
• Give it a negative bottom margin the size of your footer.
• Move you footer up into the space left by the bottom margin

There’s a few other steps to make it work cross-browser (ie6+) but that’s basically it.

I found the solution here.