CSS Tabs, BrowserCam, and Temporary Email Addresses
After spending time today with frustrating IE6 CSS issues with borders on ul and li tags, I finished my CSS navigation tabs. The CSS is based on the XHTML produced by the WordPress K2 theme, but can be easily matched for any site.
Here is the CSS:
ul.menu {
margin: 9px 9px 0 9px;
padding: 5px 0px 6px 10px;
border-bottom: 1px solid #afafaf;
}
ul.menu li {
margin: 0px;
list-style: none;
display: inline;
}
ul.menu li a {
margin: 0;
padding: 5px 12px 6px 12px;
border: 1px solid #afafaf;
background: #DDE;
font: normal 12pt Georgia, 'Times New Roman';
color: black;
text-decoration: none;
}
ul.menu li a:hover {
background: #333;
color: #eee;
text-decoration: none;
}
ul.menu li.current_page_item a,
ul.menu li.current_page_item a:hover {
border-top: 1px solid #afafaf;
border-bottom: 1px solid white;
background: white;
color: #333;
text-decoration: none;
}
BrowserCam is an extremely useful (and quick) tool to easily see a screenshot of your websites in over 30 different OS/browser/version combinations. It's incredibly handy instead of guessing whether it work in other browsers, or trying to install multiple versions of each browser. It's free for 1 day for every email address you have...
On an unrelated note, 10 Minute Mail, 2 Prong, and Mailinator allow you to have an instant free temporary email address for those sites that require you confirm an email address but you know you don't need your real address. Leave your browser window open until you get that "confirmation" email and then forget about it.
PS - If anyone has any advice as to how to easily paste CSS or other code and have WordPress preserve it's formatting (line breaks and spaces), let me know.
Richard Crowley said,
December 17, 2006 @ 7:46 pm
Just put your test
in a
<pre> tag.
Richard Crowley said,
December 17, 2006 @ 7:49 pm
Damn. Your website stripped the <pre> tag from my comment. I did a test, though, and just a plain pre tag preserves multiple spaces and tabs. You could alternatively edit the WordPress source to replace multiple spaces and tabs with a lot of non-breaking spaces.
Phil Freo said,
December 17, 2006 @ 10:20 pm
I definitely tried several combinations of pre and code tags and each time could not get it to work. I was hoping to not have to make any modifications to WordPress.