Firefox and its Blurry edges.
August 25, 2009
Further to my last post, I have done some digging and come up with an interesting post over at the Stack Overflow forums It’s interesting that there they’ve highlighted the problems that I’ve uncovered in that both Google Chrome and Firefox 3.* share this border rendering problem. The difference is that the post is concerned with the rendering problems of images and I’m having my problems with CSS borders. They must surely be related in someway?
The image below shows the problem a little better than my previous post I think.
You can clearly see the blurring in firefox.
It’s an odd problem, and one which I suppose doesn’t rear it’s head very often. In fact once I’ve converted these list items into links, it won’t be a problem for me either, because the border-top will be placed on the link and not the list item – thus solving the problem. But curious never the less.
Related posts: The curious case of ‘bleeding’ CSS borders
The curious case of ‘bleeding’ CSS borders
August 24, 2009
I’ve been happily creating a simple navigation system using Safari as my reference web browser. For this navigation, I’m using the CSS border property to add a border to the top and right of the navigational label. All seemed well until I checked my handy work in Firefox 3.5, where I noticed a border-bleed. You can see what I mean by this in the illustrations below.
Safari 4.0
FireFox 3.5
This phenomenon is also evident on the Windows version of FF3.5.
IE8, Camino (effectively FF2) and Opera all display the borders ‘correctly’ like Safari 4.0.
This is an irritation for me, and with Firefox fast becoming the second most widely used web browser, I hope it doesn’t begin to suffer from the same idiosyncrasies as the dreaded IE6! Of course, it might be that FF3.5 is the only browser that’s displaying the borders accurately – but somehow I doubt it. Further research is needed…
Update:
After a little more experimentation, it appears that this phenomenon isn’t quite unique to Firefox 3.*. Using good old browsershots.org I tested my CSS is a huge variety of web browsers, including Konquerer and Seamonkey on Linux, Safari, Chrome, Opera, and Firefox on all platforms. Firefox 2.0 renders the border edges seamlessly, but in all FF browsers from FireFox 3.0 to Firefox 3.5.1 the bleed is evident. The only other browser to exhibit this bleed is Google Chrome – which is odd considering that it’s a Webkit browser akin to Safari.
In a further experiment, I tried re-ordering the border properties in the CSS file (placing the border-right rule after the border-top and vice-versa’), in case it was a curious cascade problem, but that made no difference. Next I used CSS’s specificity feature to leave no doubt as to how I wanted what to render. But still no change. Finally I removed the relative positioning I was using when I first noticed this problem… but that had no effect either (besides moving its position of course) and the bleed remained.
This effect may not be a bug at all, but merely a curiosity and is somewhat idiosyncratic of those two browsers. It’s certainly annoying, I know that!
Related posts: Firefox and its Blurry edges.
Twitter down again!
August 20, 2009
Oopsie! Twitter goes down.
17:06 on Thursday the 20th of August Twitter goes EEEEK! They are coming under such attack lately. Curiously, I had shortly been on facebook posting a message when I was warned about a bad-connection or something. I doubt the two are related, but they might be. They were last time.
Although free, it doesn’t stop Twitter from having a moral obligation (if not a legal one) to keep this monster of a social networking service that they’ve created. They’ve created a need for this service so have a kind of duty to ensure that it keeps going and is accessible in some form. In fairness to Twitter though, these latest outages aren’t network or system related. They’re down to malicious hackers seeking to disrupt the system. What is worrying perhaps, is how successful these hackers have been of late – and how frequently they have had success.
Mac OSX 10.5.8 and a broken Apache Web Server.
August 6, 2009
I finally got the OS X 10.5.8 update to stick today at the second attempt. All seemed fine and dare I say it, even ‘zippier’ than 10.5.7. I was happy… that is, until I went to look at a website I’d been working on on my local web server. The Update had broken apache and Safari was complaining that it couldn’t connect to the server – even though I knew full well that the server was on. After much of the usual fruitless web searching (google ain’t what it used to be. Is the web getting too big?) I found the answer in this post of almost exactly one year ago – on the MacRumours forums: http://forums.macrumors.com/archive/index.php/t-549904.html It would seem that has been a reasonably common problem, but I am happy to have found this solution and am now sharing it with you lucky people.
In my case, the problem was that Apache was trying to write to an error log file in /private/var/log/apache2/ – but this directory didn’t exist (You can find this out via the console.app that ships with OS X). This is a similar problem to the one experienced by some users who upgraded from Tiger to Leopard. Well, what do you do if something doesn’t exist? Create it! Typing in terminal sudo mkdir /private/var/log/apache2/ will create this directory and *voila!* problem solved! A fully working apache web server again and you can now shelve those thoughts of ‘Time Machine Restore’ for the next system update.
Making the tweetie bookmark more useful.
August 3, 2009
Tweetie is a twitter client for Mac. One of the little treats that tweetie comes with, is an interactive bookmarklet that, when clicked, opens up a tweeite ‘new tweet’ window populated with the URL of the webpage you’re viewing and ready to be sent to your twitter timeline. This is a handy little service but not that useful as it is.
Edit the Tweetie bookmarklet
By editing this tweetie bookmarklet, you can add some much needed functionality. In Safari, right-click the tweetie bookmark and choose “Edit Address”. This will open up Safari’s bookmark editor and you’ll see the bookmark’s ‘url as: javascript:window.location='tweetie:'+window.location By adding a few extra words we can make this bookmark work for us.
I decided that I wanted send these posts automatically to another twitter user. These @mentions can be useful as a filter. I will use this second twitter account to view my bookmarks more easily, and given that this user will be private with 0 followers, only I will see this timeline. javascript:window.location='tweetie:'+'@andamp%20'+window.location
To add further functionality, hashtags may be used to filter these bookmarks. I tend to bookmark shopping sites, apple sites, technology, art. I can thereforre create a number of tweetie bookmarklets that will allow me to quickly post relevant tweets. Amending the javascript with a hashtag: javascript:window.location='tweetie:'+'@andamp%20#shop%20'+window.location
Adding a folder of tweetie links makes for a nicely accessible quick-link.
Now I have my own online bookmarking and bookmark retrieval system using twitter. I plan to play around with this methodology a bit more – perhaps refining it and employing twitter APIs etc.
Shubox Web design is environmentally aware and takes every step to ensure a greener work practice. Low energy computers, paperless invoicing and considerable use of public transport ensures that Shubox is less of a burden on our beloved Bradford and West Yorkshire environment.