CSS Menu Problem

HTML & CSS
1

Hi All

I’m using a dropdown menu in our test moodle which works in Firefox although in IE the menu list appears to the right of each main menu item (Login, My Stuff, etc). Does anyone know why it is doing this?

http://tmoodle.ystrad-mynach.ac.uk/

Here is the complete CSS File: -


/**
  *  this is what makes the aardvark-lite unique
  *
  */


/***
 ***    core: body
 ***/

body {
    background: #c0deed url(images/core/overlay.png) center top repeat-x;
    color:#4b4b4b;
    font-family: arial, helvetica, sans-serif;
        font-size : 14px;
}

a:link,
a:visited {
        color:#008db0;
    text-decoration: none;
}

a:hover {
    color: #ff2c00;
    text-decoration: none;
    
}

a.dimmed:link,
a.dimmed:visited {
    color:#aaaaaa;
    text-decoration: none;

}

#page {
    border: 5px solid #ffffff;
    margin-left: auto; 
    margin-right: auto;
    max-width: 1100px;
}

#pagelayout {
    width:960px;
    margin-left:auto;
    margin-right:auto;
}


#layout-table {
    margin-top:0;
    padding-top:10px;
}

#layout-table #middle-column{
  vertical-align:top;
  padding-left:7px;
  padding-right:5px;
}

#layout-table #left-column{
  vertical-align:top;
  padding-left:4px;
  padding-right:0px;
}

#layout-table #right-column{
  vertical-align:top;
  padding-left:0px;
  padding-right:6px;
}


#content {
    background: #fff url(images/core/h2grad.jpg) repeat-x; 
    margin-top: 0;
    padding-top: 10px;

}

hr {
    border-bottom:1px dotted gray;
    border-top:0px;
}

h1.main,
h2.main,
h3.main,
h4.main,
h5.main,
h6.main {
    text-align: center;
    margin:0px;
    padding-top:10px;
    padding-bottom:10px;
}

th.header,
td.header,
h1.header,
h2.header,
h3.header,
div.header {     
    background: #ffffff url(images/core/h2grad.jpg) top repeat-x; 
    border-top: gray 1px dotted;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
    color: #505050;
}

.generalbox {
    background: transparent; 
    border: 0px;
}

/***
 ***    core: header
 ***/

#header {
    height: 100px;
}

#logo { 
    background: url(images/header/logoliteheaded.png) no-repeat left top;
    width: 100%;
    height: 100px;
    float: left;
    left: 0px;
} 

/***
 ***    core: footer
 ***/

#footer {
    background: #ffffff url(images/core/h2grad.jpg) top repeat-x;
    margin-top: 0px;
    padding:10px;
    border-top: gray 1px dotted;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 0px;
}

#footer .footerlogos { 
    margin-top: 5px;
    border-top: 1px dotted gray;
}

#footer .footerlogos ul li { 
    padding-left: 5px;
    padding-right: 5px;
    display: inline; 
    margin:2px;
}

#footer p.copyright { 
    padding: 0; 
    margin: 0; 
    line-height: 2em; 
    font-size: 0.8em; 
}

/***
 ***    core: profileblock
 ***/

#profileblock {
        margin: 0;
        padding: 0;
    float: right;
    text-align: right;
    width: 95%;
    height: 100px;
}

#profilepic {
    text-align:right;
    float: right;
    margin: 5px;
    padding: 0;
    width: 80px;
    height: 80px;
    border: 1px solid #ffffff;
}

#profilename {
    text-align:right;
    width: 500px;
    height: 30px;
    margin: 5px;
    padding: 0;
    float: right;
    font-family: impact;
    font-size: 2em;
}

#profilename a:link, #profilename a:visited {
        color: #008db0;
        text-decoration: none;
}

#profilename a:hover, #profilename a:active {
    color: #f12711;
    text-decoration: none;
}

#profileoptions {    
    width: 600px;
    height: 30px;
    margin: 5px;
    padding: 0;
    float: right;
}

