...

View Full Version : Vladdy menu problem with Mozilla



castali
04-27-2004, 07:24 PM
I have joined a zip with Vladdy menu Horizontal

it works perfectly for IE6 but not at all for Mozilla1.6 (firefox)

onmouseover it is impossible to keep the selection if you have the menu in another div (header)

it works because of htc file for IE

if anyone can fix it for Mozilla ....

it could be the best menu :-))

castali
04-29-2004, 10:03 AM
here is the full code .. you have just to copy paste and you can see the problem in mozilla1.6 and IE6


<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" xml:lang="fr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Vladdy menu</title>
<style type="text/css" title="">
<!--
html,body,form,#Header,#MenuG,#Contenu
{
margin:0;
padding:0;
border:0;
text-align:center;
vertical-align:top;
}
html,body,form
{
width:100%;
height:100%;
overflow:hidden;
}
body
{
font-family:Verdana,arial;
font-size:10px;
font-style:normal;
font-weight:400;
background:#F6F7EB;
color:#F6F7EB;

scrollbar-face-color:#1C516E;
scrollbar-shadow-color:#1C516E;
scrollbar-highlight-color:#1C516E;
scrollbar-3dlight-color:#1C516E;
scrollbar-darkshadow-color:#1C516E;
scrollbar-track-color:#1C516E;
scrollbar-arrow-color:#F6F7EB;
}
#Header
{
height:6%;
width:100%;
background-color:#1C516E;
color:#F6F7EB;
vertical-align:middle;
z-index:2;
}
#MenuG
{
width:12%;
height:94%;
float:left;
overflow:hidden;
background-color:#1C516E;
color:#F6F7EB;
z-index:1;
}
#Contenu
{
width:88%;
height:94%;
float:right;
overflow:auto;
background-color:tan;
color:#1C516E;
z-index:0;
}
#mulNav li
{
behavior:url('IEHover.htc');
}
#mulNav
{
border:solid #1C516E 1px;
background:ivory;
padding:0 0 0 0.2em;
margin:0 0.2em 0 0;
text-align:center;
vertical-align:middle;
}
.mulNavN
{
width:100px;
height:auto;
}
.mulNavH
{
width:100px;
height:auto;
float:left;
}
#mulNav a
{
width:100%;
display:block;
}

#mulNav ul
{
display:block;
margin:0;
padding:0;
width:100%;
text-align:left;
}

#mulNav li
{
display:block;
list-style:none;
padding:0.5em 0 0 0.5em;
margin:0;
min-height:15px;
height:18px;
width:98%;
vertical-align:middle;
}
#mulNav->li
{
padding:0.5em 0 0 0.5em;
}

#mulNav li:hover, #mulNav li.hover
{
background:#E5C07A;
}
#mulNav ul.mulSub0, #mulNav ul.mulSub1, #mulNav ul.mulSub2, #mulNav ul.mulSub3, #mulNav ul.mulSub4
{
position:absolute;
margin:-2px 0px 0px 20px;
border:solid #1C516E 1px;
padding:0;
background:ivory;
width:200px;
display:none;
}

#mulNav ul.mulRoot li:hover ul.mulSub0, #mulNav ul.mulRoot li.mulHassubhover ul.mulSub0
{
display:block;
}

#mulNav ul.mulSub0 li:hover ul.mulSub1, #mulNav ul.mulSub0 li.mulHassubhover ul.mulSub1
{
display:block;
}

#mulNav ul.mulSub1 li:hover ul.mulSub2, #mulNav ul.mulSub1 li.mulHassubhover ul.mulSub2
{
display:block;
}
#mulNav ul.mulSub2 li:hover ul.mulSub3, #mulNav ul.mulSub2 li.mulHassubhover ul.mulSub3
{
display:block;
}
#mulNav ul.mulSub3 li:hover ul.mulSub4, #mulNav ul.mulSub3 li.mulHassubhover ul.mulSub4
{
display:block;
}
#mulNav li.mulHassub
{
background:url('plus.gif') no-repeat 94% 50% ;
}
#mulNav li.mulHassub:hover, #mulNav li.mulHassubhover
{
background:url('plush.gif') no-repeat 98% 50% ;
}
-->
</style>
</head>
<body>
<form name="MainForm" method="post" action="index.htm" id="MainForm">
<div id="Header">
<div id="mulNav" class="mulNavH">
<ul class="mulRoot">

<li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 1</a>
<ul class="mulSub0">

<li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >A 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End A 1 -->
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >B 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End B 1 -->
<li class="mulSub"><a class="mulLink" href="#" >C 1</a>
</ul><!-- End mulSub0 -->
</li><!-- End A B niv0 -->

</ul><!-- End mulRoot -->
</div><!-- End mulNav -->

<div id="mulNav" class="mulNavH">
<ul class="mulRoot">

<li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 2</a>
<ul class="mulSub0">

<li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >A 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End A 1 -->
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >B 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End B 1 -->
<li class="mulSub"><a class="mulLink" href="#" >C 1</a>
</ul><!-- End mulSub0 -->
</li><!-- End A B niv0 -->

