Problem Firefox vs. IE

[walter]

I have a big problem, which I do not understand. My site www.institut-wolkenstein.com works fine under IE but not within firefox. Just check it out. You will see that the menu, which is the module "css menu"
overlays the content in firefox. I checked the templates and the stylesheets and could find out that it must depend on the css. But I looks like that I am not so firm in interpreting the css right.
Maybe some of you professionals can help me.
PLEEEAAASSSEEEE!!!!!
The template:
--------------------------


Institut Wolkenstein-{title}
{stylesheet}





{cms_module module='cssmenu'}





{content}




{cms_module module="statistics"}

---------------------------------
The stylesheet:
body {
      color: #660000;
      background-color: #ffffff;
      font-size: 10pt;
      font-family: Verdana;
      }


a:link    { color: #FFC082;
            font-size: 10pt;
            font-family: Verdana }

a:visited  { color: #FFC082;
            font-size: 10pt;
            font-family: Verdana }

a:active  { color: #FFC082;
              font-size: 10pt;
            font-family: Verdana }

a:hover    { color: #660000;
            font-size: 10pt;
            font-family: Verdana }

a:ref  { color: #FFC082;
            font-size: 10pt;
            font-family: Verdana }

div.menu { float:left;
              padding: 10px 2% 10px 2%;
              margin-left: 20px 1% 20px 2%; 
              background: #ffffff;
              position: fixed;
              border: 1px solid #FFC082;
              with: 18%;
              }
h1 {
font-size: 24px;
line-height: 44px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h2 {
font-size: 18px;
line-height: 40px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h3 {
font-size: 16px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h4 {
font-size: 14px;
line-height: 26px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h5 {
font-size: 12px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
h6 {
font-size: 10px;
line-height: 18px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
p.sectionname {
font-size: 14px;
line-height: 22px;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
}
li {
font-size: 12px;
line-height: 22px;
margin-top: 0;
margin-bottom: 0;
}

div.content {
    float: right;
    padding: 10px 2% 10px 2%;
    margin-left: 20px 2% 20px 1%;
    background: #ffffff;
    color: #660000;
    font-size: 10pt;
    border: 1px solid #FFC082;
    with: 68%;
    /* height: 90%; */
    /* overflow: scroll; */
  }


div.bottom {
    background-color: #ffffff;
    border: 1px solid #FFC082;
    padding: 3px;
    text-align: center;
    font-size: 10pt;
    font-family: Verdana;
    color: #FFC082;
    float:right;
    }

p.title {
    font-size: 12pt;
    font-weight: bold; }

p.smalltitle {
    font-size: 10pt;
    font-weight: bold;
    padding: 4px;
    background-color: #ffffff;
    text-transform: uppercase; }




.icons {
    text-align: left;
}


         
td.header  { color: #FFC082;
            font-size: 10pt;
            font-family: Verdana }
td.label  { color: #FFC082;
            background-color: #eeeeff;
            font-size: 10pt;
            font-family: Verdana }
td.body    { color: #FFC082;

            background-color: #eeeeff;
            font-size: 10pt;
            font-family: Verdana }

td.bodyalt { color: #FFC082;
            background-color: #eeeeff;
            font-size: 10pt;
            font-family: Verdana }
td.footer  { color: #FFC082;
            font-size: 10pt;
            font-family: Verdana }


****************
/*  All the menu css */
.verbar {
    color: FFC082;
    background-color: #ffffff;
}

.submenu    {
    position: fixed;
    /* position: absolute; */
    left: 0;
    top: 0;
    visibility: hidden;
}

.subframe  {
    position: relative;
    display: block;
    background-color: #ffffff;
    border: 1px solid #FFC082;
}

.item  {
    padding: 3px;
    text-align: left;
    white-space: nowrap;
}

.separator  {
    background-color: #ffffff;
    border-top: 1px solid #FFC082;
    border-bottom: 1px solid #FFC082;
    margin: 2px 1px 2px 1px;    /* top right bottom left */
    height: 0;
    font-size: 1px;
    line-height: 0
}

.item a {
    position: relative;
    display: block;
    text-decoration: none;
}

.item a:link    {
    color: #FFFFFF;
    text-decoration: none;
}

.item a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

.item a:hover  {
    color: #660000f;
    background-color: #ffffff;
    text-decoration: none;
}
.item a:active  {
    color: #FFFFFF;
    text-decoration: none;
}

.item .fwdarr  {
    position: absolute;
    top: 5px;
    right: 7px;
}
-------------------------------------------------

[jah]

Hi, I think it is just a typo.

Try changing "with" to "width" in div.content and div.menu.

Another thing is that the output of your source is a bit strange. What is the meaning of all the spans? If it is generated by a tool, I think you should consider throwing it out. This page is quite simple so it would be better to write it manually.

[walter]

You are my HERO.
Thanks that was the mistake. Still is seems that FX has a different interpretation of the css. Because the distance to the many differs in both browser. Anyway I will sleep much better this night.

I just copied the standard css. lightblue and changed the things I needed. Do you think to let the other code in will cause problems?

[jah]

Glad it worked for you.

I suspect there are a few more errors in the CSS and perhaps the HTML that are causing your problems. Try to validate your CSS and HTML (http://jigsaw.w3.org/css-validator and http://validator.w3.org/) and fix the errors.

I think it would be a good idea to clean up the code. You could easily remove the unnecessary tags in an editor. The page would load much faster and it would be easier to debug errors like the ones you have.

Jon

[Kri]

You may need to put a doctype in your html, that will help internet explorer to display the code similar to firefox. Yes, internet explorer is usually the one in the wrong, not firefox (usually). Welcome to the world of web standards and browser inconsistencies!!

You'll probably want to use the following doctype. Try putting this code at the very top of your page, before everything else...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Also, this article (http://www.alistapart.com/articles/doctype/) will give you a bit more information about what a doctype is and what it does. Inserting the doctype won't fix ALL your problems with differences between Firefox and IE, but it will help.