#profileoptions ul {
    float: right;
    text-align: right;
    display: inline;
    padding: 0;
    margin: 0;
    list-style-type: none; 
}

#profileoptions li
{
    display: inline;
    margin-left: 1em;
    text-transform: capitalize;
    font-weight: bold;
} 


#profileoptions #submit { 
    background-color: transparent; 
    background-image:url('images/header/login.png');
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: left top;
    border-width: 0;
    width: 62px;
    height: 25px;
    font-size: 1em;
    padding-bottom: 5px;
    color: #fff;
    font-weight: bold;
}

#profileoptions .loginform {
    padding-right: 10px; 
    margin: 0;
}

#profileoptions .loginform input {
    width: 5em;
}

#profileoptions .loginform label {
    color: #008db0;
}


/***
 ***    core: aardvark menu
 ***/
 

.dropdown_menu {
    position: relative;
}

#aardvark_liteheaded_menu {
    background-color: #2f2f2f;
    height: 40px;
    clear: both;
        margin: 0;
        padding: 0;
    
}    

#aardvark_liteheaded_menu ul {
        float: left;
        list-style: none;
    padding: 0;
    margin: 0;
    list-style: none;

}
#aardvark_liteheaded_menu ul li {
    float: left;
    height: 40px;
    white-space: nowrap;
    z-index: 1;
    text-transform: capitalize;
    font-weight: bold;
    font-size: 80%;
}

#aardvark_liteheaded_menu ul li a {
    display: block;
    height: 30px;
    margin-left: 0px;
    padding: 10px 15px 0 15px;
    color: white;
}
    
#aardvark_liteheaded_menu ul li a:hover {
    color: black;
    background: #ff2c00;
}

#aardvark_liteheaded_menu ul ul {
    padding: 0;
    margin: 0;
    position: absolute;
    height: auto;
    width: auto;
    display: none;
    top: 40px;
    color: #333;
    background: #fff;
    z-index: 1000;
}

#aardvark_liteheaded_menu ul li:hover ul {
        display: block;
}

#aardvark_liteheaded_menu ul li ul li {
    float: right;
    clear: both;
    margin: 0;
    padding: 0;
    height: 2.0em;
    width: 22em;
    font-size: 100%;
}

#aardvark_liteheaded_menu ul li ul li a {
    display: block;
    text-align: left;
    margin: 0;
    background-color: #fff;
    color: #333;
    padding: 0 0 0 10px;
    text-decoration: none;
    text-transform: none;
    border: 1px dotted #abc;
}

#aardvark_liteheaded_menu ul li ul li.select {
        color: #008db0;
        background: #c0deed url(images/menu/menu_overlay.png) no-repeat left top;
        text-decoration: none;
        text-transform: capitalize;
        text-align: left;
        font-weight: bold;
}

#aardvark_liteheaded_menu ul li ul li.select .submenu_title {
    padding-left: 5px;
    border-bottom: 1px dashed white;
}


#aardvark_liteheaded_menu ul li ul li a:link,
#aardvark_liteheaded_menu ul li ul li a:visited {
        background-color: #fff;
        text-decoration: none;
        color: #333;
}

#aardvark_liteheaded_menu ul li ul li a:hover,
#aardvark_liteheaded_menu ul li ul li a:active {
    background: #fff url(images/menu/menu_overlay.png) no-repeat left top;
        text-decoration: none;
        color: #008db0;
}


/***
 ***    core: navbar
 ***/

.navbar {
        background:#ffffff;     
    border-top:0px;
    border-bottom:solid 1px gray;
    border-left:0px;
    border-right:0px;
}

/***
 ***    core: side block
 ***/

.sideblock {
    color:#555555;
    border: gray 1px dotted !important;
      background: #ffffff url('images/sideblocks/sidegrad.jpg') repeat-x !important;
}

.sideblock .content {
    color:#555555;
    padding: 4px;
    border: 0px;
}

