PDA

Click to See Complete Forum and Search --> : Simple css tab looks perfect in IE but not in FF

parvez
10-31-2006, 07:39 PM
Hi

I have been trying to create this simple tab made by css, but it's just not working perfectly in FF. If you look at it in IE, you'll see the difference. In FF, it has a gap of 1px between the bottom border of the UL element and the LI element. If I change the bottom border's width of the active tab to 2px, then it looks fine but still I couldn't figure out what to do with the inactive tab since that leaves 1px gap. I have pasted the entire html code below. If you have a minute, please try the following html code and you'll be able to see the difference in FF and IE. I'm not sure why it's not working in FF. Not using anything special either. Just a plain simple css tab. Thanks in advance for your help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS TAB TEST</title>

<style type="text/css" media="screen" title="Default">
/*.groupTabContainer
{
padding: 0 0 0 5px ;
margin: 5px 0 0 0 ;
list-style-type: none ;
border-bottom: 1px solid #6699CC ;
}

.activeTab
{
border-bottom: 1px solid white !important ;
background: #fff ;
}

.inactiveTab
{
background: #def ;
}

.activeTab, .inactiveTab
{
display: inline ;
margin-left: 5px ;
padding: 3px 5px 2px 5px ;
border: 1px solid #6699CC ;
border-bottom: none ;

font-family: Arial, Helvetica, sans-serif ;
font-size: 9pt ;
font-weight: bold ;
color: #444 ;
cursor: pointer ;

}
*/


.groupTabContainer
{
margin: 10px 0 0 0 ;
padding: 0 0 0 5px ;
border-bottom: 1px solid blue ;
}

.activeTab, .inactiveTab
{
margin: 0 2px 0 2px ;
padding: 3px 3px 0 3px ;

list-style: none ;
display: inline ;

background: #def ;
border: 1px solid blue ;
border-bottom: 0 ;
}

.activeTab
{
background: #fff ;
border-bottom: 1px solid #fff ;
}

</style>

</head>

<body>

<ul id="campusBuildingGroup" class="groupTabContainer">
<li id="buildingClassroom" class="activeTab" onclick="displayTabContent(this)">Classroom</li>
<li id="buildingOthers" class="inactiveTab" onclick="displayTabContent(this)">Other</li>
</ul>


</body>
</html>
WebJoel
10-31-2006, 07:51 PM
just a quick looksee:
.activeTab
{
border-bottom: 1px solid white !important ;
background: #fff ;
}

.inactiveTab
{
background: #def ;
}

