CSS - Div Issue, Damn Navigation Bar!

When I change pages on my website, my navigation buttons don't change color like they should. I keep going through the code and just can't figure it out. I had somebody else write the code, and they are no longer around. I would sure appreciate any help anybody could offer.

Is it ok if I post the website here? Or if someone is knowledgeable, I can PM them the website for a quick look?

Any help would be greatly appreciated!

hey guys. wanna use an UL as navigation. my problem is I am unsure how to get this centered and get that tail of black off. here is the code.

Code:

 ul#navlist
{
padding: 0;
margin: 10;
list-style-type: none;
float: center;
width: 85%;
color: #fff;
background-color: #000000;
}

ul#navlist li { display: inline; }

ul#navlist li a
{
float: center;
width: 5em;
color: #fff;
background-color: #000;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid #fff;
}

ul#navlist li a:hover
{
background-color: #369;
color: #fff;
}

html
Code:

<ul id="navlist">
<li><a href="#">Home</a></li>
<li><a href="#">Band<font face="Times New Roman">&nbsp;</font>Bios</a></li>
<li><a href="#">Multimedia</a></li>
<li><a href="#">Shows</a></li>
<li><a href="#">Lyrics</a></li>
<li><a href="#">Merchandise</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Guestbook</a></li>
</ul>

I cant seem to get it to work with IE7 or IE9. It works fine in every other browser.

Code:

http://www.sdindependentplumbing.com/

This my [ if IE ] CSS code for IE 8 & 9:

.l-triangle-top { }

.l-triangle-bottom {}

.r-triangle-top {}

.r-triangle-bottom {}

Thanks in advance for any help or comments.

