Using <base href/> with AnchorsA <base href="homepage-url"/> tag in the header of the pages in your site is enormously convient for building sites which can be moved from one domain or location to another. Unfortunately, there is one downside - it breaks anchor links. In this blog I explain the whole problem with the base tag and show you how you get around the problem with broken anchor links. The purpose of the <base/> tag is to specify the base location for resolving relative urls. It was only ever meant to be used for viewing a page where the document root is not available (for example, from an email) and should technically point to the actual document location, rather than the homepage. However, there are two significant advantages to the latter:
Any HTML purist and they'll tell you that using <base href="homepage-url"/> to artificially rewrite all your urls relative to your homepage or application context is abusing the intended use of the tag. Well, okay, so that's not what it was designed for, but I'm fairly certain HTML wasn't design to build applications like Google Maps either, but people did it anyway. |
Targeting IE Using CSS HacksWithout a doubt, one of the most difficult aspects of web design is achieving cross-browser consistency. The problems generally arise because of defects in the browsers' implementation of CSS, defects in their interpretation of the standards (think the box-model bug), or gaps in their coverage of the standards - some of which are gaping. The gaps aren't as troublesome as the defects though. Where there are defects, or disagreements in either the interpretation or implementation of CSS, you often need to apply different styles depending on which browser is being used. Here are some simple but handy CSS hacks that you can use to target styles to specific browsers. |
The Odd Pixel BugWhen writing up my last blog on CSS menus I took the opportunity to investigate one of those 1px inconsistencies in Microsoft Internet Explorer. It was particularly important because IE7 doesn't have the defect, while IE6 does, and my CSS hack was targeting both browsers. After some digging on the web, I finally found an accurate description of the problem [1]. The cause is so obscure that it surprised even me, and I'm fairly hardened to IE rendering defects. The problem is that when Microsoft Internet Explorer 6 calculates the bottom of an element which has an odd height (in pixels), it is short one pixel. Any absolutely positioned child element which positions itself relative to the bottom of the containing block (e.g. top: 100% or bottom: 0), will show a one pixel gap.
|
CSS MenusBuilding menus in HTML can dramatically improve the navigation and useability of your website. Getting it just right can be a very time consuming task though. There are a lot of javascript/dhtml implementations of menus out there but they almost all suffer from excessive bloat, inflexibility and complicated declarations to create the menu. This blog describes how you can turn any existing HTML unordered list into a dropdown menu that is easily customisable through CSS. No need to call any fancy, indecipherable javascript, hardcode colors or sizes or fiddle with 3rd party library code: just import a single stylesheet and you're done. We've set the following requirements for our menus:
|
Javascript Drag-and-Drop Ordered ListsYet another "couldn't already find this web thing on the Internet" discovery. Using a modified version of Youngpup's DOM-Drag, I created a list that you can reorder in the DOM by dragging and dropping elements around: drag and drop
The really nice thing about doing it in the DOM, rather than just moving the positions around, is that you can then create a form which encodes the new order, by inspecting the elements of the list at submit time. I'll be using this to provide an editable playlist for Songbee. The next step is, of course, to be able to drag new songs onto the playlist from a separate list of available songs. |