.activeTab, .inactiveTab
{
display: inline ;
margin-left: 5px ;
padding: 3px 5px 2px 5px ;
border: 1px solid #6699CC ;
border-bottom: none ;

-Why does the 'inactive tab' not have a defined border-bottom? I see that the next declaration (.activeTab, .inactiveTab {}) has border-bottom:none, -but try putting a 1px border-bottom on the RED part and see if this does anything. (Probably won't, -but maybe worth a try?)
_Aerospace_Eng_
10-31-2006, 08:37 PM
Try this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS TAB TEST</title>
<style type="text/css" media="screen" title="Default">
* {
margin:0;
padding:0;
border:0;
}
.groupTabContainer {
border-bottom:1px solid blue;
}
.groupTabContainer ul {
list-style:none;
}
.groupTabContainer li {
float:left;
margin-top:10px;
}
.activeTab a,.inactiveTab a {
margin:0 2px;
padding:3px 3px 0;
background:#def;
border:1px solid blue;
position:relative;
text-decoration:none;
border-bottom:0;
float:left;
display:inline;
}
.activeTab a {
background:#fff;
}
.clear {
clear:both;
line-height:0px;
font-size:0;
overflow:hidden;
}
</style>
</head>
<body>
<div id="nav" class="groupTabContainer">
<ul id="campusBuildingGroup">
<li id="buildingClassroom" class="activeTab"><a href="#" onclick="displayTabContent(this);return false">Classroom</a></li>
<li id="buildingOthers" class="inactiveTab"><a href="#" onclick="displayTabContent(this);return false">Other</a></li>
</ul>
<div class="clear">&nbsp;</div>
</div>
</body>
</html>
Jeff Mott
11-01-2006, 12:48 AM
Parvez, sometimes it's easier to start from scratch than it is to debug. So, in the interest of being lazy, here is an alternative to your style sheet. (Your original XHTML markup is assumed.)

<style type="text/css" media="screen">
/*<![CDATA[*/

UL.groupTabContainer { list-style-type: none; margin: 0; padding: 0;
border-bottom: 1px solid blue }
UL.groupTabContainer:after { content: "."; display: block; clear: both;
height: 0; visibility: hidden }
LI.activeTab, LI.inactiveTab { float: left; margin: 0 2px; padding: 3px;
border: 1px solid blue; position: relative; top: 1px }
LI.activeTab { border-bottom: 1px solid white; background-color: white }
LI.inactiveTab { background-color: #def }

/*]]>*/
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">
/*<![CDATA[*/
UL.groupTabContainer { height: 0 }
/*]]>*/
</style>
<![endif]-->
parvez
11-01-2006, 08:25 PM
Hey guys,

Thanks to all of you for your reply. Jeff, your solution actually works perfectly. At least in my FF 2 and IE 6. But may be it's just me, I hate to write special rules for different browsers, specially when I'm trying to achieve something so simple. I am still trying to figure out if there's any other way to fix this 1px of gap. By the way, could you explain the following part of your solution for me? Didn't really understand this part

UL.groupTabContainer:after { content: "."; display: block; clear: both;
height: 0; visibility: hidden }

If you have any other solution, please let me know. I started doing it from scratch and tried the following, but couldn't get rid of that 1px of gap between the tab and the bottom border of UL element. Here's what I tried, and if you use it, you'll see the gap for the inactiveTab at the bottom, if viewing in FF. But it looks perfect in IE (surprisingly)

.groupTabContainer
{
padding: 0 0 0 5px ;
margin: 5px 0 0 0 ;
list-style: none ;
border-bottom: 1px solid #6699ff ;
}

.groupTabContainer li
{
background: #def ;
border: 1px solid #6699ff ;

margin: 2px ;
padding: 2px 3px 0 3px ;

display: inline ;
}

.activeTab
{
border-bottom: 2px solid #fff !important ;
background: #fff !important ;
}

.inactiveTab
{
border-bottom-width: 0 !important ;
}

Thanks a lot.
Kravvitz
11-01-2006, 10:36 PM
That's the non-IE browser part of the clearfix technique. These two articles explain it:

http://www.positioniseverything.net/easyclearing.html
http://www.csscreator.com/attributes/containedfloat.php

Actually the bottom isn't aligned in IE6 either, it's just closer than in FF. I suggest you increase the bottom padding on the inactive tabs.
parvez
11-01-2006, 11:19 PM
Finally it worked. Thanks for the links Kravvitz. I tried increasing the bottom padding of the inactive tabs as you suggested, but didn't really work. Probably it was being affected by something else. Anyways... I was looking at the tutorials on Listamatic site and tried one of their simple example and it worked. Here's the link for that... http://css.maxdesign.com.au/listamatic/horizontal05.htm

So, I tried the code from that tutorial and it worked. Looks like it's aligned properly on both browsers. Here's what I have right now

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS TAB TEST</title>
<style type="text/css" media="screen" title="Default">

.groupTabContainer
{
padding: 3px 0 ;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

.groupTabContainer li
{
list-style: none;
margin: 0;
display: inline;
padding: 3px 0.5em;
margin-left: 5px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

.activeTab
{
background: #fff !important ;
border-bottom: 1px solid #fff !important ;
}
</style>
</head>
<body>

<h1>SIMPLE CSS TAB TEST</h1>
<ul id="campusBuildingGroup" class="groupTabContainer">
<li id="buildingClassroom" class="activeTab">Classroom</li>
<li id="buildingOthers" class="inactiveTab">Other</li>
<li id="buildingOthers" class="inactiveTab">OtherA</li>
<li id="buildingOthers" class="inactiveTab">OtherB</li>
</ul>
</body>
</html>

The only difference that I can see between this one and the ones that I tried before seems to be "padding: 3px 0.5em;" rule for the <li> elements. Everything else looks pretty much similar to what I tried. So, I am guessing that the padding with two different unit types for the list elements made all the difference.

Anyways... Thanks to all of you for your help. Learned a couple of new stuff from this simple thing.