CSS tabs

[seanf]

Hello everyone,

I am using the SimpleBits CSS tabs in a project. What I want to do is use a border instead of an image to create the line under the tabs, making it easier to provide different colour schemes. Can anyone help?

Thanks

Sean

[RetroNetro]

Hello

Do you mean the small line under all the buttons?

That is produced by this line?

background: url(../images/tab_bottom.gif) repeat-x bottom;

If so remove the background property from it and add this to the file:

#tabnav {
	   height: 20px;
	   margin: 0;
	   padding-left: 10px;
           border-bottom: 1px solid #eee;
	}

Hope it helps

later
Johnny

[seanf]

Unfortunately, it's not that easy. If you just add a bottom border and adjust the height of the tabs it works in Firefox, but not in IE (spacing is off). Thanks for your help though

Sean

[RetroNetro]

Hello

Oops

I did not think about that. Sorry.

Later
Johnny

[Paul O'B]

Hi Sean,

I did an example of some tabs here that doesn't use images that may be of use.

http://www.pmob.co.uk/temp/tabmenu_mine.htm

I'll have a look at the simple bits one in a minute or two and see what needs changing

Paul

[Paul O'B]

Hi,

This should do it (unless i've missed something obvious ).

#tabnav
 {
  height: 20px;
  margin: 0;
  padding-left: 10px;
  border-bottom:1px solid #ccc;
 }
#tabnav a {  
 position:relative;
 top:1px;
} 

Hope that helps.

Paul

[seanf]

I'll give it a go. Thanks Paul

Sean