Home/ Questions/Q 8964403
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:34:50+00:00

I have a problem with my menu and IE. Firefox and Chrome renders the

  • 0

I have a problem with my menu and IE. Firefox and Chrome renders the menu just perfect and exactly the way I want it. Can you please take a look at my css and help me fix the problem?

-I am pretty sure it would be just a couple of corrections I am not seeing.

PS. Please, no float: left;

jsFiddle: http://jsfiddle.net/omarjuvera/P8Mdk/#base

IE screenshot: http://img29.imageshack.us/img29/4012/screenshothd.jpg

HTML

    <!-- START: menu -->
    <nav id="main-menu" class="conteiner">
    <ul id="menu" class="content">
        <li class="logo" ><a href="#" title="Home"><img src="http://www.firstchoicehousing.com/_img/menu/help/logo.png" alt="First Choice Housing" /></a></li>
        <li class="menu" ><a href="#">Menu 1</a></li>
        <li class="menu" ><a href="#">Menu 2</a></li>
        <li class="menu" ><a href="#">Menu 3</a>
            <ul class="submenu" >
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
            </ul>
        </li>
        <li class="menu" id="resident"><a href="#">Menu 4</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
            </ul>
        </li>
        <li class="menu" id="community"><a href="#">Menu 5</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
                <li><a href="#">Sub 8</a></li>
            </ul>        
        </li>
        <li class="menu"><a href="#">Menu 6</a>
            <ul class="submenu">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
                <li><a href="#">Sub 6</a></li>
                <li><a href="#">Sub 7</a></li>
                <li><a href="#">Sub 8</a></li>
            </ul>        
        </li>
        <li class="menu"><a href="#">Menu 7</a></li>
        <li class="menu"><a href="#">Menu 8</a></li>
    </ul> <!-- /#menu -->
    </nav>
    <!-- END: menu -->
    <!--

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        <ul>


     -->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
<img src="http://img811.imageshack.us/img811/9566/76079487.jpg" alt="Some Sample image" title="Some Sample image" />
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->
Some sample text ->

CSS

@charset "utf-8";
body { background: url(http://img59.imageshack.us/img59/5056/bodyrpt.jpg); }
.conteiner {
    width: 100%;
    margin: 0;
    padding: 0;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
/*  ****** FUNCTIONALITY ***********************************************************************************************************
    (Hide menu/Set sub-menu to the right)
        Documentation:
        http://stackoverflow.com/questions/4873604/css-menu-without-javascript
        http://www.htmldog.com/articles/suckerfish/dropdowns/
*/
#menu { position: relative; }
    /*Submenus*/
#menu li>.submenu { position: absolute; left: -999em; }
#menu li:hover>.submenu { left: auto; width: 12em; }




/*  ****** STYLE **************************************************************************
    Looks and feel of the menus and submenus
*/
/* ---- Container Styling ---- */
#main-menu { background-image: url('http://imageshack.us/a/img203/8503/navg.jpg'); }
/* ---- Menu Styling ---- */
#menu {
    width: 1000px;
    padding: 0px;

    background-color: black;
    background-color: rgba( 0,0,0,0.80 );
    background-image: url('http://imageshack.us/a/img208/1033/menudz.jpg');

}
#menu ul { list-style: none; list-style-type: none; margin: 0; padding: 0px; }
    /* ALL-menu's text */
#menu a {
    display: inline-block;
    font-size: 0.8em;
    text-decoration: none;

    font-family: "Arial Black", Gadget, sans-serif;

    color: #ecc676;
    padding: 0em .5em 0em .5em;
    }



/* ---- First-level menu Styling ---- */
    /*Menu*/
#menu>li {
    display: inline-block;
    vertical-align: middle;
}
    /*Text*/
#menu .menu>a {
    color: #a6625a;

    padding: 22px 4px;
}
#menu .menu>a:hover {
    color: #ecc676;
    background: #270909;
}
    /*Submenu*/
#menu .submenu>li {
    border-bottom: 2px groove #CCCCCC; /*Light Grey*/
    border-bottom: 2px groove #808080; /*Grey*/
    border-bottom: 2px groove #3E1612; /*thefirst_choice.css*/
}
#menu .submenu a {
    display: block;
    padding: 8px 0px 8px 5px;

    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    font-family: Arial,Helvetica,sans-serif;

    background-color:  #330000;
    background-color:  rgb( 78,25,25 );
    background-color: rgba( 78,25,25,0.80 );

    }
#menu .submenu a:hover {
    color: #330000;
    background-color: #eee9e9;
    }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    jsFiddle: http://jsfiddle.net/omarjuvera/P8Mdk/11/

    CSS:

    @charset "utf-8";
body { background: url(http://img59.imageshack.us/img59/5056/bodyrpt.jpg); }
.doc {
    width: 100%;
    margin: 0;
    padding: 0;
}
.content {
    width: 1000px;
    margin: 0 auto;
}
/******* FUNCTIONALITY ***********************************************************************************************************
    (Hide menu/Set sub-menu to the right)
        Documentation:
        http://stackoverflow.com/questions/4873604/css-menu-without-javascript
        http://www.htmldog.com/articles/suckerfish/dropdowns/
*/
    /* Menus */
#main-menu #menu                        { position: relative; }
#main-menu #menu>li                 { display: inline-block; }
    /* Submenus */
#main-menu #menu li>.submenu            { position: absolute; left: -999em; }
#main-menu #menu li:hover>.submenu  { display: block; left: auto; width: 12em; }



/******* STYLE ***********************************************************************************************************
    Looks and feel of the menus and submenus
*/
    /* GENERAL SETTINGS */
#main-menu ul               { list-style-type: none; }
#main-menu #menu a          { display: block; text-decoration: none; }
#main-menu .menu a          { padding: 0.8em .8em; } /* menu: left-right padding | submenu: top-bottom */
#main-menu #menu li         { vertical-align: middle; white-space: nowrap; }
#main-menu img, #main-menu a    { border: none; outline:none; }


    /* container */
#main-menu { background-image: url('http://imageshack.us/a/img203/8503/navg.jpg'); }


    /* menu */
#main-menu #menu {
    padding: 0px;
    background-image: url('http://imageshack.us/a/img208/1033/menudz.jpg');
}
#main-menu .menu>a {
    color: #a6625a;
    font-size: 0.795em; 
    font-family: "Arial Narrow", Arial, Gadget, sans-serif;
    text-transform: uppercase;
    padding: 1.77em .5em;
}
#main-menu .menu>a:hover        { color: #ecc676; background: #270909; }
#main-menu .menu>a:active   { color: #ecc676; background: #270909; }
#main-menu .menu>a:visited  { color: #a6625a; }


    /* Sub-menu */
#main-menu .submenu {
    padding: 0;

    background-color:  #330000;
    background-color:  rgb( 78,25,25 );
    background-color: rgba( 78,25,25,0.85 );
}
#main-menu .submenu li { border-bottom: 2px groove #3E1612; }
#main-menu .submenu a {
    color: #fff;
    font-size: 0.8em;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}
#main-menu .submenu>li>a:hover  { color: #330000; background-color: #eee9e9; }
#main-menu .submenu>li>a:active { color: #330000; background-color: #eee9e9; }
#main-menu .submenu>li>a:visited    { color: #fff; }
    • 0