Well, i'm designing a website for myself and i've run into a setback(i'm totally new to web design) with the navigation and how it appears in firefox.

Heres how it displays in IE, and firefox.(well my url has been blocked so showing a picture may not be possible)



I'd like it to appear in firefox the same as IE..

Heres the html code:

Quote:
<div id="Navigation">
<ul>
<li><a href="main.htm"><b>Homepage</b></a></li>
<li><a href="home.html">About Me</a></li> <li><a href="home.html">My Interests</a></li><br>
<li><a href="home.html">Cool Sites</a></li>
<li><a href="home.html">My Opinions</a></li>
</ul>
</div>


Css code thats formatting the <div> and its contents.

Quote:
#Navigation { width: 9em; border-left: 3px #000000 solid; padding: 0 0 1px 0; magin-bottom: 2px black; font-family: Verdana; background-color: #202020; color: #4b225b; text-align:c enter; font-size: 10pt; font-weight: normal; }

#Navigation ul { list-style: none; margin: 0; padding: 0; border: none; }

#Navigation li { border-bottom: 1px solid #202020; margin: 0; }

#Navigation li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px #202020 solid; background-color: navy; color: #ffffff; text-decoration: none; width: 100%; }

#Navigation li a:hover { border-left: 10px solid black; background-color: black; color: #white; }


I wonder if its possible to help me find the cause of the issue as i'd prefer that it appear the same in both IE and Firefox >.>

Thank you for your help

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!

WHAT IS THE TYPICAL CSS PROBLEM FOR THIS ISSUE?



w w w. jaywayproductions . c o m/portfolio/work_history.html


It suppose to look the way it looks in IE. It is a little off in Firefox. I have been try'n several things to solve this particular issue but cannot. It seems as if the bottom and top row stretches and makes the effect I was trying to accomplish look off in FF. You can understand what I'm sayin' when you view both. Does anyone know why it is doing this? Any help would be greatly appreciated!

Hello

I am having difficulties with a site I am working on. First, if you look at it in IE and roll your mouse to the right of the site the whole thing shifts to the left. No idea why it does this.

Second: In Firefox it looks like a disaster! Help!

http://www.tombraiders.net/katie/shelly/index.html

User: letme
Pass: in

Thank you!

Hello Guys,

I am trying to get the the css to work but having a hard time with it and need some help..

Here is the content lined up in fire fox.

http://content.screencast.com/users/dank2009/folders/Jing/media/4198ca5c-6c75-4196-a2e7-ba1c423caca7/2011-08-22_1550.png

Ad this is what it looks like in IE (See my issue)
http://content.screencast.com/users/dank2009/folders/Jing/media/c9f0dcd6-19c9-48f6-83f8-9c55d7417fcc/2011-08-22_1551.png

Here is the code

Code:

echo '<div class="listing"><img src="'.$listing_photo.'"><span class="listlink"><a href="index.php?content=subcats&id='. $listing_id.'">'.$listing_title2.'</a></span><br><span class="listbody">'.$listing_body2.'<span class="readmore"><a href="index.php?content=subcats&id='. $listing_id.'">&nbsp;&nbsp;Read more</a></span>>>></div>';

Here is the CSS
Code:

.listing {
	width:560px;
	height:auto !important;
	margin: 0 auto;
	text-align: left
}
.listlink {
    float:left;
    margin-left: 10px;
    margin-top: 20px;
    position: absolute;
    text-decoration:underline;
}

.listbody {
	float: left;
    margin-left: 110px;
    margin-top: -30px;
    width:440px
}

.listingdiv{
	border-bottom: 2px dotted #9EABB5;
	color:#FFF;
}

Please advise how to fix this..

Thanks for your help in advance..
Dan

Hi everyone,

For years I've been using tables solely to position elements on web pages but it's come to my attention that this is now "frowned" upon in the web community so I figured if I'm going to start doing things the more common way (with DIVs) I might as well start now. I'm not a professional website developer (C programmer here...eek! haha), but I do part time web work for some important clients of mine.

So I have a very simple layout done with DIVs/CSS to start (code at the bottom). The problem is when you render it you'll see a large gap between the bottom of the layout and bottom of the page. My hypothesis is that this is due to where the "DIVs" would normally have been, except I moved them around. It sounds very similar to the problem encountered he

http://forums.devshed.com/css-help-116/how-to-remove-blank-space-at-bottom-554773.html

but I don't see what he did to solve it.

Note that ultimately what I want is only the "header" and "footer" to have a fixed width/height. The leftcol and content should have fixed widths, but height grow with what ever is in them. And it should be centered in the page the way it is now. I tried various "text-wrap" and "height: 100%" and a few different codes but no luck. I really don't want to have to give up on DIV's but I am finding them a tad frustrating .

I've altered the code from here (http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/3/). I tried "floating" them but that didn't seem to help either or is messes up my centering, plus I don't want it expanding to different resolutions.

Thanks in advance if you can give a DIV newbie a heads up.
Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>TWO-COLUM FIXED LAYOUT
WITH FIXED BOXES</title>
  <style type="text/css">
<!--
#header {
background: #0f0;
position: relative;
z-index: 1;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: relative;
z-index: 2;
top: 0px;
left: -325px;
width: 150px;
height: 600px;
}
#content {
background: #ff0;
position: relative;
z-index: 3;
top: -600px;
left: 75px;
width: 650px;
height: 600px;
}
#footer {
background: #0f0;
position: relative;
z-index: 4;
top: -600px;
left: 0px;
width: 800px;
height: 100px;
}
-->
  </style>
</head>
<body style="margin: 0pt;">
<div align="center">
<div id="header">Header
Section</div>
<div id="leftcol">Left
Section
<p align="left">
Test
</p>
</div>
<div id="content">Content
Section</div>
<div id="footer">Footer
Section</div>
</div>
</body>
</html>

I have a nice little vertical navigation block that I would like to use in multiple pages within the same website. I would like to use the nav block without repeating the code, but I can't figure out how to do it. I have put the code in navigation.htm. What do I do next?

How is this navigation done on the top of the page? I looked at the CSS and all the javascript. I can't see how the drop down is created? I tried to replicate it and copied the background images. I can get the menu to show and rollovers work. Just the drop down won't work. http://jmadvertising.com/

Hello,

I'm new to the forum and not very good with CSS yet. I'm slowly moving from tables to CSS. I set up a sample page to describe the problem I'm having but the forum won't allow me to post the URL here.

I have a vertical CSS "LI" navigation section in the left hand sidebar of this web page and it works perfectly in every Mac browser I try it on (very latest Mac versions of Opera, Firefox, Safari, Chrome, Camino, Omniweb, etc.). There's a white, 1-pixel horizontal spacer/separator line between each link in the left sidebar which is supposed to be 220 pixels wide. It is 220 pixels wide on all the Mac browsers I try it on but for some reason, as soon as I try the web page in IE 7 or IE 8, the white horizontal 1-pixel divider line is shorter and ends up being only 195 pixels wide and throws the whole, nice and "even" look off. I don't understand where the 25 pixels are disappearing to in IE 7 and IE 8.