.sideblock .header {
      background: transparent !important;
}

.sideblock .header h2 {
    padding-top: 4px;
      background: transparent !important;

 }

.sideblock .header .hide-show-image {
    padding-top: 4px;
}
 
.sideblock .footer {
    border:0px;
    margin-top: 4px;
    margin-bottom: 4px;
    font-size:0.85em;
    text-align: left;
}

.sideblock .header, .sideblock .header h2 {
    color: #505050;
    font-size:1em;
    border: 0px;
      background: transparent !important;
}



.sideblock .content .post .head .date,
.sideblock .content .post .head .name {
    color: #555555;
}

/***
 ***    core: course (the middle bit)
 ***/

.coursebox {
    background: #ffffff;
    border: 0px;    
    margin-bottom: 0px;
    margin-right: 2px;
}

body#site-index .headingblock,
body#course-view .headingblock {
    margin-bottom: 0px;
}

.section {
    background: #ffffff;
}

#course-view .section td.content {
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-bottom:1px dashed #dbdbdb;
}

#course-view .section td.side {
  border-width:0px;
}

/***
 ***    modules: forum
 ***/

.forumpost {
    border: 0px;    
    width: auto;
    overflow: hidden;
}

.forumpost .left {
    background:#ffffff url('images/forum/leftpost.png') no-repeat top left;
}

.forumpost .picture,
.forumpost .topic {
    background:#c0deed url('images/forum/forumheader.png');
    border:0px;
}

.forumpost .topic a:link,
.forumpost .topic a:visited {
}

.forumpost img {
  max-width: 100%;
}

/***
 ***    modules: calendar
 ***/

/* colors for calendar events */
#calendar .event_global,
.minicalendar .event_global,
.block_calendar_month .event_global {
    border-color:#def2ba !important;
    background-color:#def2ba;
}

#calendar .event_course,
.minicalendar .event_course,
.block_calendar_month .event_course {
      border-color:#c6dfeb !important;
      background-color:#c6dfeb;
}

#calendar .event_group,
.minicalendar .event_group,
.block_calendar_month .event_group {
     border-color:#feffc2 !important;
     background-color:#feffc2;
}

#calendar .event_user,
.minicalendar .event_user,
.block_calendar_month .event_user {
      border-color:#d9c6e2 !important;
      background-color:#d9c6e2;
}

table.minicalendar tr td.weekend {
      color: red;
  }
2

Hi,

I guess you must have fixed it as I don’t see the problem in ie7 or ie8?

(Ie6 is broken but with a different problem to the one you mentioned.)

3

Hi
Thanks for your comment. It seems you are right about IE7, but as you can see from the image attached, we still have the same problem with IE8… The dropdown menu does not appear under the menu item.

Look forward to hearing your comments

4

Hi,

It looks fine in my ie8 on xp and vista. Are you sure that’s a screenshot from IE8 because the dropdown button doesn’t look like an IE select element?

5

Thanks paul
I think we have discovered the problem. If we take it out of Compatibility View in IE8 it works, if we put it back into compatibility view it doesn’t, which has issues for computers on the network and the differing setups that they may have. Is there a fix for this do you think?
Cheers

6

Hi,

The problem with compatibility view is that it isn’t really compatible with anything :slight_smile:

Neither are the meta tag emulations either. All they do is produce yet another variant of IE that doesn’t work the same as anything else.

I would avoid using them at all costs. The only time you may need them are for some javascript routines that may not be compatible. However, the css can always be fixed more easily in the native rendering.

I’ve made a few tests and it seems all versions can be fixed by adding the foollowing code to the main css file.


#aardvark_liteheaded_menu ul li {position:relative}
#aardvark_liteheaded_menu ul ul{left:0}
* html #aardvark_liteheaded_menu ul li a{float:left}
* html #aardvark_liteheaded_menu ul li li a{float:none}

Add it after the original menu code and it should fix ie6/7 and 8 in various modes.