Tab menu problem

mikemastah · December 24, 2008

I have a problem with my tab menubar.

in most browsers it looks like this:

in some others it looks like this

but this is what i want

this is more or less the css I use:

.menuhold {
   background-color: #17130f;
   width: 846px;
   height: 40px !important;
}

.menubar ul
{
   list-style: none;
   padding: 0;
   margin-top: 6px;
   margin-bottom: -2px;
}

.menubar li
{
   float: left;
   margin: 0 2px;
}

.menubar li a
{
   background: url('/images/tab2.png') no-repeat;
   height: 36px;
   line-height: 2em;
   float: left;
   width: 96px;
   display: block;
   color: #a39a7b;
   text-decoration: none;
   text-align: center;
}

.menubar li a:hover, .menubar li a.current
{
   color: #17130f;
   font-weight: bold;
   background: url('/images/tab.png') no-repeat;
   height: 36px;
   width: 96px;
}

menuhold being the div which holds the menu.... wow that sounds.... anyways

can anyone help me?

TorchPro · February 18, 2009

Re: Tab menu problem

Try using the float option for the css..

Maybe that would work

And I noticed that when I do divs as well, you should use advanced selectors..

But, I noticed that same crap happening when I open up work in chrome or something like that.

Dont know what the problem is, but I would just put some text at the top or the bottom of the page saying best viewed in whatever browser you think it looks best in.

POG1 · February 18, 2009

Re: Tab menu problem

Try adding this into the container div.

overflow:hide;

Floydian · February 18, 2009

Re: Tab menu problem

It's really impossible to know for sure what the solution is without a test case. Put up a link to the site and I or someone else would be able to provide a definitive answer.

With that said, I wonder if a text-align is being set to center for some reason.

POG1 · February 22, 2009

Re: Tab menu problem

Try this..

<html>
<head>

<style type="text/CSS">


body {background:#a39a7b;font-family: Sans,"microsoft sans serif",sans-serif,arial;font-size: 0.9em;}
#menu { margin:0;padding:0;background:url([url]http://armybattleground.co.cc/images/tab2.png[/url]);height:36px;overflow:hidden }
#menu ul { margin:0;padding:0;height:36px; }
#menu ul li { margin:0;padding:0;float:left;display:block;height:36px; }
#menu ul li a { padding-top:5px;font-weight:bold;margin:0;padding:height:36px;line-height:2em;float:left;width:96px;display:block;color:#a39a7b;text-decoration:none;text-align:center;}
#menu ul li a:hover, #menu ul li a.current { height:36px;background:url([url]http://armybattleground.co.cc/images/tab.png[/url]);color:#17130f;font-weight: bold; }
.clear{clear:both}

</style>
</head>
<body>


<div id="menu">
	<ul>

		[*][url="#"]Home[/url]
		[*][url="#"]Home[/url]

		[*][url="#"]Home[/url]
		[*][url="#"]Home[/url]
		<br class="clear" />

	[/list]
</div>


</body>
</html>

mikemastah · February 25, 2009

Re: Tab menu problem

thanks a lot POG, works like a charm.

fixed it now.

POG1 · February 25, 2009

Re: Tab menu problem

Ok cool :)

Sign In

Tab menu problem

Recommended Posts

mikemastah

TorchPro

POG1

Floydian

POG1

mikemastah

POG1

Join the conversation

Browse

Activity

Hosting