Prev: cellpadding="0" cellspacing="0" in CSS
Next: wondering why this div is over to the right
From: williamc on 6 May 2010 10:53
I had an idea similar to the OP. I wanted to try to make a tab control
that was as minimal as possible. Since the page was just for personal
use, I decided to experiment rather than do some research and find a
battle-tested design (in fact I did already have a saved float-based
design from the Dan Cedarholm Bulletproof book).

So, I tried an in-line list with the CSS below, which did what I wanted
in FF and Safari but did not hide the bottom border in IE7 for the
selected tab. I'm on a different PC now, and notice that it does display
as desired in IE8.

To avoid the problem L. Eighner describes, I used no white space in the
html - the menu div, ul and lis are all on one line.

So, my issues with this design so far are understanding why it doesn't
work as expected in IE7 and its basic inflexibility if you want to make
the tabs taller. Would be interested in hearing about other issues,
other designs and general discussions on making tab controls.

* * *

CSS after removing irrelevant rules...


* {
margin:0;
padding:0;
}

....

#menu { /* this is a div that contains a ul */
background:#DFFF3A;
width:990px;
border-bottom:1px solid #044E00;
padding:12px 0 0 0;
}

#menu ul {
margin-left:20px;
}

#menu li {
list-style-type:none;
display:inline;
padding:5px 30px 0 30px; /* breaks, if bottom padding */
margin:0 3px;
}

#menu li.selected, #menu li.selected:hover {
background:white;
border:1px solid #044E00;
border-bottom:1px solid white; /* :( in IE7 */
}

#menu li:hover {
background:#CBEB26;
}

#menu a:hover {
text-decoration:none;
}


 | 
Pages: 1
Prev: cellpadding="0" cellspacing="0" in CSS
Next: wondering why this div is over to the right