PDA

Click to See Complete Forum and Search --> : UL LI Menu CSS IE VS FF!! Help Plz.

fdoze
07-27-2007, 11:49 AM
Hi,

I'm building a CSS Menu. The problem is that sub-menu.

Firefox does not seem to get the CSS. IE looks fine.

Here is my code:
CSS:

#menuitems, #menuitems ul {
margin-left: 0px;
padding-left: 0px;
/* list-style-position: outside; */
list-style-image: none;
list-style-type: none;
}

#menuitems li {
margin: 0px;
background-image: url(img/bg-menu-item.gif);
height: 18px;
width: 188px;
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
}
#menuitems li a{
width: 188px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}

#menuitems li a:hover{
color: #FFFC98;
}

#menuitems li ul li {
margin: 0px;
/*
height: 18px;
width: 188px;
*/
padding-top: 1px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 0px;
background-image: none;
/* background-color: #000000; */
/* border: 1px solid #00FF00; */
}
#menuitems li li a{
/* width: 188px; */
margin: 0px;
padding-top: 6px;
padding-left: 0 px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
}
.menuSlide{ /* Para a abertura de Menus */
margin: 0px;
padding: 0px;
}


HTML:

<div id="menu">
<p style="height:58px;">&nbsp;</p>
<ul id="menuitems">
<li ><a href="#">Home</a></li>
<li class="menuSlide"><a href="#">Institucional</a></li>
<div class="menuSlide">
<ul class="ff-sub-menu">
<li><a href="#" class="ff-sub-menu">- Mensagem do Aministrador</a></li>
<li><a href="#" class="ff-sub-menu">- Organigramas</a></li>
<li><a href="#" class="ff-sub-menu">- Comparticipações</a></li>
<li><a href="#" class="ff-sub-menu">- Equipamento</a></li>
<li><a href="#" class="ff-sub-menu">- Recursos Humanos</a></li>
</ul>
</div>
<li class="menuSlide"><a href="#">Serviços</a></li>
<div class="menuSlide">
<p>
Sub-Menu 3
</p>
</div>
<li class="menuSlide"><a href="#">Notícias</a></li>
<div class="menuSlide">
<p>
Sub-Menu 4
</p>
</div>
<li class="menuSlide"><a href="#">Contactos</a></li>
<div class="menuSlide">
<p>
Sub-Menu 5
</p>
</div>
<li class="menuSlide"><a href="#">Links</a></li>
<div class="menuSlide">
<p>
Sub-Menu 6
</p>
</div>
</ul>
</div>


Could you please help me make it look nice in Firefox?

Thanks in advance,

f.
OctoberWind
07-27-2007, 12:18 PM
Few things at first glance:

1. your css for #menuitems ul and li have multiple declarations. its "ok" so long as you don't contradict yourself (which you did by the way) but VERY bad programming habits to get into.

2. where is class="ff-sub-menu" defined?

3. is this a static menu? or is the "menuSlide" supposed to 'slide' when you hover? If you, you will probably need javascript to make that happen.

Here's what I did:
I took your supplied code, dropped it into my editor, commented out some of the css, and threw some abstract background colors (to help see). here is what I got from that. (see attached text file)

perhaps if you take a second look, and revamp some of the css, i/we can take a second look at it.
gizmo
07-27-2007, 12:37 PM
Have you declared a DOCTYPE ?
fdoze
07-27-2007, 01:02 PM
Hi,

here is my docktype code:
<!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">


I'm usinf JAvascript to Slide the menu. That part is working on both browsers. The problem is Firefox text format styles.

Where is my contradiction in css? I will now look at your txt file.

Thanks for all your help!

Thanks.
fdoze
07-27-2007, 01:08 PM
OctoberWind,

your CSS has the same not great result in Firefox.

I'm using Firefox 1.0.6


f.
ray326
07-27-2007, 01:10 PM
Start with valid HTML. Your list is full of invalid mark up. The only thing allowed in a UL is an LI.
fdoze
07-27-2007, 01:33 PM
I can not put a DIV inside a LI ?

