CSS - Tabbed Navigation Problem

Navigation buttons appear just fine with Firefox but they stand 2 pixels down of their original location when viewed with internet explorer. I assigned almost everything margin:0px but did not fix my problem.

Click here to view. Red navigation bar.:
http://www.refinethetaste.com/html/

I am trying to create the navigation from this site: http://www.cougarsoftware.com/content/partners/overview.aspx in CSS. However, I have 2 problems.

1) getting the second (or third) column to always align to the top of the first
2) keeping the second column open when there are few items in the list ex: try choosing Partners and then a second column option.

This design is currently in Flash, and thus is not accessible, however, hovering over 'dead' space, area without links, the bottom of column 2 closes the column 2 nav

Thanks for any help!

HTML
Code:

			<div id="access" role="navigation">
			  				<div class="skip-link screen-reader-text"><a href="#content" title="Skip to content">Skip to content</a></div>
<div class="menu-header"><ul id="menu-level1" class="menu">
	<li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-34">
    	<a href="http://localhost/wordpress/about/">About</a>
    </li>
	<li id="menu-item-30" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current_page_ancestor menu-item-30">
    	<a href="http://localhost/wordpress/products/">Products</a>
		<ul class="sub-menu">
			<li id="menu-item-29" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-29">
            	<a href="http://localhost/wordpress/products/hand-tools/">Hand Tools</a>
				<ul class="sub-menu">
					<li id="menu-item-28" class="menu-item menu-item-type-post_type current-menu-item page_item page-item-14 current_page_item menu-item-28">
                    	<a href="http://localhost/wordpress/products/hand-tools/hammers/">Hammers</a>
                    </li>
				</ul>
			</li>
		</ul>
	</li>
	<li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-33">
    	<a href="http://localhost/wordpress/contact/">Contact</a>
		<ul class="sub-menu">
			<li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-31">
            	<a href="http://localhost/wordpress/contact/phone/">Phone</a>
            </li>
			<li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-32">
            	<a href="http://localhost/wordpress/contact/email/">Email</a>
            </li>
		</ul>
	</li>
	<li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-27">
    	<a href="http://localhost/wordpress/other/">Other</a>
    </li>
</ul>
</div>			</div><!-- #access -->

CSS
Code:

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	/*width: 940px;*/
	width: 192px;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	/*width: 928px;*/
	width: 180px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	/*float: left;*/
	position: relative;
}
#access a {
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 0px;
	left: 180px;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #333;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

Hi,

I can't make my active tab look 'active' in my navigation. I have the following css:
Code:

#tab_menu {
	width: 200px;
	margin-top: 10px;
	}
	
#tab_menu li a {
  	height: 24px;
	text-decoration: none;
	color: #484848;
	display: block;
	background:  url(../images/tab_menu.gif);
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
#tab_menu li a:hover {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
	}
	
.active {
	color: #55880a;
	background:  url(../images/tab_menu.gif) 0 -32px;
	background-repeat: no-repeat;
	padding: 8px 0 0 10px;
}

with the following html:

Code:

<div id="tab_menu">
    <ul>
	<li><a class="active" href="link.html">Link 1</a></li>
	<li><a href="link2.html">Link 2</a></li>
	<li><a href="link3.html">Link 3</a></li>
	<li><a href="link4.html">Link 3</a></li>
    </ul>
</div>

Any help welcomed!
M.

i have set up my navigation menu like so:
PHP Code:
<style type='text/css'>
   div#nav {
      border:1px solid #000000;
      background-color:#F2F2F2;
      height:auto;
   }
   div#nav a {
      display:block;
      color:black;
      border:1px solid #FFFFFF;
   }
   div#nav a:hover {
      color:red;
      border:1px solid #000000;
      background-color:white;
   }
</style>

<div class='nav'>
   <a href='page1.html'>Page 1</a>
   <a href='page2.html'>Page 2</a>
   <a href='page3.html'>Page 3</a>
   <a href='page4.html'>Page 4</a>
</div> 