Can anyone offer any insight as to what the fix may be or what I've done wrong? Below is the code I've used to create the navigation.

Thanks so much.

HTML Code:

Code:

<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Home</A></li>
		<li><a href="#">On To Page 2</A></li>
		<li><a href="#">On To Page 3</A></li>
		<li><a href="#">On To Page 4</A></li>
		<li><a href="#">On To Page 5</A></li>
	</ul>
</div>

CSS Code:

Code:

#navlist  {
	padding-left: 25px;
	margin-left: 0;
	width: 220px;
}
#navlist li  {
	list-style: none;
	margin: 0;
	padding: 0.25em;
	border-top: 1px solid white;
}
#navlist li a  {
	background: transparent url(../images/list_off.gif) left center no-repeat;
	padding-left: 15px;
	text-align: left;
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #277eb1;
	text-decoration: none;
	line-height: 30px;
}
#navcontainer ul li a:hover  {
	background: transparent url(../images/list_on.gif) left center no-repeat;
	color: #da251c;
}
#navcontainer ul li a#current  {
	background: transparent url(../images/list_active.gif) left center no-repeat;
	color: #999999;
}

I'm pretty new to CSS, but I've managed to put together a website based from a psd, that validates and everything has gone well.

My menu, however, is pretty shoddy. I have everything positioned the way I want it, but what I want to do is convert the lists inside from dropping down to being horizontal parallell to the nav bar itself.

From:
--- --- --- ---
|
|
To:
_ _ _
--- --- --- ---



The site is here. Ignore the issues with the absolute positioning; its because of the ads at the top, and it doesn't affect the nav bar.


I am desperatefor some help, it is ridiculous to figure out. Anyone who can help me, I would be crazy grateful. Thanks,

Tom

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
	<head>
	<style type="text/css">
/*BEGINNING OF CSS*/

body{
	padding: 0px;
	background-color: #000000;
	font-family: Verdana;
	color: #FFFFFF;
	text-align: center;
	}
	
	
div.container	{
	margin: 0 auto;
	padding: 0px;
	width: 1024px;
	text-align: left;
	}

div.left {
	float: left;
}

div.right {
	float: right;
}
	
div.logo {
	margin: 0 auto;
	background-position: top center;
	text-align: center;
	}
	
div.header {
	text-align: center;
	padding-top: 0px;
}

div.navigation	{
	background-color: #000000; 
	background-image: url(http://i39.tinypic.com/igm16v.jpg);
	overflow: auto;
}

div.content	{
	background-color: #000000;
	background-image: url(http://i39.tinypic.com/2ce2qus.jpg);
	overflow: auto;
	height: 525px;
	margin: 0 auto;
}

div.footer	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/2vjsbrp.jpg);
	overflow: auto;
	height: 290px;
	padding: 0px;
	margin: 0 auto;
}
	
p.head	{
	text-align: left;
	font-size: 24px;
	}
	
p.content	{
	position: relative;
	font-size: 12px;
}

a.main	{
	text-decoration: none;
	font-size: 18px;
	padding: 8px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.sub	{
	font-size: 16px;
	line-height: 150%;
	text-align: left;
	text-decoration: none;
	color: #999999;
	background-color: transparent;
	}
	
a.plain	{
	text-decoration: none;
	font-size: 12px;
	color: #FFFFFF;
	background-color: transparent;
	}
	
a.plainfoot	{
	text-decoration: none;
	font-size: 12px;
	color: #959595;
	opacity: 90%;
	background-color: transparent;
	border-bottom: 1px solid #0d0f10;
	opacity: 100%;
	}
	
#nav, #nav ul {
	margin: 0 auto;
	padding: 0px;
	list-style: none;
}

#nav a.main {
	display: block;
	margin-left: 5px;
}

#nav a.sub {
	display: block;
	width: 150px;
	margin-left: 5px;
}


#nav li {
	float: left;
	width: 5em;
}
#nav li ul {
	position: absolute;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li ul {
	position: absolute;
	padding: 7px;
	width: 1em;
	left: -999em;
}