</ul><!-- End mulRoot -->
</div><!-- End mulNav -->

</div>
<div id="MenuG">
<div id="mulNav" class="mulNavH">
<ul class="mulRoot">

<li class="mulHassub"><a class="mulHassubLink" href="#" >Menu 3</a>
<ul class="mulSub0">

<li class="mulHassub"><a class="mulHassubLink" href="#" >A 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >A 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >A 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End A 1 -->
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 1</a>
<ul class="mulSub1">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 2</a>
<ul class="mulSub2">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 3</a>
<ul class="mulSub3">
<li class="mulHassub"><a class="mulHassubLink" href="#" >B 4</a>
<ul class="mulSub4">
<li class="mulSub"><a class="mulLink" href="#" >B 5</a>
</ul>
</li><!-- End mulSub4 -->
</ul>
</li><!-- End mulSub3 -->
</ul><!-- End mulSub2 -->
</li><!-- End mulSub2 -->
</ul><!-- End mulSub1 -->
</li><!-- End B 1 -->
<li class="mulSub"><a class="mulLink" href="#" >C 1</a>
</ul><!-- End mulSub0 -->
</li><!-- End A B niv0 -->

</ul><!-- End mulRoot -->
</div><!-- End mulNav -->
</div>
<div id="Contenu">
Content
</div>
</form>
</body>
</html>

Vladdy
04-29-2004, 06:28 PM
I would not attempt to debug it until you use strict Doctype :thumbsup:

castali
04-29-2004, 07:31 PM
with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

or

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

same bug for IE and Mozilla

castali
05-01-2004, 09:20 AM
here is the link >>> http://free.networkthai.net/x/castali/

Vladdy
05-01-2004, 03:00 PM
If you use overflow:auto(or scroll) on underlying blocks, use position:fixed for the menu - that will fix it.

castali
05-01-2004, 03:59 PM
no it change nothing for IE or for Mozilla , I tried it allready before

position absolute or fixed (Ie doesn't like fixed)

and if I remove overflow everywhere I am loosing all the advantage of div structure in stead of frameset .....

I like really your CSS menu with only a small htc for iE but I think I cannot solve that problem .... then the only "clever" menu working is brainjar menu ...

Vladdy
05-01-2004, 04:18 PM
You said the problem was with Moz only - so the fact that position:fixed does not work in IE is irrelevant.
FYI: There is no advantage to making divs behave as a frameset by setting overflow to auto, but quite a few disadvantages.
If you must, setting navigation position to fixed does fix the problem (once you have valid HTML).

castali
05-01-2004, 04:38 PM
no even for mozuilla + fixed doesn't change anything

and yes they are a lot of advantages to have overflow hidden and fixed header and overflow auto on the rest of content to keep allways menu on top

and my XHTML (very simple) IS valid

Vladdy
05-01-2004, 05:07 PM
http://validator.w3.org/check?uri=http%3A%2F%2Ffree.networkthai.net%2Fx%2Fcastali%2Fvladdy.htm&charset=%28detect+automatically%29&doctype=Inline&verbose=1

User can always scroll to the top to get to your menu. However if you start using scrollable blocks, you take away users ability to use keyboard for scrolling. That is a bigger convinience/accessibilityproblem.
Also if user has a small screen that does not fit your menu/header, there is no way they can get to the clipped items.

castali
05-01-2004, 05:22 PM
I know anyway a allways on top hearder menu is very practicle ... the problem is a CSS problem not a practicle problem

the worst from far is a frameset

Vladdy
05-01-2004, 05:26 PM
Until you have valid (X)HTML it is (X)HTML problem, since CSS properties can not be applied correctly.

http://www.vladdy.net/Demos/CSSNavFixed.html

That is what position: fixed is for - it allows to have an element constantly in the viewport without affecting the scrolling of the rest of the content. (use your favourite hack for IE)

castali
05-01-2004, 05:34 PM
yes your page is very good with firefox , but how do you get the same for IE ?

my favorite hack ??

Vladdy
05-01-2004, 05:39 PM
Use your favourite CSS hack to give IE and real browsers different CSS:
for example:
/*IE*/
#nav
{ position: absolute;
}

/* Real Browsers */
body>#nav
{ position: fixed;
}

EDIT: Linked file in the prev. post updated

castali
05-01-2004, 05:47 PM
very good ! it works fine and I can even add a overflow:hidden to the boddt if I want to keep a header on top


another problem I add is to display your menu horizontaly .. the only way I found is <div id="nav">Menu 1</div> <div id="nav">Menu 2</div> <div id="nav">Menu 3</div>
with a float:left for #nav

have you a better idea ?

thanks a lot

castali
05-01-2004, 09:49 PM
for Horizontal render I have put as many ul.root as main menu items with a >>>
#nav .root
{
float:left;
}


http://free.networkthai.net/x/castali/indexH.htm

Vladdy
05-01-2004, 10:22 PM
Looks Good.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum