CSS_Yeti

Using 'overflow: hidden' instead of 'outline: none' will shrink the dotted line to the correct size. James

Just have a new background image for the hover state: a:hover { background: url (path/to/your/image); } You can also have both the 'on' and 'off' states in the same image file and use CSS to reference the appropriate part for each state using the 'background-position:' property (the so-called 'CSS Sprites' technique). James

Sounds like the dimensions in the html or css may not match the actual dimensions of the image. James

Instead of this: #menu3 ul li { display:inline; } Try this: #menu3 ul li { float:left; margin-right:10px; } Adjust the margin to your requirements. James

I think the reason I didn't use Aptana was that I found it was rubbish at searching and replacing in multiple files. If they fix or have fixed this then I may give it another go. After many installs, uninstalls and reinstalls of various prog trials, I too believe Webuilder to be the best. I used to use Dreamweaver but no more. The new version of HTML Kit looks very good, but pretty hardcore (and the css support doesn't appear to be as good as Webuilder - though future plugins may make it so). James

Just thinking.... the example I gave was only -1000px. In these days of big widescreens, you'd better make it more like -5000px or 5000em or something! Incidentally, if you apply this technique to links you can get a (sort of) bug in Firefox; you'll see a very long focus box when you click a link. To get rid of this, just apply 'overflow: hidden' to the anchors in the css. When you want to change a link list to a horizontal list, the major css things to do are: 1. get rid of the browser default paddings and margins on the 'ul' ul { margin: 0; padding: 0; } 2. get rid of the padding, margins, and bullet on the 'li's. Also float them so they go horizontal. li { margin: 0; padding: 0; list-style: none; float: left; } Make the anchors as 'display: block' as before. Obviously, you may want to set the margins and padding to your own spec. It's usually best to add padding to the anchors rather than the 'li's if you need to... er... pad things out. (for this sort of horizontal list). James

The most common way to hide text in such instances is to add a rule 'text-indent: -1000px;' (or similar, just need a big distance!) to the element that contains the text (the anchors in this instance). You'll also need to make your anchors 'display: block' so you can then give them a width and height. The best way to do navs are using a list of links BTW, e.g. <ul> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> <li><a href="#">test</a></li> </ul> But that's another issue! James

I'm a freelance developer specialising in Accessible, Standards-Based Frontend CSS/XHTML coding. Will there ever be a snappier way to describe what I do..?