3 Replies - 1727 Views - Last Post: 10 September 2009 - 08:50 AM

#1 Dannyboy997  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 64
  • View blog
  • Posts: 258
  • Joined: 17-April 09

Navigation bar

Posted 08 September 2009 - 05:36 PM

hi, my css vertical navigation bar does not work in IE, and well i need it to. i'm a firefox fan but the person i'm doing for uses IE:


css code
	#header{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	
	}
	.navtop {
	list-style:none;
	position:absolute;
	padding:0;
	margin: 12px 0 20px 0;
	background:url(http://img.lyceumtech.com/nav_bar.jpg) repeat-x;
	font-size: 0.9em;
	height:40px;
	width:100%;
	text-transform:capitalize;
	border:1px solid #0000000;
	left:0px;
	top:90px;
	font-family:arial;
	color:FFFFFF;
	
	}
	.anavtop  li {
	display: inline;
	
	}
	.anavtop  li a {
	display: block;
	float: right;
	padding: 8.5px 20px;
	color: white;
	text-decoration: none;
	left:100px;
	
	}
	.anavtop  ul{
	margin:2px;padding:2px;
	color:FFFFFF;
	
	}
	.anavtop  ul li {
	display: inline;
	float:right;
	height:37px;
	list-style:none;
	margin-right:20px;
	position:relative;
	color:FFFFFF;
	
	}
	.anavtop  li a {
	color:#FFFFFF;
	text-decoration: none;
	
	}
	.anavtop  li:hover ul{
	display:block;
	width:310px;
	height:140px;
	
	}
	.anavtop  ul li a:hover{
	background: #006245  repeat-x;
	float:right;
	left:0px;
	
	}
	.anavtop  li li{
	list-style:none;
	display:list-item;
	
	}
	.anavtop  li ul{
	margin:1px;
	padding:1px;
	display:none;
	position:absolute;
	left:0px;
	top:32px;
	float:right;
	background: #006245  repeat-x;
	
	}
	.anavtop  li li a:hover {
	text-decoration:underline;
	color:#fff;
	
	}
	
	.navleft{
	list-style:none;
	position:absolute;
	background: #006245;
	font-size: 0.9em;
	text-transform:capitalize;
	border:3px solid #0000000;
	left:0px;
	top:138px;
	height:100%;
	width:200px;
	font-family:arial;
	color:#000000;
	}
	ul.navleft,.navleft ul{
	margin: 0;
	padding:0;
	cursor:default;
	list-style-type:none;
	
	}
	
	ul.navleft{
	width:20ex;
	float:left;
	margin-right:1em;
	color:black;
	margin:0px;
	list-style:none;
	}
	ul.navleft>li{
	margin:0px;
	padding:6px 6px;
	color:black;
	}
	ul.navleft li>ul{
	display:none;
	position:absolute;
	width:20ex;
	left:19ex;
	margin-top: -1.4em;
	margin-left: 9px;
	}
	
	ul.navleft li:hover>ul{
	display:block;
	}
	.navleft ul li a{
	display:block;
	padding: 2px 10px;
	}
	ul.navleft,
	.navleft ul,
	.navleft ul li a{
	background-color:#006245;
	color:#000000;
	}
	ul.navleft li:hover,
	.navleft ul li a:hover{
	background-color: #FFFFFF;
	color:#000000;
	}
	.navleft li a:hover {
	color:#000000;
	
	}
	ul.navleft li:active,
	.navleft ul li a:active{
	background-color: #006245;
	color: #000000;
	
	}
	.navleft ul{
	border: 1px solid #000000;
	}
	.navleft a{
	text-decoration:none;
	
	}
	#sidebar1{
	background:url(http://img.lyceumtech.com/sidebar1.png) no-repeat;
	left:0px;
	top:137px;
	border:4px solid #006245;
	width:130px;
	height:600px;
	text-transform:capitalize;
	position:absolute;
	list-style:none;
	padding:0;
	margin: 10px 0 20px 0;
	}
	#content{
	position:absolute;
	afont-family:arial;
	color:#0000000;
	size:0.9em;
	left:200px;
	float:left;
	top:250px;
	}
	ah4{
	color:#2E2E2E;
	font-family:BankGothic Lt Bt;
	
	}
	#username{
	text-align:left;
	color:grey;
	font-family:arial;
	
	}
	#footer{
	position:absolute;
	left:250px;
	top:800px;
	}
	





