Menu in CSS problems


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
 
Ad

Advertisements

H

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
 
M

Murray

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?
 
H

Hans

:)

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
 
Ad

Advertisements

H

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
 
H

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
 
Ad

Advertisements

T

Trevor Lawrence

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}


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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top