Menu in CSS problems

Hans · Nov 12, 2008

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

Hans · Nov 12, 2008

Pls forget about the first line in the CSS below.

Hans

Hans · Nov 12, 2008

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

Murray · Nov 12, 2008

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?

Hans · Nov 12, 2008

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

Murray · Nov 12, 2008

First thing you have to do before worrying about layout issues, is to make
sure the page itself validates - yours does not, since it is missing a) a
valid and complete doctype, and b) an opening <html> tag.

Next, you'd want to validate your CSS - again yours fails:

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http://www.bjarstal.fr/

Please fix those errors first, and then let's revisit your questions.

Hans · Nov 12, 2008

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

Hans · Nov 13, 2008

To exclude the possibility of interfering with an other CSS, I've created 2
pages with just the menu; one with doctype and one without:

http://www.bjarstal.fr/menu_with_doctype.htm
http://www.bjarstal.fr/menu_no_doctype.htm

So with doctype it is fine in Firefox, but bad in IE and without doctype it
is the other way around.

Is there a solution, or do I have to find something else as a menu?

Hans

Hans · Nov 13, 2008

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

Trevor Lawrence · Nov 13, 2008

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

CSS Problems	9	Aug 17, 2008
please help me fix my code. it will not work in ie but worksperfectly in firefox	5	Oct 4, 2009
Hyperlinks NOT underlined in website using CSS	3	Mar 12, 2007
How to position image displayed from a link?	1	Feb 26, 2009
CSS Menu and Frontpage 2003	4	Jul 17, 2005
Positioning of image from link - if that makes sense!	3	Mar 10, 2009
Numbered Lists	3	Dec 22, 2004
CSS help	5	Apr 17, 2007

Menu in CSS problems

Hans

Hans

Hans

Murray

Hans

Murray

Hans

Hans

Hans

Trevor Lawrence

Ask a Question

Similar Threads