the legend is not showing in compatibity view of i8

Posted on 2011-04-26
Last Modified: 2012-05-11
My div shows fine in ie8 but does not show in compatibilty mode of ie8.
I have this in the div:

<div id="calendar-leg">
                                    <h4>Colors indicate types of special days. Roll over for details.</h4>
                                    <ul >
                                        <li id="points-earned">Points earned</li>
                                        <li id="sale-bonus">Special Sale/Bonus</li>
                                        <li id="member-events">Member Event</li>

and following is the css

 #calendar-leg ul li {
background: url("/_vcontent/images/legend-bg.png") no-repeat scroll 0 0 transparent;
    float: left;
    line-height: 30px;
    margin-right: 20px;
    padding-left: 40px;
      font-weight: bold;
      font-size: 12px;

 #calendar-leg h4 {
 text-align: center;
 margin: 7px 0;

 #calendar-leg ul {
 width: 490px;
 margin: 0 auto;

 #calendar-leg ul li#sale-bonus {
 background-position: -158px 0;

 #calendar-leg ul li#member-events{
 background-position: -352px 0;
Question by:ssnm
    LVL 13

    Expert Comment

    Is there anyway we can view the site?
    LVL 38

    Expert Comment

    by:Tom Beck
    Can you be more specific?

    Author Comment

    I do not see anything when I turn the compatibilty mode on for this whole div.  But you can see the contents, how is it so.

    LVL 38

    Accepted Solution

    I pasted the markup and css you provided into a new htm page to get the results in the screen shot. My guess would be that there is something else on your actual page that is causing the issue you are seeing. You have this question in the jquery and javascript zones. Is there client side script on the actual page? That could cause issues. Can you post the whole markup here?

    Featured Post

    6 Surprising Benefits of Threat Intelligence

    All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

    Join & Write a Comment

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now