f.
WebJoel
07-27-2007, 06:12 PM
I can not put a DIV inside a LI ?

f. No. :o
drhowarddrfine
07-27-2007, 06:20 PM
Wait, what? Of course you can. It's perfectly valid.
But, no, no inside the <ul>, but the <li> is fine.
ray326
07-27-2007, 10:30 PM
I don't see a div inside an li, I see divs and other things inside a ul.
fdoze
07-30-2007, 06:30 AM
mmmm....

So.. How can I do that?

How to Have a Menu in a UL and set a Sub-Menu in another UL that is hidden? I need to have that sub-menu in some block (I was using DIV) so I can use Javascript to activate and de-activate...

Could you help me on this?


Thanks in advance.
fdoze
07-30-2007, 06:31 AM
Maybe I just should use P and Div... Right? Why do I need UL!?
fdoze
07-30-2007, 07:23 AM
Look at this code:

Open in IE and then in FF:

#menuitems {
padding: 0px;
margin: 0px;
}

.menuSlide{ /* Para a abertura de Menus */
width: 188px;
margin: 0px;
}
div.menuSlide p{
margin: 0px;
border: 1px solid #000099;
}
a.home-menu:hover, a.home-sub-menu:hover{
color: #FFFC98;
}
a.home-menu {
width: 188px;
height: 18px;
margin: 0px;
background-image: url(img/bg-menu-item.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.home-sub-menu{
width: 188px;
height: 18px;
padding-top: 1px;
padding-left: 6px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-image: none;
}
</style>
</head>

<body>
<div id="top"></div>
<div id="menu">
<p style="height:58px;">&nbsp;</p>
<div id="menuitems">
<p><a href="#" class="home-menu">Home</a></p>
<p class="menuSlide"><a href="#" class="home-menu">Institucional</a></p>
<div class="menuSlide">
<p><a href="#" class="home-sub-menu">- Mensagem do Aministrador</a></p>
<p><a href="#" class="home-sub-menu">- Organigramas</a></p>
<p><a href="#" class="home-sub-menu">- Comparticipações</a></p>
<p><a href="#" class="home-sub-menu">- Equipamento</a></p>
<p><a href="#" class="home-sub-menu">- Recursos Humanos</a></p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Serviços</a></p>
<div class="menuSlide">
<p>
Sub-Menu 3
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Notícias</a></>
<div class="menuSlide">
<p>
Sub-Menu 4
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Contactos</a></p>
<div class="menuSlide">
<p>
Sub-Menu 5
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Links</a></p>
<div class="menuSlide">
<p>
Sub-Menu 6
</p>
</div>
</div>
</div>


What is wrong in here?!


f.
fdoze
07-30-2007, 07:33 AM
Ok..

I made some changes but..

Look at this code:

#menuitems, #menuitems p {
padding: 0px;
margin: 0px;
}

.menuSlide{ /* Para a abertura de Menus */
display: block;
width: 188px;
margin: 0px;
}
a.home-menu:hover, a.home-sub-menu:hover{
color: #FFFC98;
}
a.home-menu {
display: block;
width: 188px;
height: 18px;
margin: 0px;
background-image: url(img/bg-menu-item.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
a.home-sub-menu{
display: block;
width: 188px;
height: 18px;
padding-top: 2px;
padding-left: 15px;
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 8px;
color: #FFFFFF;
font-size: 11px;
font-weight: normal;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
background-image: none;
}
</style>
</head>

<body>
<div id="top"></div>
<div id="menu">
<p style="height:58px;">&nbsp;</p>
<div id="menuitems">
<p><a href="#" class="home-menu">Home</a></p>
<p class="menuSlide"><a href="#" class="home-menu">Institucional</a></p>
<div class="menuSlide">
<p><a href="#" class="home-sub-menu">- Mensagem do Aministrador</a></p>
<p><a href="#" class="home-sub-menu">- Organigramas</a></p>
<p><a href="#" class="home-sub-menu">- Comparticipações</a></p>
<p><a href="#" class="home-sub-menu">- Equipamento</a></p>
<p><a href="#" class="home-sub-menu">- Recursos Humanos</a></p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Serviços</a></p>
<div class="menuSlide">
<p>
Sub-Menu 3
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Notícias</a></>
<div class="menuSlide">
<p>
Sub-Menu 4
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Contactos</a></p>
<div class="menuSlide">
<p>
Sub-Menu 5
</p>
</div>
<p class="menuSlide"><a href="#" class="home-menu">Links</a></p>
<div class="menuSlide">
<p>
Sub-Menu 6
</p>
</div>
</div>
</div>


If you build this code in a page and open in FF vs IE you will notice that in Firefox the element
<p><a href="#" class="home-sub-menu">
Is not on the left padding position set. Is more at the left. And in IE is more to the right!

How can I solve this!?

Thanks in advance.
ray326
07-30-2007, 12:33 PM
Maybe I just should use P and Div... Right? Why do I need UL!?Because a menu is a list of links.
blis102
07-31-2007, 01:26 AM
From what I gleaned from the above post you are trying to make a menu, with sub menu items correct? Javascript will show the sub menu item onclick or on hover correct? If that is the case, try this out:

<!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>

<title>Title Here</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

/* Menu
-------------------------------------------------- */
#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
margin: 0;
padding: 0;
}
#menu a {
width: 200px;
display: block;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #006699;
text-decoration: none;
padding: 3px 3px 3px 10px;
background: #E8F4FF;
}
#menu a:hover {
color: #005782;
background: #D7ECFF;
}