the above works perfectly in Firefox, but doesnt in IE.
IE seems to keep around the fact that the <a> tag only encapsulates the text: Page 1, so the rollover effect only works in IE when the user hovers over the text and not anywhere in the row.
Does IE not understand the display:block? as i think this is whats causing it...

Hi guys,

I hope someone can help me resolve this issue with my navigation.

It is fine in IE7, FF and Safari but in IE6 my nagivation looks like this:



instead of this:



Here is the code: Code:

<!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">
<!--
body,td,th {
	font-family: Georgia, Times New Roman, Times, serif;
	font-size: 12px;
	color: #333333;
}
body {
	margin-left: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a:link {
	color: #CC0000;
}
a:visited {
	color: #CC0000;
}
a:hover {
	color: #3399CC;
}
a:active {
	color: #CC0000;
}

#container {
	width:850px;
	margin:0 auto 0 auto;
}

#header {
	width:850px;
	height:187px;
	background:url(images/bg_header.jpg) top left no-repeat;
}





#navcontainer
{
margin: 0px;
padding: 0px;
background:url(images/bg_nav.jpg) top left no-repeat;
width:850px;
height:40px;
text-align:center;
}

#navlist {
padding:0;
margin:0;
margin-left:8px;
}

#navcontainer ul li
{
list-style-type: none;
padding: 0;
margin: 0;
display: block;
float: left;
background: url(images/orig_nav.jpg) repeat-x 20px;
font: 13px verdana, sans-serif;
text-align: center;
}

#navcontainer a
{
color: #FFF;
font-weight:bold;
font-size:13px;
text-decoration: none;
display: block;

padding-right:12px;
padding-left:12px;

height:40px;
line-height:40px;
text-align:center;
}

#navcontainer li#active { background: url(images/orig_nav.jpg) repeat-x 20px; }
#navcontainer a:hover { background: url(images/hover_nav.jpg) repeat-x 20px; }




-->
</style></head>

<body>



<div id="container">

    <div id="header"></div>
    
    <div id="navcontainer">
    <ul id="navlist">
    <li id="active"><a href="#" id="current">Home</a></li>
    <li><a href="#">The Club</a></li>
    <li><a href="#">Membership</a></li>
    <li><a href="#">Forum</a></li>
    <li><a href="#">Sites</a></li>
    <li><a href="#">Flight Log</a></li>
    <li><a href="#"> Resources</a></li>
    <li><a href="#">Links</a></li>
    <li><a href="#">Gear Sales</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
    </div>
    
</div>



</body>
</html>

Thanks for any help,
Mike

This time, problem is at the left navigation menu. There should be a 10px border on the left side of Denim. It appears fine with firefox but it does not appear at all with ie.

Please view the attached image. Or view at :
http://www.refinethetaste.com/html/...s&CATEGORYID=16

I'm working on the navigation the navigation for an image gallery I'm working on, but have run into some problems. It works fine in Firefox and Safari, but doesn't work in IE6, IE7, and Opera, and I can't for the life of me figure out why.

The previous link and next link appears when they hover over the right and left side of the picture. I think it might be a problem with z-index, and the two link pictures getting stuck under the image in the image gallery, but I'm not sure.

Any and all help is appreciated.

This is the code for the gallery, minus the two navigation pictures and the image for the gallery.

Code:

<!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" xml:lang="en" lang="en">
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Example</title>

 <style type="text/css" media="screen">
 
	#test {
	margin:0;
	padding:0;
	position:relative;
	top:0;
	left:0;
	width:800px;
	height:640px;
	background-color: #000;
	
	}

	#nav{
	position:absolute;
	left:0;
	top:0;
	z-index:999;
	width:100%;
	height:100%;

	}

	#Next,#Prev{
	position:absolute;
	display:block;
	width:50%;
	height:100%;
	outline:none;
	top:0;
	
	}

	#Next{right:0;}
	#Prev{left:0}

	#Next:hover{
	background:transparent url(next.gif) no-repeat 100% 30%;
	}

	#Prev:hover{
	background:transparent url(prev.gif) no-repeat 0% 30%;
	}

	#image{
	display:block;
	}


    