#nav li:hover ul {
	left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
	font-family: lucida grand;
}

h1.footer	{
	position: relative;
	font-size: 18px;
	color: #123712;
	margin-bottom: 0%;
	margin-left: 50px;
}

p.footer	{
	font-size: 12px;
	color: #909090;
	margin-left: 50px;
	max-width: 200px;
	text-decoration: none;
}

h1.main	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	padding: 0;
	text-shadow: #959595;
}

p.content	{
	font-size: 12px;
	color: #FFFFFF;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
	
}

div.date	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	margin-top: 17px;
	margin-left: 0px;
}

h1.main2	{
	font-size: 28px;
	font-weight: 200;
	margin-left: 140px;
	text-shadow: #959595;
}

p.content2	{
	font-size: 12px;
	line-height: 130%;
	margin-left: 140px;
	max-width: 450px;
	text-decoration: none;
}

div.date2	{
	background-color: transparent;
	background-image: url(http://i39.tinypic.com/xnc3de.jpg);
	background-repeat: no-repeat;
	padding: 0px;
	min-height: 100px;
	margin: 0px;
}

div.sidebar	{
	background-color: transparent;
	background-image: url(http://i41.tinypic.com/2r76kpu.jpg);
	background-repeat: no-repeat;
	background-position: top right;
	padding: 0px;
	min-height: 200px;
	margin-top: 15px;
	margin-right: 15px;
}



div.datetext1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 262px;
	padding-left: 44px;
}
div.dateid1	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 281px;
	padding-left: 47px;
}
div.datetext2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 12px;
	font-weight: 200;
	color: #FFFFFF;
	left: auto;
	top: 382px;
	padding-top: 44px;
	padding-left: 44px;
}
div.dateid2	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 24px;
	font-weight: 300;
	color: #123712;
	left: auto;
	top: 382px;
	padding-top: 63px;
	padding-left: 47px;
}
div.sidebarhead	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 18px;
	font-weight: 200;
	color: #123712;
	text-align: center;
	left: auto;
	top: 400px;
	padding-top: 15px;
	padding-left: 630px;
}
div.sidebartext	{
	position: absolute;
	background: transparent;
	font-family: verdana, sans-serif;
	font-size: 10px;
	color: #FFFFFF;
	line-height: 130%;
	text-align: left;
	max-width: 168px;
	left: auto;
	top: 400px;
	padding-top: 50px;
	padding-left: 610px;
}




	
/*END OF CSS*/
	</style>
	<script type="text/javascript">
	sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
	</script>
	
<title>Obsidian Recording Front Page</title>
	</head>
<body>
						
<div class="container">
	
	
	<div class="left">
	<img src="http://i39.tinypic.com/14j6nsz.jpg" alt="left column"/>
	</div>
	
	
	<div class="right">
	<img src="http://i40.tinypic.com/b4yir5.jpg" alt="right column"/>
	</div>
	
	
	<div class="logo">
	<img src="http://i40.tinypic.com/2u77lua.jpg" alt="logo"/>
	</div>
	
	
	<div class="header">
	<img src="http://i41.tinypic.com/1178qo6.jpg" alt="header"/>
	</div>
	
	<div class="navigation">
	
	
<ul id="nav">
	
	<li><a class="main" href="http://www.obsidianrecording.com">Home</a></li>
	<li><a class="main" href="#">Music</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/featured">Featured</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists">Artists</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/artists/thisisthefall">My Band</a></li>
		</ul>
		</li>
	<li><a class="main" href="http://www.obsidianrecording.com/design">Design</a></li>
	<li><a class="main" href="#">Store</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/recording">Recording</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/design">Design</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/store/music">Music</a></li>
		</ul>
	</li>
	<li><a class="main" href="#">About</a>
		<ul>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/rates">The Rates</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/studio">The Studio</a></li>
			<li><a class="sub" href="http://www.obsidianrecording.com/about/tomhoneyman">Tom Honeyman</a></li>
		</ul>
	</li>
