Checking through the Media Surgery site itself has proved interesting.

The site was developed on a Windows Vista machine checked in all major browsers and both main operating systems – Windows and Mac OSX 10.6. The browser bugs were sorted and the whole check list of things before going live was addressed.

Firefox recently has updated to version 3.6, so all sites were checked again on the main browsers and everything once again seemed OK.

However, checking on Firefox 3.6 on Mac and not PC there was a clear discrepancy. The Flash file at the top ( Windfarm) seemed to be a single 1 pixel out. After trying to debug and trying numerous different positioning methods, it turned out to be a FireFox bug. The incredibly strange thing about this bug is that its only seen in different widths. So you can manually resize the browser and it can then appear or disappear depending on width. Very, very strange and can certainly be described as “buggy”

Go ahead and try giving the element

#my-element-id { overflow: auto; }

Which is reported to solve it in some instances. It didn’t work in my testing however.

The only way this can be fixed is if Mozilla sort this properly is if they do it themselves.

What to do?

Please post in the comments below and also go to the Mozilla Firefox bug page and leave a comment. This will make them aware of the problem. The more noise people make about it, the more emphasis will be on them to take action, which will reportedly, be addressed in version 3.6.1.

I first learned of Jeremy Keith after being recommended his great first book back in 2005, which seems like last year, wow! how time flies by. Since then i have been a few of his live talks and read many of his blog posts and articles. Working for Clear Left ( lovely site) in Brighton he is is a front end developer who specialises in accessibility. Today i spent hour plus listening to a fantastic podcast and resource by WebAxe in which he was interviewed.

A few quotes and what i took away from the interview:

We dont mention accessibility with clients

Some may initially wonder about this but he is simply stating that it should be a given with any website. He explained it very well by comparing it to

The plumber asking if its ok to use that specific wrench on your sink when called out to repair a pipe.

Also some clients may not have heard about web accessibility and they should be trusting you to do a competent job while doing the right thing for their audience.

HTML5 is very backward compatible and with HTML4 it validates fine.

There are some tags that have been deprecated in HTML4 but in a practical way most modernly built XHTML1 or HTML4 with will pass the w3c test. There are also some new tags in HTML5 that can used such as the new input types.

Using a javascript library is something i do myself and it saves reinventing the wheel

After initially being a little hesitant using a library due their first load ( file size), we have been using Jquery for over 2 years and love it! Its great to hear someone so experienced as Jeremy using a library and now validating our choice for Jquery when we evaluated the different options such as Django, Prototype and Moo Tools.

I think of web accessibility of not destroying accessibility rather than creating it.

This is in referral to properly structured and semantic HTML being accessible, while Javascript can break that accessibility if not properly used and planned.

It was an hour very well spent and he was as informative as ever. I highly recommend you hear him talk in person if you get the chance. In the meantime listen to the Webaxe episode 75 podcast in which he is interviewed.

Iv come across this problem a few times now and this should be of help to a few people.

When placing an absolute div within a relative positioned div, in IE6 and IE7 that div disappeared. The content within the div and the div just would not show. An immediate response would be to think of the stack and z-Index but after a few tests it wasnt that.

The Fix: Simply surround the absolute div with another empty div.

Did it work? Another similar problem? Leave a comment.

After finding the Coda Bubble article i was keen to implement it on my site. Its a really cool effect that can add a lot to the web page with limited room to add in all the desired content. Its also a really attractive bit of candy that gives that little extra wow factor.

There are a few problems to the solution however:

• The main being it doesnt work in any version of IE ( See image below )
• Its riddled with inline tables and the code is a mess
• Any text within the pop gets anti aliased by IE making it ugly

I thought that it would be a shame to waste the original authors time and my own after taking a few hours to get it working. Is there a solution to get round these three problems?

Yes there certainly is: Very simple just use a gif image with transparency. View the demo.

While this solution isnt ideal* it works in all browsers, and the code is so much cleaner. To make the method accessible either add an “alt” or “longdesc” tag with a description of what’s in your pop up box.

*You are of course limited to colours with gif images but in most cases its generally text thats going to go in the pop up box anyway.

Did it work for you? Leave a comment…

A quick post today with 3 bugs and the solutions iv found to fix them.

1.) I wanted to get rid of the border on the input fields within a form. You would naturally try input: border:none; However and strangely that didnt work.

The Fix:
input: border-width:0;

2.) IE7 and below were showing the scrollbar within a textarea even with the textarea having a absolute height

The Fix:
overflow:auto;

3.) The strangest one of the 3. I wanted to get rid of the default text in a submit button. ( There has to be text for accessibility). I tried text-indent:-9999px which worked perfectly in Safari and Firefox.

The Fix:
text-indent:-9999px; color: transparent; text-transform: capitalize;

I hope that helps anyone coming across any of these bugs in Internet Explorer. Did it work? Leave a comment.

After updating to Wordress 2.7.1, on one of our sites i couldnt seem to log in. The page seemed to refresh and not do anything. Here are three things to try to solve the problem.

1. Clear your cookies
2. Clear your cache
3. Rename the plugin directory ( /wp-content/plugins) to something different

Hopefully that will help a few people out. Did it work? Leave a comment!

Google’s email service also known as gmail has now been down for over an hour. Its 11:49 UK time here. Here is a quick review of whats good and bad about it.

Good:

• Can run multiple pop3 and imap accounts through it, all located in the one single interface
• Search facility is fantastic, find anything in seconds
• iPhone access- works a treat on the iPhone
• Speed – its usually lightening quick to load and read
• Web space – it now has 12GB of space – iv only used 12% of that with many large files
• Its a free service
• Even the ads can be useful, iv seen me finding some great sites and articles from the ad links

Bad

• There really is only one bad thing i can say about and thats the downtime im suffering from right now. Iv used gmail for over 2 years and apart from the occasional “service is down” message its worked a treat.
• Ill add the ads in here as well as for the good. They do take up a little bit of screen space but its a minor bad point.

12:13p: You can get your gmails through your mobile such as iPhone. It seems only the web interface is down for now.

What do you love about gmail? Is it worth it even with todays downtime?

Here we are in the year 2008 and some design agencies seemingly don’t know the answer to the question!

http://shouldiusetablesforlayout.com/

Benefits of CSS::

• Faster loading pages
• Easier to update the whole site
• Accessible – making the site available to all
• Content picked up easier by search engines
• The list could go on…

Cowboy builders use tables for building websites.

Quick post today but may help save someone a bit of time debugging and back tracking with code.

When using a combination of Sifr ( replacing fonts with a Flash and Javascript combination ) and jQuery ( Javascript codebase which can be built upon for numerous web coding uses ) there was a problem. The code animations and display worked fine but Internet Explorer was throwing up an error. Firefox and other browser were fine. All very easily sorted by simply linking to the Sifr code, after linking to the jQuery code.

The best web browser in the world is about to get even better. Help Mozilla break the record

Download FireFox 3 on the 17th June 2008