</style>

</head>
<body>

	<div id="test">

		<div id="nav">

        		<a href="#" id="Prev"></a>

        		<a href="#" id="Next"></a>	

      	</div>
		<img id="image" src="grass.jpg" alt="image" />
	</div>


</body>
</html>

Hi,
I have a margin or spacing between the header image and the navigation bar. I'm unsure of how to remove it. I want the navigation to be directly underneath the header.

This is the HTML

Code:

<div id="navbar"> 
<ul> 
<li><a href="index.html">Home</a></li> 
<li><a href="horses.html">Horses</a>
<ul>
<li><a href="stallions.html">Stallions</a></li>
<li><a href="mares.html">Mares</a></li>
<li><a href="geldings.html">Geldings</a></li> 
<li><a href="foals.html">Foals</a></li> 
</ul>
</li>
<li><a href="showteam.html">Show Team</a></li> 
<li><a href="showresults.html">Show Results</a></li>
<li><a href="youths.html">Youths</a></li> 
<li><a href="sales.html">Sales</a></li> 
<li><a href="contactus.html">Contact Us</a></li> 

</ul> 
</div> 

This is the CSS
Code:

#header {
	
	background:#ddd;
	border-left:1px solid #FFF;
	border-right:1px solid #FFF;
	border-top:1px solid #FFF;
	
}

#navbar {
	font-family: Edwardian Script ITC, Verdana, Arial, sans-serif;
	font-size:36px;
	width:100%;
	margin-top:0px;
	padding:0px;
	height:63px;
	background-color:#FFF;
	}
	
#navbar li {
	list-style: none;
	float: left; 
	}
	
#navbar li a {
	display: block;
	padding: 7px 8px;
	background-color: white;
	color: black;
	text-decoration: none; 
	}
	
	#navbar li ul {
	display: none; 
	width: 5em; /* Width to help Opera out */
	background-color: white;
}
	
	#navbar li:hover ul {
	display: block;
	position: absolute;
	margin: 0;
	padding: 0; }

#navbar li:hover li {
	float: none; }

#navbar li:hover li a {
	background-color: white;
	border-bottom: 1px solid #000;
	color: #000; }

#navbar li li a:hover {
	background-color:#FFC; }

Any help would be appreciated! It's really frustrating me. I've tried looking around other websites for help too.


Kim

Hi!

Could you please help me to fix my menu in IE7.

You can see the problem on my site. But actually I don't know how to add an url he
The code is:

padding:0;
}
#menu ul#layer1 li {
background:transparent url(/site_media/images/left.png) no-repeat scroll left top;
float:left;
margin-left:6px;
padding-bottom:6px;
padding-left:6px;
padding-top:4px;
}
#menu ul#layer1 li span {
background:transparent url(/site_media/images/right.jpg) no-repeat scroll right top;
margin-right:6px;
padding-bottom:6px;
padding-right:6px;
padding-top:4px;
}
#menu li a {
background-color:#BF1E2D;
color:#FFFFFF;
padding:4px 35px 6px;
text-decoration:none;
}
#menu ul#layer1 li#current span {
background:transparent url(/site_media/images/right-gray.png) no-repeat scroll right top;
}
#menu ul#layer1 li#current {
background:transparent url(/site_media/images/left-gray.png) no-repeat scroll left top;
}
#menu ul#layer1 li#current a {
background-color:#E3E3E3;
color:#BF1E2D;
}

Hi All,

I am building a site that has the following structure for the navigation;

Code:

