asked on

css for tabs problem

Hello experts.
I need help to style my tabs menu.
The problem i have is to "hide" the border at the bottom on hover and second trying to style the active tab with the same hover style.
I'm trying to use a negative bottom margin for the ul tag but it is not working.
Any help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.tabs {height:26px; margin:0}
.tabs ul,.tabs li,.tabs a{font-family: Verdana,Helvetica,Arial,Sans-Serif;
    font-size: 12px;text-decoration:none;color:#272727;list-style:none;margin:0;padding:0;line-height:1}
.tabs li{display:inline}
.tabs li a,.tabs li span{height:26px;float:left;cursor:pointer}
.tabs a{background:url('menu/images/Detailmenu/left.jpg') left no-repeat;padding-left:47px;}
.tabs .right{padding-right:47px}
.tabs .center{background:url('menu/images/Detailmenu/center.jpg') repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 0px 0;height:15px;}
.tabs .start{background:url('menu/images/Detailmenu/farleft.jpg') left no-repeat}
.tabs .end{background:url('menu/images/Detailmenu/farright.jpg') right no-repeat;padding-right:94px}
.tabs a:hover{background:url('menu/images/Detailmenu/right.jpg');}
.tabs a.start:hover{background:url('menu/images/Detailmenu/farlefthover.jpg');}
.tabs a:hover .end{background:url('menu/images/Detailmenu/farrighthover.jpg') right;}
.tabs a:hover .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}
.tabs a:hover .right{background:url('menu/images/Detailmenu/lefthover.jpg') right;padding-right:94px;margin-right:-47px;position:relative;}
.divcontainer{width:400px; height:100px;text-align:left;margin-bottom:10px;border: thin solid #CCC;}
</style>
</head>
<body>
 <ul class="tabs">
  <li id="li_tab1" class="li_tab1">
   <a href="#" class="start">
    <span class="right"><span class="center">Test</span></span>
   </a>
  </li>
  <li id="li_tab2" class="li_tab2">
   <a href="#">
    <span class="right"><span class="center">Test</span></span>
   </a>
  </li>
  <li id="li_tab3" class="li_tab3">
   <a href="#tab3">
    <span class="end"><span class="center">Test</span></span>
   </a>
  </li>
 </ul>
<div class="divcontainer">
</div>
</body>
</html>

Open in new window

screen.gif

COBOLdinosaur

From what you have there it appears that the border is from divcontainer. You need to remove the top border I think. Playing with negative margins will probably mess up the whole layout. To work, the neg margin would probably have to be applied to the li and that would take it out of alignment if it worked.

trying to style the active tab with the same hover style.

I'm not sure what you are asking for there, but if by active you mean the clicked tab then you can do that with a selector of a:visited using the same attributes as you have for a:hover

Panos

ASKER

Hi COBOLdinosaur.
To the first part.
I did add a negative -1px value to the tabs class and it seems it is working. I have only to add a 2 pix border to the images. (see first image)

To the second.
Can you please write the code for the active tab?
Do you mean the code below?

Take a look at a screen shot using this with IE 6.
Using small text it is not working.(second screen)

<style type="text/css">
.tabs {height:26px;margin-top: 0;margin-right: 0;margin-bottom: -1px;margin-left: 0;}
.tabs ul,.tabs li,.tabs a{font-family: Verdana,Helvetica,Arial,Sans-Serif;
    font-size: 12px;text-decoration:none;color:#272727;list-style:none;margin:0;padding:0;line-height:1}
.tabs li{display:inline}
.tabs li a,.tabs li span{height:26px;float:left;cursor:pointer}
.tabs a{background:url('menu/images/Detailmenu/left.jpg') left no-repeat;padding-left:47px;}
.tabs .right{padding-right:47px}
.tabs .center{background:url('menu/images/Detailmenu/center.jpg') repeat-x;margin-right:-47px;min-width:47px;padding:11px 0 0px 0;height:15px;}
.tabs .start{background:url('menu/images/Detailmenu/farleft.jpg') left no-repeat}
.tabs .end{background:url('menu/images/Detailmenu/farright.jpg') right no-repeat;padding-right:94px}
.tabs a:hover,.tabs a:active{background:url('menu/images/Detailmenu/right.jpg');}
.tabs a.start:hover,.tabs a.start:active{background:url('menu/images/Detailmenu/farlefthover.jpg');}
.tabs a:hover .end,.tabs a:active .end{background:url('menu/images/Detailmenu/farrighthover.jpg') right;}
.tabs a:hover .center,.tabs a:active .center{background:url('menu/images/Detailmenu/centerhover.jpg');font-weight:bold;color:#F60;;padding:8px 0 0 0;height:18px;}
.tabs a:hover .right,.tabs a:active .right{background:url('menu/images/Detailmenu/lefthover.jpg') right;padding-right:94px;margin-right:-47px;position:relative;}
.divcontainer{
	width:400px; height:100px;
	text-align:left;
	margin-bottom:10px;
	border: thin solid #CCC;
}
</style>

Open in new window

screen-1.gif
screen-2.gif

COBOLdinosaur

I would not have code the active quite that way, but yes that was the intended approach.

As to the matter of IE6. The only way you are going to get IE6 to do it right is to basically code the CSS twice because it does virtually everthing to do with positioning wrong. You may even have to do some scripting to make it behave.

I no longer support IE 6 because no one is using it anymore. In most stats it shows up with a very tiny share and that is primarily developers testing to see what works.

I'm not sure how much of the old IE6 hacks and workarouunds are still around. You can get most of what you need at
Quirksmode where the compatibility tables show that IE6 is broken, wrong, or does not support just about everything you need for those tabs. After seeing how much has to be done you will probably understand why it make no sense to support a browser that is no longer being used.

Panos

ASKER

Hi again COBOLdinosaur
Sorry for the delay but i have some connection problems this weekend.

You are right for the IE6 part. It is time to stop supporting this browser version.

"I would not have code the active quite that way"
Can you please show me the way you would code the active?

Because i'm using jquery i want to see what is the best way to add - remove class to the elements.

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Panos

ASKER

Thank you for your detailed explanation COBOLdinosaur.
To this comment:
"You are not just applying the presentation, you are trying to declare structure"

Please write an example so that i can 100% understand the difference.
(sometimes the examples are very useful for me because of my poore english)

"Is there more than one center"
The first code i posted has the center class 3 times ,i suppose it is a class.

I really can use instead of ".tabs" , a "#tabs" and change the ul class="tabs" to ul id="class".

SOLUTION

COBOLdinosaur

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Panos

ASKER

Thank you very much for your help and examples COBOLdinosaur.

Panos

ASKER

Thank you
regards
panos

COBOLdinosaur

panos,

I am always happy to try and help someone who wants to get better. I try to learn a little each day, but no matter how old I get, I am certain there will still be thing I can learn.

Panos

ASKER

COBOLdinosaur anyone on this planet should do and think like you .We are saying in our country: "If you not give you will not get"
Thank you again.