The li menu is meant to move down 4px when hovered... it works in IE but not FF? Same problem except its working in IE now not FF, I took out display: block; from a tag. Any ideas? Thanks <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> ul#navlist { white-space: nowrap; font-family: arial; font-size:12px; font-style:strong; } #navlist li { display: inline; list-style-type: none; float: left; margin-right: 2px; } #navlist a { padding: 0 11px; height: 4em; line-height: 2em; margin: 0 0 4px; background-color: #99FFFF; color: #2689BC; text-decoration: none; } #navlist a:hover { margin-top: 60; color: #fff; background-color: #369; text-decoration: underline; margin: 4px 0 0; } </style> </head> <div id="navcontainer"> <ul id="navlist"> <li id="active"> <a href="index.html" title="home" id="current" >HOME</a></li> <li><a href="test" >test</a></li> <li><a href="test" >test</a></li> <li><a href="test" >test</a></li> <li><a href="test">test</a></li> <li><a href="test">test</a></li> <li><a href="test">test</a></li> </ul> </div> Code (markup):
Do you have this page hosted somewhere so I can see it? There are even some websites out there where if you input your code, it could find conflicts between browsers. I think if you're even using an updated dreamweaver, there's a place to check for browser conflicts. What's the program you're using?
dancom96 Thanks for that buddy but now its working fine in FF but not IE???????????? Viperjts10 Thanks for the help but I program myself, I don't use programs like dreamweaver etc.
Man, I can't even see what dan did. Oh no wait, the margins... wtf is it with browsers adding margins? So let's try adding a universal reset: * {margin: 0; padding: 0;} at the beginning and another within the first li (because sometimes I still get padding from the browser inside the list even with the reset). I'll have to load this up in a file so I can see what it is, maybe at work today.
Hey everyone, still not working by a long shot - is my code completely off or what? It works in FF, doesnt work in IE then I change something and its vice versa, any suggestions or examples? I'm just trying to get the li element to move down about 4px when hovered!
AFTER A LONG TIME... Its working! For anyone who may want something similar, I'll post the code below: <!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>Test</title> <style type="text/css"> #nav ul { white-space: nowrap; font-family: arial; font-size:12px; list-style:none; } #nav li { float: left; margin-right: 2px; } #nav a, #nav .active { padding: 0 11px; height: 2em; float:left; line-height: 2em; margin: 0 0 4px; background-color: #000000; color: white; text-decoration: none; } #nav a:hover { margin-top: 60; color: #fff; background-color: #369; margin: 4px 0 0; } #nav .active { background: #369; margin: 0 2px 0 0; } </style> </head> <body> <div id="nav"> <ul> <li class="active">HOME</li> <li><a href="test" >test</a></li> <li><a href="test" >test</a></li> <li><a href="test" >test</a></li> <li><a href="test">test</a></li> <li><a href="test">test</a></li> <li><a href="test">test</a></li> </ul> </div> </body> </html> Code (markup):