<div id="navigation">
    <ul id="navlist">
      <li class="home"><a href="../index.asp" title="home"><span>home</span></a></li>
      <li class="aboutus"><a href="../aboutus.htm" title="aboout us"><span>about us</span></a></li>
      <li class="ourservices"><a href="../ourservices.htm" title="our services"><span>our services</span></a>
        <ul>
          <li class="internationalmail"><a href="ourservices_internationalmail.htm" title="international mail"><span>international mail</span></a></li>
          <li class="worldwidecourier"><a href="ourservices_worldwidecourier.htm" title="worldwide courier"><span>worldwide courier</span></a></li>
          <li class="worldwidefreight"><a href="ourservices_worldwidefreight.htm" title="worldwide freight"><span>worldwide freight</span></a></li>
          <li class="storage"><a href="ourservices_storage.htm" title="storage"><span>storage</span></a></li>
          <li class="publishingservices"><a href="ourservices_publishingservices.htm" title="publishing services"><span>publishing services</span></a></li>
        </ul>
      </li>
      <li class="requestquote"><a href="../requestquote.htm" title="request a quote"><span>request a quote</span></a></li>
      <li class="contactus"><a href="../contactus.htm" title="contact us"><span>contact us</span></a></li>
    </ul>
  </div>

The main LI is horizontal, and the containing UL, LI is a vertical dropdown. The seperate CSS file does the image replacements on the <a> and hides the text within the <span>, usual stuff. The nav works great, with the graphic rollovers etc. The rollover, again, standard way of doing it, background: url(<FILE>) no-repeat top left; and the a:hover rollover is a background: bottom left;.

Edit: Just noticed that I can't link to the full site that I have uploaded for preview.

What I want to do, is when the user roll's over any of the items within the sub-navigation, it keeps the main Services navigation link rolled over also. The only way I could think of doing this, and relatively simply, would be to use JavaScript, but wanted to explore any other CSS ways of doing this. For example, is it possible to change a style of another class, from another?

Your help would be much appreciated!

I'm trying to use a jQuery script to create a tabbed slide-out on the right side of the screen. At this point, the slide-out plug-in is not an option.

Here's the jQuery script:

Code:

$('#sideTabMain .button').toggle(function() {
	$('#sideTab').animate({right:'0px'}, {queue:false, duration: 500});
}, function() {
	$('#sideTab').animate({right:'-650px'}, {queue:false, duration: 500});
});

And the basic CSS for the div:

Code:

#sideTab      {
	position: absolute;
	z-index: 1000;
	top: 50px;
	right: -650px
	}

The issue is CSS-related. You can still see the slide-out div when you scroll over to the right (off the screen). How do I hide this? I tried putting the entire page in a CSS div with overflow: hidden but this completely removed the ability to scroll horizontally. Any ideas?

Thanks for your help.

Didn't know what to search for this--apologies if it exists somewhere on the board.

Now, with links, I know you can supply a title="" attribute to them, to get a tooltip to appear on them if you leave the mouse hovering on them for a short period. What I am trying to do is somewhat similar.

Basically, imagine that you have a column of links, and a large space to the right of them (the background of which is defined elsewhere, but links' descriptions still would show here).

Some code demonstrating the type of effect I'm grasping for is below:

Code:

-- DTD removed for space --
<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
body{
	padding:    0px;
	margin:     0px;
}
.navCol{
	background: #00FFCC;
	width:      20.00%;
}
.dispInf{
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
	background: #CCCCCC;
	height:     65%;
}
a:hover span{
	display:    block;
	position:   absolute;
	top:        0px;
	left:       21.00%;
	width:      79.00%;
}
a span{
	display: none;
}
-->
</style>
</head>
<body>
<div class="dispInf"></div>
<div class="navCol">
	<a href="/site1">Link 1<span>
	Description 1</span></a>
	<br />
	<a href="/site2">Link 2<span>
	Description 2</span></a>
</div>
</body>
</html>

Now, my problem is this:
This does not work in Internet Explorer, at all. Links still function; however, the text that should be appearing over in that right area does not.

Could anyone please point me in the proper direction to resolve this, if such can be done? I'm only shooting for IE6 and Mozilla compatibility, though the more the merrier.
Thank you for your time.

I am very new to CSS, but I am trying to use it to make a tabbed rounded-corner centered menu bar for my webpage. I've gone through a number of iterations, and I feel like I'm close, but it's not quite right. The left rounded-corner image appears to be just slightly too high compared to the middle/right part of the tab. The css and html codes are below. Thank you for any help.

Kate

CSS CODE:

#tabs8 {
float:left;
width:100%;
background:#FCF1F6;
border-bottom:4px solid #E276A7;
overflow:hidden;
position:relative;
}
#tabs8 ul {
clear:left;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
left:50%;
text-align:center;
}
#tabs8 ul li {
display:block;
float:left;
list-style:none;
margin:0 0 0 1px;
padding:0px 3px;
position:relative;
right:50%;
}
#tabs8 ul li a {
display:block;
margin:0 0 0 1px;
padding:3px 0px;
background:url("tableft8.gif") no-repeat left top;
text-decoration:none;
line-height:1.3em;}
#tabs8 a span {
background:url("tabright8.gif") no-repeat right top;
padding:3px 10px;
color:#333;
line-height:1.3em;}