/* Submenu
-------------------------------------------------- */
#menu ul {
display: none; /* Hides the submenu */
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {}
#menu ul a {
color: #BB4A00;
background: #FFEEDF;
}
#menu ul a:hover {
color: #973D00;
background: #FFE0C4;
}

</style>

</head>
<body>


<ul id="menu">
<li><a href="#" title="Title Here">Menu Item</a></li>
<li><a href="#" title="Title Here">Menu Item</a>
<ul>
<li><a href="#" title="Title Here">Submenu Item</a></li>
<li><a href="#" title="Title Here">Submenu Item</a></li>
<li><a href="#" title="Title Here">Submenu Item</a></li>
</ul>
</li>
<li><a href="#" title="Title Here">Menu Item</a>
<ul>
<li><a href="#" title="Title Here">Submenu Item</a></li>
<li><a href="#" title="Title Here">Submenu Item</a></li>
<li><a href="#" title="Title Here">Submenu Item</a></li>
</ul>
</li>
<li><a href="#" title="Title Here">Menu Item</a></li>
<li><a href="#" title="Title Here">Menu Item</a></li>
</ul>


</body>
</html>

Then just use your javascript to show the nested UL onclick or on hover. This is a much more standard way of creating nested lists and is much cleaner than the way you have above.
fdoze
08-03-2007, 10:40 AM
Hi,

Thanks! That really helped me a lot!


But...........

I'm not using Background change onHover.. I'm using Font color change.

I noticed that
#menuitems a:hover {
color: #FFFC98;
}
( I put all the UL menu inside a #menu div. The main menu is UL#menuitems. )

But on mouseOver under Firefox the text color does NOT change... Where is my error?!


/* Menu
-------------------------------------------------- */
#menuitems {
list-style: none;
margin: 0;
padding: 0;
}
#menuitems li {
margin: 0;
padding: 0;
}
#menuitems a {
display: block;
width: 208px;
height: 18px;
margin: 0px;
background-image: url(img/bg-menu-item.gif);
background-repeat: no-repeat;
background-position: left top;
padding-top: 12px;
padding-left: 16px;
padding-right: 0px;
padding-bottom: 0px;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
}
#menuitems a:hover {
color: #FFFC98;
}

/* Submenu
-------------------------------------------------- */
#menuitems ul {
/* display: none; Hides the submenu */
list-style: none;
margin: 0;
padding: 0;
}
#menuitems ul li {}
#menuitems ul a {
padding-top: 4px;
padding-left: 15px;
padding-right: 0px;
padding-bottom: 0px;
margin-bottom: 6px;
font-size: 11px;
font-weight: normal;
background-image: none;
}
#menuitems ul a:hover {
color: #FFFC98;
}
/*
-------------------------------------------- */
.menuSlide{ /* Para a abertura de Menus */
padding: 0px;
margin: 0px;
}
/* -------------------------------------------- */


