Working in FF but not IE?

Discussion in 'CSS' started by le007, Oct 1, 2007.

0
  1. #1
    Whats the deal or no deal with this? Why is it working in FF but not IE pls?

    <html>
<!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;
	display: block;
	height: 2em;
	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):

     
    le007, Oct 1, 2007 IP
  2. krt

    krt Well-Known Member

    Messages:
    829
    Likes Received:
    38
    Best Answers:
    0
    Trophy Points:
    120
    #2
    display: block on the <a> element

    BTW, please describe the problem so we don't have to find it out ourselves.
     
    krt, Oct 1, 2007 IP
  3. le007

    le007 Well-Known Member

    Messages:
    481
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #3
    Ok I will do.

    I took out the display: block from the <a> element and now its working nicely in IE but not in FF.
    The LI is meant to move down 4px when hovered...
     
    le007, Oct 1, 2007 IP