</ul>	

	</div>
	
	<div class="content"
		<div class="date">
		
		<div class="sidebar"
		<h1 class="main">Cast into Shadows</h1>
		<p class="content">The first band ever to record at Obsidian Recording was Cast into Shadows. I'd like to shout out to Donnie, Evan, Josh, Brian, and J.T. for being the first group to come through here and for making a kickass record along the way. You can find more about them in the Artists section of the site.</p>
		</div>
		</div>
		
		<div class="date2">
		<h1 class="main2">Website Launched!</h1>
		<p class="content2">After a looong time working on this site, I've finally finished just in time for summer!  What you can expect is a lot of updates on what artists who record here are doing, free downloads, cool videos of their shows, special rates just for people who visit the site, and more.  If you'd like  to contact me, all my information and more is in the About section of the site. <br /><br /> Thanks for visiting, and I hope you enjoy!</p>
		</div>
		<div class="datetext1">Jun</div>
		<div class="dateid1">1</div>
		<div class="datetext2">Jun</div>
		<div class="dateid2">7</div>
		<div class="sidebarhead">New Website!</div>
		<div class="sidebartext">Welcome to the all-new Obsidian Recording site! I will regularly update with news, special rates, videos, featured free downloads, and more.</div>
		</div>
	
	<div class="footer">
	<br /><br /><br />
	<h1 class="footer">Recent Projects</h1>
	<p class="footer"><a class="plainfoot" href="www.obsidianrecording.com/artists/castintoshadows">Cast into Shadows</a><br /><br /><a class="plainfoot" href="http://www.obsidianrecording.com/artists/thisisthefall">This is the Fall</a></p>
	</div>

</div>							
</body>
</html>

Hey guys I am currently having an issue with a CSS Navigation. I was wondering if anyone was available to help me out.

http://schoolwide.sgajewski.com/menu/

I am currently having an issue with IE 7. It seems to be working in every other browser but the second level of the navigation is offset lower in IE7. The spacing starts off 1 pixel two low and progressively the gap gets wider.

Code:

ul.vertical, ul.vertical li {
	margin:0;
	padding:0;
	list-style-type:none;
	font-size:100%;
	}

ul.vertical {
	position:absolute;
	z-index:1000;
	cursor:default;
	width:180px;
	left:1em;
	top:4.05em;
	}

ul.vertical li {
	position:relative;
	text-align:left;
	cursor:pointer;
	cursor:hand;
	width:180px;
	margin:-1px 0 0 0;
	padding-bottom:0px!important;
	padding-bottom:1px;
	float:left;
	clear:both;
	top:0;
	left:0;
	}

ul.vertical ul {
	z-index:1020;
	cursor:default;
	position:absolute;
	width:197px;
	margin:0 0 0 179px;
	top:-100em;
	left:-1px;
	padding:1px 0 0 0;
	height:0px;
	overflow:hidden;
	}
	
ul.vertical ul li {
	width:197px;
	
	}

ul.vertical ul ul {
	margin: 0 0 0 179px;
	}

@media Screen, Projection { 
	ul.vertical li:hover > ul { top:0; height:auto; overflow:visible; }
	}

ul.vertical a, ul.vertical a:visited {
	display:block;
	cursor:pointer;
	cursor:hand;
	background:url(images/bg.jpg);
	padding:5px 7px;
	font:normal normal bold 0.7em tahoma, verdana, sans-serif;
	color:#008000;
	text-decoration:none;
	letter-spacing:1px;
	}
	
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
	background:url(images/bg_over.jpg);
	color:#806020;
	}

ul.vertical .outtop {background:url(images/bg_over_top.jpg);}
ul.vertical .outbg {background:url(images/bg_over_mid.jpg);}
ul.vertical .outbot {background:url(images/bg_over_bot.jpg);}

ul.vertical ul a,
ul.vertical ul a:hover,
ul.vertical ul a:visited,
ul.vertical ul a:active
ul.vertical ul a:hover, 
ul.vertical ul a:focus, 
ul.vertical ul a.rollover, 
ul.vertical ul a.rollover:visited

{
background-image:none;
}

@media screen, projection {
	* html ul.vertical li {
		display:inline; 
		f\loat:left; 
		background:#ffffff; 
		}
	}
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }

Any help on why this is offset in IE7 would be great. Thanks in advance.

hi, i was wondering if anyone knw any links to ultra super dooper cool websites for css navigations.

I want to learn how to do ace ones. I have already googleed about, I found the sliding doors on ALA an stuff but i need that little bit more cool

tutorials prefrably!!

I did find one cool one athttp://www.bulkherbstore.com/

thanks
tom.