Dynamic Drive, anyone?
I haven’t looked at Dynamic Drive in ages. It was the only tutorial place I used back in the day, though, and I thought it was kick awesome. It’s not the prettiest site ever, and it might be a little out of date, but it came in handy today.
During my internship work this week, I needed to change a line of links to a line of tabs. I already had the Javascript that made the links work, toggling div appearances on and off, so all I really needed was the CSS. I fooled around with the <ul> and <li> styles for a while, and had it working pretty well in Internet Explorer and FireFox, but fell into problems when I wanted to add a border along the bottom of the tabs, more like a separator. You know, like the top of a file folder.
I was searching online, and all I found was complicated code, and Javascript that I didn’t need. I finally found this snippet on Dynamic Drive’s CSS Library, and it helped a lot to make it happen. It might be old, there might be easier ways to do it, but this helped.
I switched from styling the <li>s, to doing most of the styling on the anchors <a>. That, and displaying the <li>s inline, is how they were able to add the border along the bottom of the <ul>.
Just a side note, I’m sure there’s some way to do this – but I tried to add a width to each of the elements (ie. 9em) so that they would be the same width, but it created a weird space between the bottom of the <ul> and the tab in IE. When I finally took it off, everything was fine and beautiful. I’m sure there’s a name for that issue 
I think the “active” tab is positioned over the bottom of the <ul> which is how you don’t see the bottom border of the <ul> there. The position: relative; top: 1px; moves it down a pixel and covers up the bottom border of the <ul>. Then the padding-top: 4px; adds an extra pixel of padding to the top (the inherited padding is 3px) to make it the same height as the other tabs. Neat!
Here’s the CSS I ended up with, if you’re interested. It’s messy.
ul.viewchoices {margin-left: 0; padding: 3px 0; border: 1px solid #333333; border-width: 0 0 1px 0;
list-style-type: none;}
ul.viewchoices li {display: inline; margin: 0;}
ul.viewchoices li a {border: 1px solid #999999; border-width: 1px 1px 0 1px; padding: 3px 7px;
margin-right: 3px;
background-color: #EEEEEE; font-weight: normal; color: #999999;}
ul.viewchoices li a:hover {color: #666666; background-color: #DDDDDD;}
ul.viewchoices li a:visited {color: #999999;}
ul.viewchoices li.tab_active a {border: 1px solid #333333; border-width: 1px 1px 0 1px;
position: relative; top: 1px; padding-top: 4px; background-color: #FFFFFF; font-weight: bold;
color: #333333;}
ul.viewchoices li.tab_active a:visited {color: #333333;}
ul.viewchoices li.tab_active a:hover {background-color: #FFFFFF;}
Anyway, good job, faithful Dynamic Drive! You had just what I was looking for, plus nothing extra!
