Alex Little

Mozilla Labs have just launched the Ubiquity plugin for Firefox and to me it looks fantastic. The plugin makes it really easy to embed a map say into an email – without all the faffing around of cutting and pasting URLs from Google Maps into emails etc – it also does much more than this – but I’ve only just started to play!

Even though I’m not generally one for command-line type interfaces, this one works for me. Will be interesting to see how many developers jump on this to create new commands. I can see how you might want to add an IM command (for MSG of course) or one for Cohere. Also, how will this affect some other Firefox plugins, for example if Delicious wrote a set of commands for this (maybe they already have?) then would you really need the Delicious Firefox plugin?

When you’re trying to use XUL. I’ve just been working on enhancing the Cohere Firefox plugin/extension/add-on so that you can optionally show a toolbar, this toolbar will also show the ideas from Cohere which are linked to the webpage you’re currently looking at (quick screengrab below):

Anyway, getting back to my original point, I needed to be able to dynamically change this drop down list whenever you browse to another page, or select another tab. Getting my plugin to go off and query the Cohere webservice to find the relevant ideas all worked fine, the problem I had was being able to remove the current items from this drop down list.

The documentation seemed to show that I can use ‘removeelement’ to remove the element from the list by setting the removeelement attribute to true (though does seem to be bit of an odd way to do things – setting an attribute to remove an element), but it didn’t work and I spent a little while figuring out why .

In the end it turned out that setting the removeelement attribute to true only means that the element is removable, so you can create the following:

<menulist id="menulist">
    <menupopup id="menupopup">
        <menuitem label="my label" value="a value" removeelement="true"/>
    </menupopup>
</menulist>

but the item “my label” will appear in the drop down list, to actually remove the item you need to do something like this in your javascript:

var ilist = document.getElementById('menupopup');
for (var i=0; i<ilist.childNodes.length;i++ ){
    ilist.removeChild(ilist.childNodes[i]);
}

Thought I’d post it up here as it confused me and might save others struggling to figure out what’s going on

Not being a designer spending all my time getting to know the ins and outs of how floating divs work, it tends to take me a little while to get my head around how to lay out pages using pure CSS. I thought I’d pretty much got how to do 2 and 3 column layouts with CSS and divs, but today I found a new problem which really had me stumped for a while.

Essentially I wanted an ordered list, then within each <li> element a couple of <div>s which I could float to layout how I wanted. Everything was working fine in Firefox, but not in IE(6), the images below show the output given in Firefox and IE:

IE (6):

Firefox:

HTML code which generated the above images.

The items numbered 1-3 show how I want the output to appear, but my first stab at the code resulted in items numbered 4-6. As you can see, in Firefox it appears fine, but in IE the ‘float:left’ is being ignored, making the div containing the text appear below the checkbox. [Aside: you might ask why I'm using divs and floats for something as simple as just some text next to a checkbox, well, this is just my starting point, my final page will be more complicated than this example!]

The only difference between the working and non-working examples is that the div containing text has width property defined (set to 100%) in the working version. I’m not sure why this should be necessary – my example shows that it’s not needed if the wrapper div isn’t part of an ordered list.

My only explanation is that this is another (frustrating) little IE CSS bug – unless anyone can give me another explanation? Alternatively if there are better ways to do what I’m trying to achieve?

I’ve updated my Asus Eee from Ubuntu 7.10 to the latest release (8.04), though I didn’t strictly speaking upgrade, it was more of a reinstall. I’d intended to upgrade using Ubuntu’s update manager, but when I tried this I got a message to say that I didn’t have enough disk space, needed 1.3Gb, but I’d only got about 1Gb free. In the process of freeing up some space by removing packages, I think I removed too much, as I couldn’t even get the login screen to appear. So anyway, I ended up just doing a reinstall. All went fine, though I needed to look up a couple of bits to get the wireless working.

My only little niggle with Ubuntu 8.04 is that it’s got Firefox 3 Beta 5, rather than the current stable version of Firefox, this causes a bit of an issue for me because it means I can’t install Google Gears or the del.icio.us plugin, neither of which work with Firefox 3 yet – I assume they’ll soon get them working when v3 is fully released (don’t know when this is due – maybe summer, but hopefully soon). Having been playing with Firefox addons the other day, I think I may be able to hack the del.icio.us plugin to make it work, but don’t think I’ll be able to do the same for Google Gears.

Another unresolved issue I have is that I can’t seem to view any BBC iPlayer programmes. Flash appears to be installed fine and works for other sites, but when I try to play any programmes I just get the message “Something went wrong. There seems to be a problem playing this video. Please try again. undefined” But I haven’t yet figured out where this problem is. [Update, I now have this resolved]

Spent a little while this morning trying to fix a little inconsistency between IE (v6) and Firefox in how the border settings for ul and li elements worked. Here are a couple of screenshots to demonstrate the problem:

IE:

Firefox:

And here’s a snippet of the CSS I was using:

ul.menu {
margin: 0;
padding: 0;
left: 20px;
width: 90%;
border-bottom: solid 1px #d09800;
}

ul.menu li {
display: inline;
margin: 0;
}

ul.menu,
ul.menu li a {
padding: 5px 15px 6px;
}

ul.menu li a {
font-size: 1em;
color: #d09800;
margin: 0;
border: solid 1px ;

}

ul.menu li a:hover {
background: #fdfaf3;
color: black !important;
text-decoration: none;
border: solid 1px #d09800;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
color: #333 !important;
background: white;
text-decoration: none;
broder: 1px;
border-top: solid 1px #d09800;
border-left: solid 1px #d09800;
border-right: solid 1px #d09800;
border-bottom: solid 1px white;
}

When I changed this snippet to be:

ul.menu {
margin: 9px;
padding-left: 10px;
border-bottom: 1px solid #d09800;
padding-bottom: 6px;
padding-top: 5px;
}

ul.menu li {
display: inline;
margin: 0px;
}

ul.menu li a {
padding: 5px 15px 6px;
border: 1px solid #d09800;
text-decoration: none;
font-size: 1em;
color: #d09800;
margin: 0;
}

ul.menu li a:hover {
background: #fdfaf3;
color: black;
text-decoration: none;
}

ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #d09800;
border-bottom: 1px solid #fff;
list-style: none;
display: inline;
color: #333;
background: white;
text-decoration: none;
}

Everything worked as I wanted it to! For info the original CSS was taken from the K2 WordPress template which I adapted for the tabbed menu that we wanted for the MSG site.

Found that we had a bug where the presences weren’t being updated in IE but they were in Firefox (which I usually use) – tracked the problem down to the differences in how these browsers deal with the document.getElementsByName – I was using the name element on a span tag which Firefox ‘recognises’ but IE doesn’t, for more info on this: http://jszen.blogspot.com/2004/07/whats-in-name.html.

Anyway, turned out to be easy enough to fix by just putting the name on the img tag rather than span.