Menu in CSS problems

  • Thread starter Thread starter Hans
  • Start date Start date
H

Hans

My menu does not appear in the same way in Firefox and other browsers as it
does in IE and I can't figure out how to solve the problem.

The CSS looks like this;

#1 {font: 150% Verdana, Arial, Helvetica, sans-serif;color: #CCCCCC;}
#content{margin: 1em 1em 1em 1em; padding: 0; float: left;}
#menycontainer{ float: left; margin: 1em 0 0 1em; width: 18em; height: 15em;
font: 70% Verdana, Helvetica, sans-serif; border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC; border-right: 1px solid
#CCCCCC;}#meny{margin: 0; padding: 0; list-style-type: none;}
#meny a{display: block; margin: 0; padding: 0.3em; background: #006699;
padding: 0.3em; text-decoration: none; height: 100%; border-bottom: 1px
solid #CCCCCC;}
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0.3px; background: #3399CC;}
#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #999999;}
#meny a#current{font-weight: bold;}
#meny a#subcurrent{font-weight: bold

It works very fine in IE, but Firefox does not understand there is an end
downwards so the menu falls. If I change the height in "menycontainer" from
15em to 15px, it does no fall like this, but I can't write in 2 rows of text
or more because in Firefox it just gets messy (but it works well in IE).

Any suggestions how I can get around this so it work well in Firefox also??
This link shows a page with 15em ; http://www.bjarstal.fr/ (just with one
row of text, but it works fine with many lines)
and here I have set it to 15px ;
http://www.bjarstal.fr/armoires-de-securite.htm (in the lower part of the
menu I have tried to write many lines per "box" and it is just messy.

Hans
 
I can add that in FrontPage 2003 in "Creation" mode (in French it is
"Création" so I just guess the English word for it) it appears like in
Firefox, but in "Preview" it appears as in IE!

Hans
 
Would it be possible for you to upload this page somewhere and post a link
to it, so we can see the menu actually live?
 
:-)

There are links in the end of my post, below the CSS. I repeat them:

Any suggestions how I can get around this so it work well in Firefox
also? This link shows a page with 15em ; http://www.bjarstal.fr/ (just
with one row of text, but it works fine with many rows)
and here I have set it to 15px ;
http://www.bjarstal.fr/armoires-de-securite.htm (in the lower part of the
menu I have tried to write many lines per "box" and it is just messy.

Hans
 
I've used the tool (thanks for that) and have validated the index page, but
it didn't help by it self. Anyhow, doctype made a difference, but after
having tested multiple doctypes, I have noticed that none works for both IE
and for Firefox. Either it makes IE look good, or it makes Firefox to look
good. I have tested all doctypes on
http://www.htmlhelp.com/tools/validator/doctype.html, but they all only move
the problem from Firefox to IE. In Frontpage 2003 there are some suggestions
as well, but they didn't make any difference.

Have a look at http://www.bjarstal.fr
and
http://www.bjarstal.fr/armoires_de_securite.htm

As you can see, the problem has just been transferd to IE.



Hans
 
I found a solution! I changed the code in the CSS in the line:
#menycontainer. What i did was to take away ;height:15em;

It was like this;

#menycontainer{ float: left; margin: 1em 0 0 1em; width: 18em;height: 15em ;
font: 70% Verdana, Helvetica, sans-serif; border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC; border-right: 1px solid
#CCCCCC;}#meny{margin: 0; padding: 0; list-style-type: none;}

and now it is like this (and I must use doctype):


#\1 {font: 150% Verdana, Arial, Helvetica, sans-serif;color: #CCCCCC;}
#content{margin: 1em 1em 1em 1em; padding: 0; float: left;}
#menycontainer{ float: left; margin: 1em 0 0 1em; width: 18em;font: 70%
Verdana, Helvetica, sans-serif; border-top: 1px solid #CCCCCC; border-left:
1px solid #CCCCCC; border-right: 1px solid #CCCCCC;}#meny{margin: 0;
padding: 0; list-style-type: none;}
#meny a{display: block; margin: 0; padding: 0.3em; background: #006699;
padding: 0.3em; text-decoration: none; height: 100%; border-bottom: 1px
solid #CCCCCC;}
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0.3px; background: #3399CC;}
#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #999999;}
#meny a#current{font-weight: bold;}
#meny a#subcurrent{font-weight: bold}


Hans
 
Hans said:
I found a solution! I changed the code in the CSS in the line:
#menycontainer. What i did was to take away ;height:15em;

It was like this;

#menycontainer{ float: left; margin: 1em 0 0 1em; width: 18em;height: 15em
; font: 70% Verdana, Helvetica, sans-serif; border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC; border-right: 1px solid
#CCCCCC;}#meny{margin: 0; padding: 0; list-style-type: none;}

and now it is like this (and I must use doctype):


#\1 {font: 150% Verdana, Arial, Helvetica, sans-serif;color: #CCCCCC;}
#content{margin: 1em 1em 1em 1em; padding: 0; float: left;}
#menycontainer{ float: left; margin: 1em 0 0 1em; width: 18em;font: 70%
Verdana, Helvetica, sans-serif; border-top: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC; border-right: 1px solid
#CCCCCC;}#meny{margin: 0; padding: 0; list-style-type: none;}
#meny a{display: block; margin: 0; padding: 0.3em; background: #006699;
padding: 0.3em; text-decoration: none; height: 100%; border-bottom: 1px
solid #CCCCCC;}
#meny ul{list-style-type: none;}
#meny ul a{margin: 0; padding: 0.3px; background: #3399CC;}
#meny a:link{color: #ffffff;}
#meny a:visited{color: #ffffff;}
#meny a:hover{background: #999999;}
#meny a#current{font-weight: bold;}
#meny a#subcurrent{font-weight: bold}
Click to expand...


But you still are using em to specify margins, width and padding.

Try a px specification for these as well. Different browsers may interpret
px specs differently but em is not recommended at all.

Also, the width spec for #menycontainer is still in em
 
Back
Top