#tabs8 ul li a:hover {
background:#369;
color:#fff;
}
#tabs8 ul li a.active,
#tabs8 ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}-->




HTML CODE:

<div id="tabs8"><ul>
<li id="current">
<div align="center"><a href="index.html"><span>Home</span></a></div>
</li>
<li>
<div align="center"><a href="cake-shaping.html"><span>Cake Shaping</span></a></div>
</li>
<li>
<div align="center"><a href="decorations.html"><span>Edible Decorations</span></a></div>
</li>
<li>
<div align="center"><a href="gallery.html"><span>Gallery</span></a></div>
</li>
<li>
<div align="center"><a href="blog.html"><span>Blog</span></a></div>
</li>
<li>
<div align="center"><a href="subscribe.html"><span>Subscribe</span></a></div>
</li></ul></div>

So I have a myspace, and I like things neat and compact. And I like filling out lots of long surveys that most likely no one will ever read, and posting them on my myspace. But when I do that, my page becomes very long and I don't like that. So my idea was something like this:

There would be a series of links across the top that would correspond to the various surverys and/or other content that I deem necessary to share with the world. The many users who visit my page looking for more details about my life click on the link of their choice. The box below all the links shows that particular survey. They read it all, and of course want more, so they click the next link. And poof, a new survery shows up right where the other one was. Compact and efficient.

I've seen sites use a slightly similar system before, often in the help/faq sections. You find the topic you need help with, click on it, and it pops up below it. However I'm pretty sure they used javascript, which isn't allowed on myspace. ("Security" or some other overrated matter). Therefore I would have to do it with CSS. I was thinking have each survey in a different table, all absolute positioned in the same place. Then when you click the link, either all the rest get visibility turned to not visible, (and that one turned to visible), or perhaps the z-index is changed. However I'm not sure you can do that in a link, especially without javascript. So I may need to find an alternative. Unfortunately, I'm not very good with CSS at all, and I'm also not very creative in problem solving.

Does anyone have any ideas on how I could implement this system without javascript or using other pages? (I just get my one little myspace homepage, although I guess I could cheat and use blog pages too. But then all the other blog crap like comments would show up on it).

I apologize if this has already been covered, I tried to look through the more recent posts for something similar and found nothing, and I wasn't really sure what to search for, since it isn't really something concrete I'm working with. I don't necessarily need code, mostly just ideas right now.

Thanks in advance to anyone who helps, and if you don't know what I'm talking about/thought it was too long, tell me and I'll try to clear it up or shorten it up, respectably (and respectfully, as it were).

PS. My myspace account, if you care and didn't already guess, is www.myspace.com/mynameismolotov. Althought it's basically empty right now.

I'm using the Spry tabbed panels widget on a website. I would like to center align the horizontal tabs. The default setting is left align. And I'm able to right align it.

Here is part of the css code:

.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
}

.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
}

.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 2px 6px 6px 6px;
margin: 0px 0px 0px 0px;
list-style: none;
border-left: solid 1px #999;
border-bottom: solid 1px #CCC;
border-top: solid 1px #CCC;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
background-image: url(../sprylight.png);
color: #333333;


I've tried changing the "padding" under the ".TabbedPanelsTabGroup" rule to "auto". This causes the tabs to kind of be centered, but not exactly. Also, one of the tabs breaks apart from the row and spills over to the next line.

Any help would be very much appreciated.