Please help - I am going insane!

[janesta]

Ok, relatively new at coding. Trying to get a CSS drop down menu to work in IE and no matter what I do it still appears vertically instead of horizontally!
I have read so many help sites and tutorials and tried to implement their suggestions but I am obviously missing something. Can someone please help me cause I don't know what else to do

Thank you...

}


ul.nav-main,
ul.nav-main li {
	list-style: none;
	margin: 0;
	padding: 0;
	display:inline-block;
}


ul.nav-main {
	position: relative;
	z-index: 597;
	float:left
}

ul.nav-main li:hover > ul {
	visibility: visible;
}


ul.nav-main li.hover,
ul.nav-main li:hover {
	position: relative;
	z-index: 599;
	cursor: pointer;
	background: url(images/dropdown-bg-hover.gif) repeat-x left top;
}



ul.nav-main li {
	float:left;
	display:block;
	height: 51px;
	color: #999;
	font: 14px Arial, Helvetica, sans-serif;
	background: url(images/separator.gif) no-repeat right center;
}

ul.nav-main li a {
	display:block;
	padding: 16px 16px 0 16px;
	height: 35px;
	color: #999;
	font: 14px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

ul.nav-main li a:hover {
	color:#D6D6D6;
}



ul.nav-main *.list {
	padding-right: 22px;
	background: url(images/navigation-arrow.gif) no-repeat right top;
}



ul.nav-sub {
	visibility: hidden;
	position: absolute;
	padding:10px;
	top: 48px;
	left: 0;
	z-index: 598;
	background: #353535 url(images/dropdown-list-bg.gif) repeat-x left top;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;
	border-left: 1px solid #000;
}


ul.nav-sub li {
	list-style:none;
	display:block;
	padding: 0;
	height: 27px;
	float: none;
	width:145px;
	border-bottom: 1px solid #5a5a5a;
	background: none;
}

ul.nav-sub li a {
	list-style:none;
	display:block;
	padding: 6px 5px 6px 5px;
	height: 15px;
	float: none;
	width:145px;
	background: none;
	font: 12px Arial, Helvetica, sans-serif;	
}

<ul id="navigation" class="nav-main">
	<li><a href="http://www.psdgraphics.com/">Home</a></li>
    
    <li class="list"><a href="#">Freebies</a>
	<ul class="nav-sub">
    <li><a href="http://www.psdgraphics.com/category/backgrounds/">Backgrounds</a></li>
		<li><a href="http://www.psdgraphics.com/category/buttons/">Buttons</a></li>
		<li><a href="http://www.psdgraphics.com/category/graphics/">Graphics</a></li>
		<li><a href="http://www.psdgraphics.com/category/html-css/">HTML & CSS</a></li>
		<li><a href="http://www.psdgraphics.com/category/icons/">Icons</a></li>
		<li><a href="http://www.psdgraphics.com/category/psd/">PSD</a></li>
		<li><a href="http://www.psdgraphics.com/category/templates/">Templates</a></li>
		<li><a href="http://www.psdgraphics.com/category/tutorials/">Tutorials</a></li>    
	</ul>
	</li>
    
    <li class="list"><a href="#">About</a>
	<ul class="nav-sub">
    <li><a href="http://www.psdgraphics.com/about/">About PSDGraphics</a></li>
 		<li><a href="http://www.psdgraphics.com/commercial-use/">Commercial Use</a></li>
		<li><a href="http://www.psdgraphics.com/about/terms-of-use/">Terms Of Use</a></li>
	</ul>
	</li>
    
    <li><a href="http://www.psdgraphics.com/advertise/">Advertise</a></li>
    <li><a href="http://www.psdgraphics.com/contact/">Contact</a></li>
    

</ul>

 

[ronaldroe]

So, I put the code you posted in a jsfiddle. Unless I'm missing something, that menu looks fine.

If it looks right in the JSFiddle, but wrong on your site, something else is overwritting your rules. It probably comes after the styles you posted.

 

[Phreaddee]

maybe the frontpage guy should look at jsfiddle

 

[janesta]

Hi, thanks for replying. I went to jsfiddle and your correct that it all looks fine, which is how it displays in Safari, Chrome and Firefox, but in IE it is vertically aligned instead of horizontally.
Is jsfiddle showing me how it SHOULD be looking in IE, therefore it defo is something else wrong with my code as you suggest or do I need to add/remove something to the code to get it to display correctly in IE?
Sorry, but this has really got me beat - I can usually get stuff to work by playing around with it, but I have hit a brick wall with this one.

 

[ronaldroe]

I'm looking at the jsfiddle in IE8, and it looks fine. That's why I'm thinking it might be something else in your code somewhere that's overwriting the rules for the nav.

 

[Phreaddee]

a stab in the dark could be the doctype isnt set on your page and ie is going into "quirks mode"...
if when isolated the menu works in IE then it clearly doesnt have an issue with its coding
so therefore it must be a problem within the rest of the document
(probably before the menu as well)

OR there is a general unordered list style that has been written that comes later on within your css...

 

[janesta]

a stab in the dark could be the doctype isnt set on your page and ie is going into "quirks mode"...
if when isolated the menu works in IE then it clearly doesnt have an issue with its coding
so therefore it must be a problem within the rest of the document
(probably before the menu as well)

Hey guys, thanks for your responses. Ronald had a look over it for me and noticed that I had not put the doctype in at the top of the HTML. Me silly.
All working normally now.
Thanks for all the help