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.

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.

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

<asp:EditCommandColumn HeaderText=”Actions” ButtonType=”LinkButton” UpdateText=”<img src=’../images/buttons/small/updatesmall.png’ alt=’Update’ />” CancelText=”<img src=’../images/buttons/small/cancelsmall.png’ alt=’Cancel’ />” EditText=”<img src=’../images/buttons/small/editsmall.png’ alt=’Edit’ />“></asp:EditCommandColumn>

This does work but it doesn’t have any hover effects on mouse over,  nor does it allow you to use css sprites to keep load times down. In this case it also meant that I’d have to create seperate images for every action.

So what I did instead was the following; I added an itemStyleCssClass attribute to the EditCommandColumn with my button style on it, then I put span’s into the text for Edit, Cancel, and Update that have a specific class for each button type:

<asp:EditCommandColumn HeaderText=”Actions” ItemStyle-CssClass=”grey_small_circle” ButtonType=”LinkButton” UpdateText=”<span class=’tick’>Update</span>” CancelText=”<span class=’cancel’>Cancel</span>” EditText=”<span class=’edit’>Edit</span>“></asp:EditCommandColumn>

Then I added the following CSS:

/*Create buttons and add hover effect */

.grey_small_circle a{background:url(/admin/images/buttons/medium/grey_small_circle.png) no-repeat 0 0;display:block;line-height:30px;margin-top:1px;outline:none;width:31px}
.grey_small_circle a:hover,a:hover.grey_small_circle{background-position:0 -30px;color:#00affc;text-decoration:none}

/* Add the image inside */

.grey_small_circle span{background:transparent url(/images/icons/medium/all.png) no-repeat -288px -252px;display:block;height:30px;text-indent:-9000px;width:32px}

.grey_small_circle span.edit{background-position:-242px -201px}
.grey_small_circle span.redcross{background-position:-13px -252px}
.grey_small_circle span.remove{background-position:-427px -357px}

This css adds the grey circle in the background of the buttons (see the screenshot) and makes the hover work using the sliding doors technique.

I then use css sprites for putting an action image onto each button (using the class we assigned to the span), this technique speeds up load times and stops the unstyled pauses when a user hovers over a button. The last lines of the css attach a sheet of sprites  (in this case the excellent PI Diagona icons from pinvoke) and moves them depending on which button needs to be displayed.

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.