pasztet015
New Member
Hi there i had a nav bar which was working perfectly. Then i added a lightbox effect. Both work perfectly however in my css they are messing up. When i added some css to lightbox effects to the div it messes up my navigation bar. I think its something to do with the \[code\]a\[/code\] tag. My code is below Html:\[code\]<div id="nav"> <ul> <li><a href="http://stackoverflow.com/questions/15800054/#home">Home</a></li> <li><a href="http://stackoverflow.com/questions/15800054/#news">Regsiter</a></li> <li><a href="http://stackoverflow.com/questions/15800054/#contact">Rules</a></li> <li><a href="http://stackoverflow.com/questions/15800054/#about">Photo's</a></li> <li><a href="http://stackoverflow.com/questions/15800054/#about">Contact Us</a></li> </ul> </div><div class = "lightbox"> <a href="http://stackoverflow.com/questions/15800054/images/image1.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image1t.jpg" /></a> <a href="http://stackoverflow.com/questions/15800054/images/image2.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image2t.jpg" /></a> <a href="http://stackoverflow.com/questions/15800054/images/image3.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image3t.jpg" /></a> <a href="http://stackoverflow.com/questions/15800054/images/image4.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image4t.jpg" /></a> <a href="http://stackoverflow.com/questions/15800054/images/image5.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image5t.jpg" /></a> <a href="http://stackoverflow.com/questions/15800054/images/image6.jpg" rel="lightbox[group]"><img src="http://stackoverflow.com/questions/15800054/images/image6t.jpg" /></a></div>\[/code\]CSS:\[code\]#nav ul{ list-style-type:none; margin:0; padding:0; overflow:hidden;}#nav ul li{ float:left;}#nav a:link,a:visited{ display:block; width:163.2px; height: 35px; font-weight:bold; color:#FFFFFF; background-color:#181818; text-align:center; text-decoration:none; text-transform:uppercase; line-height: 35px;}#nav ul li a:hover{ background-color:#989898;}\[/code\]//Below is the lightbox CSS\[code\]a{ border:3px solid #ccc; display:block; float:left; margin:10px;}a img{ margin:3px;}a:hover{ border:3px solid #666;}img{ display:block;}\[/code\]Like i said. If i delete the light box CSS the nav bar works fine. When i add it, the border on the nav bar and everything changes. I think it something to do with them both having the \[code\]a\[/code\] tag but not sure. Thanks for the help.