Autor Zpráva
dr.m
Profil *
prosím o pomoc.. hover menu absolutně pozicované se v MSIE 5/6 nezobrazí korektně - po najetí na prostřední link 'DESIGNÉŘI' viz kód se 3 paralelní sloupce menu 2.úrovně rozbalí zdrcnuté do sebe. FF, Opera, IE7 a Safari(Mac) bez problému.
(www.studio-lr.com/000menu.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Studio LR</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<meta name="content-language" content="cz">
<style type="text/css">
body {
	margin:0;
	padding:0;
	color:#666
}
body * {
	line-height:115%
}
html, body {
	height:100%
}
body, textarea, select {
	font:small "Lucida Grande", "Geneva CE", Verdana, lucida, sans-serif
}
* html body, h6 {
	font-size:x-small;
	f\ont-size:small
}
a {
	text-decoration:underline;
	color:#999
}
a:hover {
	text-decoration:underline;
	color:#f60
}
h1 a {
	text-decoration:none;
	color:#737373
}
h1 {
	margin-bottom:1em;
	font-size:14px;
	color:#999
}
h2, h3, h4, h5, h6, h7 {
	margin-bottom:0.5em;
	color:#999
}
h2 {
	font-size:13px
}
h3 {
	font-size:85%;
	font-weight:normal
}
.clr {
	clear:both;
	height:0px;
	font-size:1px;
	overflow:hidden
}
#page {
	background:url(http://www.studio-lr.com/img/bg-page.gif) no-repeat
}
#central {
	width:900px;
	margin:0 auto;
}
#header1 {
	float:left;
	width:120px;
	height:134px;
	background:#838383 url(http://www.studio-lr.com/img/pan1.gif)
}
#header2 {
	float:left;
	height:134px;
	width:660px
}
#header3 {
	float:right;
	width:120px;
	height:190px
}
#header2, #hoverMenu, #right, #foot {
	background:white
}
#logo {
	float:left;
	width:120px;
	height:56px;
	background:url(http://www.studio-lr.com/img/logo.gif)
}
#hoverMenu {
	float:left;
	height:56px;
	width:660px
}
#content {
	clear:both;
	background:url(http://www.studio-lr.com/img/bg-content.gif) repeat-y
}
#left {
	float:left;
	width:100px;
	padding:10px
}
#right {
	float:left;
	width:486px;
	padding:10px 12px
}
* html #right {
	width:510px;
	wid\th:486px
}
#edge {
	float:left;
	width:130px;
	padding:10px;
	font-size:77%
}
* html #edge {
	width:150px;
	wid\th:130px
}
#foot {
	padding:10px 10px 10px 132px;
	font-size:11px;
	background:url(http://www.studio-lr.com/img/bg-foot.gif) no-repeat
}
#edge a, #left a {
	color:#f60;
}
p {
	margin-bottom:0.5em
}
h3 p {
	margin-bottom:5em
}
.item {
	padding-bottom:1.5em;
	clear:both
}
.il {
	float:left;
	margin:0.15em 0.5em 0.25em 0;
	border:1px solid #999
}
/* HOVER MENU.................................................................. .................................................  */
#mainMenu {
	font-weight:bold;
	padding:0;
	margin:0;
	float:left;
	display:block;
	position:relative;
	list-style-type:none
}
#mainMenu ul {
	z-index:20;
	padding:0;
	margin:0;
	line-height:1;
	list-style-type:none
}
#mainMenu a {
	color:#999;
	text-decoration:none;
	white-space:nowrap
}
#mainMenu ul a {
	color:#ccc;
	padding-bottom:0.2em;
	font-size:11px;
	line-height:100%
}
#mainMenu ul a:hover {
	color:#f60
}
li#studio {
	position:absolute;
	left:13px
}
li#program {
	position:absolute;
	left:103px
}
li#designeri {
	position:absolute;
	left:210px
}
li#workshop {
	position:absolute;
	left:327px
}
li#lr {
	position:absolute;
	left:547px
}
li#en {
	position:absolute;
	left:644px
}
li#studio ul, li#program ul, li#designeri ul, li#designeri ul ul, li#workshop ul, li#lr ul {
	bottom:1.2em
}
/* ...................................................................... .............................................  */
#mainMenu a {
	display:block;
	width:10em
}
#mainMenu li {/* all list items */
	float:left;
	width:10em
}
#mainMenu li ul {/* second-level lists */
	position:absolute;
	background:url(http://www.studio-lr.com/img/spacer.gif);
	width:10em;
	left:-999em
}
#mainMenu li:hover ul, #mainMenu li li:hover ul, #mainMenu li.sfhover ul, #mainMenu li li.sfhover ul {/* lists nested under hovered list items */
	left:auto
}
#mainMenu li:hover ul#designeri2 {
	left:10em
}
#mainMenu li:hover ul#designeri3 {
	left:20em
}
/* ...................................................................... .............................................  */
#mainMenu li ul ul {/* third-and-above-level lists */
	margin:0 0 0 7.7em;
	bottom:0
}
#mainMenu li:hover ul ul, #mainMenu li.sfhover ul ul {
	left:-999em
}
</style>
<script type="text/javascript">
sfHover = function() {
	var sfEls = document.getElementById("mainMenu").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="page">
  <div id="central">
    <!-- ................................................................ -->
    <div id="header1"></div>
    <div id="header2">
      <object type="application/x-shockwave-flash" data="http://www.studio-lr.com/head.swf?po=13" width="660" height="134">
        <param name="movie" value="http://www.studio-lr.com/head.swf?po=13">
        <param name="wmode" value="transparent">
        <img src="http://www.studio-lr.com/img/pan2.jpg" width="660" height="134" border="0" alt="No Flash">
      </object>
    </div>
    <div id="header3"><img src="http://www.studio-lr.com/img/spacer.gif" width="120" height="120" border="0" alt=""></div>
    <div id="logo"><a href="#"><img src="http://www.studio-lr.com/img/logo.gif" width="120" height="56" border="0" alt="Studio LR"></a></div>
    <div id="hoverMenu">
      <ul id="mainMenu">
        <li id="studio"><a href="#" title="aktuality Studia LR">studio</a>
          <ul>
            <li><a href="#">pododkaz</a></li>
          </ul>
        </li>
        <li id="program"><a href="#" title="program 2008">program</a>
          <ul>
            <li><a href="#">pododkaz</a></li>
          </ul>
        </li>
        <li id="designeri"><a href="#" title="designéři">designéři</a>
          <ul id="designeri1">
            <li><a href="#">pododkaz 1</a></li>
          </ul>
          <ul id="designeri2">
            <li><a href="#">pododkaz 2</a></li>
          </ul>
          <ul id="designeri3">
            <li><a href="#">pododkaz 3</a></li>
          </ul>
        </li>
        <li id="workshop"><a href="#" title="aktuality workshop">workshop Farma Olšany</a>
          <ul>
            <li><a href="#">pododkaz</a></li>
          </ul>
        </li>
        <li id="lr"><a href="#">LR style</a>
          <ul>
            <li><a href="#">LR style</a></li>
          </ul>
        </li>
        <li id="en"><a href="#">en</a></li>
      </ul>
      <div class="clr"></div>
    </div>
    <!-- ................................................................ -->
    <div id="content">
      <!-- .............................. -->
      <div id="left"></div>
      <!-- .............................. -->
      <div id="right">
        <div class="item">.......................... </div>
      </div>
      <!-- .............................. -->
      <div id="edge">.......................... </div>
    </div>
    <div class="header3"><img src="http://www.studio-lr.com/img/spacer.gif" width="120" height="120" border="0" alt=""></div>
    <!-- .............................. -->
    <div class="clr"></div>
    <!-- ................................................................ -->
    <div id="foot">
      <p>.......................... </p>
    </div>
  </div>
</div>
</body>
</html>
Davex
Profil
IE6- umí pseudo třídu :hover pouze u odkazů.
dr.m
Profil *
právě, proto je tam ten javascript.. nemusí se v něm něco upravit, aby to fungovalo i pro IE 5/6? programovat js bohužel neumím.
Davex
Profil
Odpovídající definici stylu tam nevidím.

#mainMenu li.sfhover ul#designeri2
#mainMenu li.sfhover ul#designeri3
dr.m
Profil *
jasně, chybka se vloudila,) díky za pomoc..

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0