Thanks in advance.
blis102
08-03-2007, 01:33 PM
What is the Javascript you are using? What is the HTML? could you post it all so that I can check it out?

Here is a dropdown menu I built that may or may not do the job for you:
http://dev.organixdesign.com/demos/drop_down_menu/
Let me know if that helps at all
fdoze
08-03-2007, 02:11 PM
$$('li.menuSlide').each(function(li){
var link = li.getElement('a');
var block = link.getNext();

var fx = new Fx.Slide(block);

fx.hide(); // f.

link.addEvent('click', function(){
fx.toggle();
});

});
<div id="menu">
<p style="height:58px;">&nbsp;</p>
<ul id="menuitems">
<li><a href="#" title="Title Here">Home</a></li>
<li class="menuSlide"><a href="#" title="Institucional">Institucional</a>
<ul>
<li><a href="#" title="Mensagem do Aministrador">- Mensagem do Aministrador</a></li>
<li><a href="#" title="Organigramas">- Organigramas</a></li>
<li><a href="#" title="Comparticipações">- Comparticipações</a></li>
<li><a href="#" title="Equipamento">- Equipamento</a></li>
<li><a href="#" title="Recursos Humanos">- Recursos Humanos</a></li>
</ul>
</li>
<li class="menuSlide"><a href="#" title="Serviços">Serviços</a>
<ul>
<li><a href="#" title="Monotorização Estrutural">- Monotorização Estrutural</a></li>
<li><a href="#" title="Cartografia Aerofotogrametria">- Cartografia Aerofotogrametria</a></li>
<li><a href="#" title="Topografia Aplicada">- Topografia Aplicada</a></li>
</ul>
</li>
<li><a href="#" title="Notícias">Notícias</a></li>
<li><a href="#" title="Links">Links</a></li>
<li><a href="#" title="Contactos">Contactos</a></li>
</ul>
</div>
blis102
08-07-2007, 01:26 AM
um, dont know why the font wouldnt change on hover, i dont see where things went wrong. maybe a conflicting rule in your css or maybe the javascript is messing with things. hope you can find a solution cause i dont know where it could be
fdoze
08-07-2007, 07:38 AM
Hi,,

Imanage to get things right.

Now my only problem is in Javascript code. Some margins don´t get the same after open/close sub-menu. I guess its because of Javascript someway.. what do you think?

f.
blis102
08-07-2007, 01:37 PM
Um, if its a border problem its most likely CSS actually, but Im not too sure whats going on in your Javascript.
fdoze
08-07-2007, 02:04 PM
Hi,

in Javascript I just hide, Display and Visibility that <div class="menuSlide">.

But.. After open/close its seems that the link to submenu gets extra heigth.. 1 or 2 pixels.. maybe some margins.. I do not know..


f.
blis102
08-07-2007, 03:04 PM
weird, im not sure where that would come from. double check your css and also make sure that the javascript is applying any extra classes to the dropdown that would make it do that
fdoze
08-08-2007, 10:43 AM
My Javascript looks fine.

I do not know what is wrong...
Maybe some 'empty' space left for the hidden element or somethig...


f.
blis102
08-08-2007, 11:46 AM
Is the javascript doing:
display: none;
or
visibility: hidden;
or something else?
fdoze
08-08-2007, 11:54 AM
Both. Doing both.


it helps?


f.
blis102
08-08-2007, 12:26 PM
Um, not really a good idea in my opinion. display: none; is more than sufficient and actually the proper syntax for what you want. According to the W3C, visibility: hidden; makes the object disappear, but still affects the layout. I would say that is where your problem is:

The 'visibility' property specifies whether the boxes generated by an element are rendered. Invisible boxes still affect layout (set the 'display' property to 'none' to suppress box generation altogether).
from: http://www.w3.org/TR/REC-CSS2/visufx.html#visibility
(note: emphasis mine)

Cheers