3

I am trying to write a web page that displays horizontal tabs across the top. I have copied the CSS and HTML from several different examples but I always end up with a vertical unordered list of options. I don't have any other CSS concerning unordered lists that would conflict with what I am experimenting with. Here is the CSS:

#ts_tabmenu { font-size: .75em; padding: 20px 0px 0px 20px; } #ts_tabmenu ul { line-height: 1em; margin: 0px; list-style-type: none; float: left; padding: 0px 0px 0px 5px; } #ts_tabmenu ul li { float: left; } #ts_tabmenu ul li a { text-decoration: none; display: block; float: left; padding: 0px 0px 0px 10px; background: url(tabs.gif) no-repeat left top; margin-left: -5px; z-index: 0; position: relative; color: #666666; } #ts_tabmenu ul li a strong { font-weight: normal; /* remove the bold effect */ display: block; background: url(tabs.gif) no-repeat right top; padding: 6px 10px 7px 5px; cursor: pointer; } #ts_tabmenu ul li a:hover { position: relative; z-index: 5; background: url(tabs.gif) no-repeat left bottom; color: #000000; } #ts_tabmenu ul li a:hover strong { background-image: url(tabs.gif) no-repeat; position: relative; z-index: 5; background-position: right bottom; }

And here is the HTML:

<div id="ts_tabmenu"> <ul> <li><a href=#Dashboard><strong>Tutorialsphere</strong></a></li> <li><a href=#><strong>Photoshop</strong></a></li> <li><a href=#><strong>Illustrator</strong></a></li> <li><a href=#><strong>Fireworks</strong></a></li> <li><a href=#><strong>Flash</strong></a></li> <li><a href=#><strong>CSS</strong></a></li> <li><a href=#><strong>PHP</strong></a></li> </ul> </div>

Any advice is greatly appreciated.

Regards.

Improve this question
1
  • Did you try to see what was going on with Firebug or an equivalent tool? Hint: add li { outline: 1px dotted red; } to see the space occupied by list items. Commented Jun 29, 2012 at 19:34

3 Answers 3

Reset to default
2 
#ts_tabmenu ul li { display:inline-block; float: left; }

that should do it for you.. the problem with float left is that, if its a block, it takes up the width of the space that it is in.

inline-block will make it only as wide as its contents, you might want to add some paddings/margins according to your style.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@Kevin, spread some community <3 cdn.sstatic.net/img/faq/faq-accept-answer.png :)
Unless you're using IE6 or IE7, you don't need any of the float: left rules; display: inline-block on the li and either block or inline-block on the a tags should be fine. Floating things just adds to the soup.
i would say that its likely that he is...You guys appear to be correct. The various codes seem to work fine in IE but always render as a vertical unordered list in Firefox. – Kevin Jun 29 at 19:53
0

Works perfect for me: http://jsfiddle.net/EPSr6/

I added display: inline-block to #ts_tabmenu ul li and still worked fine.

Improve this answer

2 Comments

You guys appear to be correct. The various codes seem to work fine in IE but always render as a vertical unordered list in Firefox.
@Kevin will you mark my answer as correct if it helped you, please!
0

Seems to be working for me in http://jsfiddle.net/7GUVU/

Tab links along the top.

Improve this answer

1 Comment

as said already, its a browser thing, hes testing in old versions of ie.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.