Archive

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,

First Considerations

Over the next few months I’ll be working on a project that involves coding the frontend of a website. The first thing I consider is what level of accessibility is the site going to follow and at what cost. I always write a site to adhere to a strict xhtml standard: [sourcecode language='html'][/sourcecode] Why? If I don’t follow a standard then what am I actually following. There isn’t any extra effort in doing things by the book so why avoid