У меня есть этот HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href="style2.css" type="text/css" media="screen, projection" />
</head>
<body class="custom">
<div id="container">
<div id="page">
<ul class="menu">
<li class="tab current"><a href="ind1.html">Home</a></li>
<li class="tab"><a href="ind2.html">About</a></li>
<li class="tab"><a href="ind3.html">Contact</a></li>
<li class="tab"><a href="ind4.html">Privacy</a></li>
<li class="tab"><a href="ind5.html"><img src="basket.gif" width="17" height="13" /> Basket</a></li>
</ul>
</div>
</div>
</body>
</html>
и этот CSS:
* { padding: 0; margin: 0; }
body { font-size: 62.5%; color: #111111; background: #FFFFFF; font-family: Georgia, "Times New Roman", Times, serif; }
#container { width: 92.1em; margin: 0 auto; }
#page { background: #FFFFFF; padding: 2.2em; }
.menu ul, .menu ul li { width: 15em; line-height:100%;}
.menu ul ul, .menu :hover ul :hover ul { left: 14.9em; }
.menu { border-width: 0; }
.menu, .menu a { border-color: #DDDDDD; }
.menu { position: relative; list-style: none; z-index: 50; }
.menu li { position: relative; float: left; }
.menu ul { position: absolute; visibility: hidden; list-style: none; z-index: 110; }
.menu ul li { clear: both; }
.menu a { display: block; }
.menu li { margin-bottom: -0.1em; }
.menu a { font-size: 1.1em; line-height: 2.273em; padding: 0.636em 0.818em; border-width: 0.091em; border-left-width: 0; }
.menu .current a { border-bottom-color: #FFFFFF; }
.menu ul .current a, .menu .current ul a { border-bottom-color: #DDDDDD; }
.menu a, .menu .current ul a { color: #111111; background: #EFEFEF; }
.menu a:hover, .menu .current ul a:hover { color: #111111; background: #DDDDDD; }
.menu .current a, .menu .current a:hover { color: #111111; background: #FFFFFF; }
.menu .current > a { cursor: text; }
.menu a{ color: #111111; background: #EFEFEF; }
.menu a:hover{ color: #111111; background: #DDDDDD; }
.menu, .menu a, .menu li ul { border-style: solid; }
.menu a { text-transform: uppercase; letter-spacing: 2px; }
.menu a:hover { height: auto; }
#content { overflow: hidden; }
Работает на 100% правильно в Firefox и Chrome. В Internet Explorer 6.0 я получаю ошибку: когда вкладка «Корзина» имеет меньшую высоту, чем остальные четыре вкладки (в этом коде есть тег <IMG>)
Как решить эту ситуацию?