A tutorial for producing these maps will be provided soon. With the help of InkScape and a spreadsheet, they are not quite as fiddly as you would expect. Each map consists of a single image, with all the roll-over images as a part of the main map image. It uses a ‘sprite’ technique to move the roll-over background images into position when the mouse hovers over the [square] regions. Why do it like this? Firstly there is no JavaScript involved. …
Archive
Accessible font sizes
A quick note to developers that are styling elements that use monospace fonts (pre, code, q, etc). Be aware that some browsers, like Safari and Chrome, have their own fixed-width font size preference, which by default is set to 13px. This upsets proceedings when you apply a proportional (% or em) font-size to the body. There are three solutions to counter this problem: Apply font-size to each element separately Remove monospace from the font stack and treat it as a …
Menu Challenges 2
IE6 is broken. [sourcecode language="css"] #menu ul.level2 li { display: block; } #menu ul.level2 li a { display: block; float: none; border: 1px solid transparent; /* Stops the box from jittering on hover */ margin: 0.25em 0px; padding: 0.3em 0.6em; background: transparent; color: #666666; font-weight: normal; } #menu ul.level2 li a:hover { background: #f36e45 url(../images/menu-level2-bg-hover.gif) left top repeat-x; color: #ffffff; border: 1px solid #f2683d; -webkit-border-radius: 3px; -moz-border-radius: 3px; } [/sourcecode] 2 major problems. There is a large margin on the …
Menu Challenges 1
Ok, so I’m getting into my site now. The wrapper is in place, and I’m moving on to the menu: As you can see, this isn’t your ordinary set of tabs and is causing a number of problems for browsers. Rounded Corners The problem with this menu is that it’s got a curved highlight hover. There are 4 different ways to curve boxes: 1. Nifty Corners: Uses JavaScript to insert <b> 1px in height and reducing in width. PROS: Scalable, …