index.php

<ul id="navleft">
	<li><a href="#">Home</a>
		
	<li><a href="#">Background</a></li>
	
	<li><a href="#">Services</a></li>
			
		<ul>
			
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
		
		</ul>
		
	</li>


	<li><a href="#">Contact Us</a>
		

</ul>





so i'm not sure whats going on but please tell me what i can do to fix it!!!!

This post has been edited by Dannyboy997: 08 September 2009 - 05:37 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Navigation bar

#2 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Navigation bar

Posted 09 September 2009 - 08:24 AM

Well before I go crazy trying to fix this, please give me the IE version and what exactly is happening with the navigation, that it isn't working correctly. Thanks.

*** ON TOPIC ***

I have noticed though sometimes in IE that having display:inline and display:block being used on the same list throws some versions of IE out of wack. Try turning one of them off and see if that fixes it somewhat. Then turn the other off, if I remember I had to come up with a workaround, like using float:left to achieve the inline result.
 .anavtop  li {
	display: inline;   
	}
	.anavtop  li a {
	display: block;
 


Hope that helps.

--

Greg
Was This Post Helpful? 0
  • +
  • -

#3 Dannyboy997  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 64
  • View blog
  • Posts: 258
  • Joined: 17-April 09

Re: Navigation bar

Posted 09 September 2009 - 05:30 PM

sorry the top of the first file is wrong here is where the navigation bar code starts:

.navleft{
	list-style:none;
	position:absolute;
	background: #006245;
	font-size: 0.9em;
	text-transform:capitalize;
	border:3px solid #0000000;
	left:0px;
	top:148px;
	height:100%;
	width:200px;
	font-family:arial;
	color:#000000;
	}
	ul.navleft,.navleft ul{
	margin: 0;
	padding:0;
	cursor:default;
	list-style-type:none;
	
	}
	
	ul.navleft{
	width:20ex;
	float:left;
	margin-right:1em;
	color:black;
	margin:0px;
	list-style:none;
	}
	ul.navleft>li{
	margin:0px;
	padding:6px 6px;
	color:black;
	}
	ul.navleft li>ul{
	display:none;
	position:absolute;
	width:20ex;
	left:19ex;
	margin-top: -1.4em;
	margin-left: 9px;
	}
	
	ul.navleft li:hover>ul{
	display:block;
	}
	
	.navleft li ul:hover{
	display:block;
	
	}
	
	.navleft  li ul{
	display:none;
	}
	.navleft ul li a{
	display:block;
	padding: 2px 10px;
	}
	ul.navleft,
	.navleft ul,
	.navleft ul li a{
	background-color:#006245;
	color:#000000;
	}
	ul.navleft li:hover,
	.navleft ul li a:hover{
	background-color: #FFFFFF;
	color:#000000;
	}
	.navleft li a:hover {
	color:#000000;
	
	}
	ul.navleft li:active,
	.navleft ul li a:active{
	background-color: #006245;
	color: #000000;
	
	}
	.navleft ul{
	border: 1px solid #000000;
	}
	.navleft a{
	text-decoration:none;
	
	}



so the id of the navigation bar is .navleft:


and i'm using IE 8 and what happended is that when the site loaded the sub tabs where showing right there under one of the main tabs. so when i put my mouse over one of the main tabs nothing hovers on the right of the navigation bar...


but it works perfectly in firefox!!
Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth  Icon User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: Navigation bar

Posted 10 September 2009 - 08:50 AM

Well your problem is you're using a class not an ID - you keep calling it an ID but your css is calling it a class. In CSS a class is represented with a . and an ID is represented with a # symbol. So your CSS should be:

#navleft{
	list-style:none;
	position:absolute;
	background: #006245;
	font-size: 0.9em;
	text-transform:capitalize;
	border:3px solid #0000000;
	left:0px;
	top:148px;
	height:100%;
	width:200px;
	font-family:arial;
	color:#000000;
	}



Or change the word ID to class in your html.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1