- The “Blog” of “Unnecessary” Quotation Marks – “Great” stuff.
- Nifty Corners Cube – freedom to round – Javascript library for adding rounded corners to elements on a page. Some very Nifty examples.
- BBC – Radio Labs – Now Playing in the Cloud – Using XMPP to be notified of what is being played on BBC radio stations. It will be interesting to see what else is done with this. XMPP is being used to glue more and more parts of the internet together these days.
- FreakAngels – “FREAKANGELS is a free, weekly, ongoing comic written by Warren Ellis and illustrated by Paul Duffield.”
- Five Chinese Crackers: Misquoting the Archbishop – 5CC does a great job of pointing out the flagrant misreporting in the tabloid press. The incorrect reporting of the Archbishop of Canterbury’s speech from last week is a great example. For all those calling for him to resign, I wonder how many have actual
Much has been written about the inconsistencies of CSS within the various browsers. A great resource for learning about them is the QuirksMode website. Despite having read a lot of that site, I spent far too much time today trying to debug one.
Its worth mentioning upfront that this is with Firefox 1.5.0.7 on my laptop. Since writing up this post, I have found that Firefox 1.0.x on my desktop does not behave as described here. I’m not sure which is infact ‘correct’.
For a website I’m developing in work, I have a drag-and-drop interface that allows the user to arrange objects represented as <div> elements onscreen. If the user cancels the drag, the <div> is animated returning to its original position. For reasons that are not important, the <div> can return to one of two containing <div> elements. This all works well, apart from the fact that for one of the containers, an object that is returning to it consistently ends up 1 pixel out of position.
I initially assumed this was to do with the Box model issues, but the css for the two containers have identical border declarations. A bit of further digging and I found the only difference was the overflow style – and funnily enough, thats exactly where the problem lies.
To demonstrate, below are two identical <div> elements that contain a child <div> which has position: relative and is offset by 5px on both top: and left:. The sole difference between them is the first has overflow: hidden, and the second overflow: visible. Each of the inner <div>s are armed with the following piece of javascript:
onclick="
var a=this.parentNode;
this.innerHTML = 'dx:'+(this.offsetLeft-a.offsetLeft)+
' dy:'+(this.offsetTop-a.offsetTop);
"
When you click on them, the offset between the child and its parent is shown. Remember that the css is identical for these examples in all but overflow.
click me
click me
As you can see, assuming you have clicked away and your are running the right level of the right browser, the offsets are different and its all thanks to the overflow. I have not fully investigated the various fixes for CSS issues such as Strict mode, but I was fortunately able to code a workaround using javascript that dynamically alters the overflow style depending on whether the user is dragging. I admit its not the cleanest solution.
The parent hosting site for knolleary is BlogsDollocks – a hosting service that I have a hand in.
Last night I spent some time reworking the BD homepage so that it includes a selection of blog entries from the hosted sites. This was easily achieved using the same mechanism as I used for the del.icio.us links in the sidebar.
One of the existing design features of the page that Kyb put together was the BD text at the top of the page. On my laptop, running Ubuntu Dapper with Firefox 1.5.0.5, it looks like this:
I was never quite sure about this overlapping design, but it wasn’t until this morning that I looked at the site with my desktop machine, running Debian with Firefox 1.0.4 that I saw it rendered like this:
This does lead me to wonder which is the correct rendering of the text.
The html for the logo is simply:
<div class="title"> <h1>Blogs Dollocks</h1> <h2>every blog has his day</h2> </div>
and the css is:
div.title {
font-size: 28pt;
width: 6em;
margin: auto;
}
h1 {
font-family: perpetua, serif;
font-weight: normal;
font-size: 28pt;
text-align: center;
line-height: 0px;
padding-top: 20px;
}
h2 {
font-style: italic;
font-weight: normal;
font-size: 7pt;
text-align: right;
line-height: 0px;
}
It seems that the width property of div.title is what is being handled differently. It all comes down to the magical em unit of measurement.
The differing versions of firefox is a complete red herring. The key is the different resolutions the two machines run at – the laptop at a lowly 1024×768 and the desktop at 1600×1200.
If I set the width to a more rigid value of 200px then the text is rendered more consistently between the two browsers – in this case with the words overlapping as 200px is not sufficient for the text to be layed out fully at its default font size. However this doesn’t work with zooming the page (Ctrl++/Ctrl+- on firefox).
Having conferred with Kyb, the desired rendering is the properly spaced out version. As such, I have changed to css to:
div.title {
font-size: 8em;
width: 3em;
margin-left: 200px;
}
This keeps the text looking sane at both resolutions, and gracefully handles enlarging the text.
Note I have also moved away from margin: auto so that the title stays in position as the screen size changes.
In the endless process of refining the aesthetics of the site, I would like to have the list items in the sidebar have their bullets on the right-hand side of the item text rather than the default left.
A quick google reveals the direction CSS property which almost does the necessary. Given a simple list like this:
<ul> <li>A</li> <li>B</li> <li>C</li> </ul>
- A
- B
- C
setting the direction property to rtl – ie right-to-left – generates this:
<ul style="direction:rtl;"> <li>A</li> <li>B</li> <li>C</li> </ul>
- A
- B
- C
On the face of it, this is ideal. But if you have a punctuation character in there, such as the post counts against the catergory links, you hit a problem:
<ul style="direction:rtl;"> <li>A(1)</li> <li>B+</li> <li>C?</li> </ul>
- A(1)
- B+
- C?
This is a direct result of how right-to-left text works in CSS. There are a couple of possible work-arounds:
- Set the
list-styletononeand set the background image of the element to include a bullet point on the right-hand side. - Apply
direction: rtl;to the<li>elements and have a<span>element with itsdirectionset toltrsurrounding the content in order to pull it back into place.
The first option feels dirty and I would rather not go near it.
The second option seems easier if it wasn’t for the way Wordpress generates the list of categories. The function call to wp_list_cats() doesn’t allow for custom HTML in the output, so it isn’t possible to add the <span> element. I could write my own version of the function that did what I wanted – but that seems overkill.
For now I will live with the left-hand bullets – any other suggestions for moving the bullet over are welcome.
