Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Collapsing ordered list in IE6

    I have a little calendar I've put together using relative and absolute positioning with some cool hover effects. Using Dean Edwards IE7 javascript library, the hover effects work fine in IE6, but javascript or no, I can't seem to get the positioning schema to work in IE6. Firefox, IE7, and Safari work fabulously.

    Can someone help me out? Here's the code in question:

    --HTML--

    <?xml version="1.1" encoding="UTF-8" ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="Essential Forms, Inc." />
    <meta name="keywords" content="" />
    <meta name="description" content="Insert description here." />
    <meta name="robots" content="all" />

    <title>Event Calendar - Welcome to Chicago YIVO</title>
    <!-- This empty script is used to ward off the aptly titled Flash of Unstyled Content
    (or FOUC) which pops up in the various Internet Explorer browsers. For more info,
    refer to http://www.bluerobot.com/web/css/fouc.asp -->
    <script type="text/javascript"></script>
    <style type="text/css" media="all">
    @import url(styles/layout.css);
    @import url(styles/typography.css);
    @import url(styles/color.css);
    </style>
    <link rel="shortcut icon" href="images/favicon.ico" />
    <!-- compliance patch for microsoft browsers -->
    <!--[if lte IE 6]>
    <script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
    <style type="text/css" media="all">
    @import url(styles/ie6.css);
    </style>
    <![endif]-->
    </head>

    <body>
    <div id="branding">
    <img class="logo" src="images/yivologo-trans.png" alt="chicagoYIVO logo" />
    <img class="brndingtxt" src="images/brandingwYiddish-trans.png" alt="ChicagoYIVO" />
    </div>


    <ul id="sitenav">
    <li id="lcurve"><img id="blcorner" src="images/blCorner-trans.png" alt="decorative_ignore" /></li>
    <li id="home"><a class="nav" href="index.html">Home</a></li>
    <li id="newsletters"><a class="nav" href="newsletters.html">Newsletters</a></li>
    <li id="links"><a class="nav" href="links.html">Links</a></li>
    <li id="about"><a class="nav" href="about.html">About</a></li>
    <li id="rcurve"><img id="brcorner" src="images/brCorner-trans.png" alt="decorative_ignore" /></li>
    </ul>
    <ul id="subnav">
    <li id="ulcurve"><img src="images/roundedNavCorner-upsideD-trans.png" alt="decorative_ignore" /></li>
    <li id="eventcal"><a class="nav" href="eventcal.html">Event Calendar</a></li>
    </ul>

    <p class="month">Hover your cursor over events to see details, or click <a class="notes" href="pdfs/YIVO_2007_Fest_Flyer.pdf">here</a> to download an event calendar PDF.</p>


    <ol class="days">
    <li id="sun">Sun</li>
    <li id="mon">Mon</li>
    <li id="tues">Tues</li>
    <li id="weds">Weds</li>
    <li id="thurs">Thurs</li>
    <li id="fri">Fri</li>
    <li id="sat">Sat</li>
    </ol>
    <ol class="caldates" id="june">
    <li id="_1">
    <h6>1</h6>
    </li>
    <li id="_2">
    <h6>2</h6>
    </li>
    <li id="_3">
    <h6>3</h6>
    </li>
    <li id="_4">
    <h6>4</h6>
    </li>
    <li id="_5">
    <h6>5</h6>
    </li>
    <li id="_6">
    <h6>6</h6>
    </li>
    <li id="_7">
    <h6>7</h6>
    </li>
    <li id="_8">
    <h6>8</h6>
    </li>
    <li id="_9">
    <h6>9</h6>
    </li>
    <li id="_10">
    <h6>10</h6>
    </li>
    <li id="_11">
    <h6>11</h6>
    </li>
    <li id="_12">
    <h6>12</h6>
    </li>
    <li class="actvdate" id="_13">
    <h6>13</h6>
    <p class="evntsum">Evanston - Movie (97 min.)</p>
    <p class="evntlocation"><span>Evanston Public Library</span></p>
    <p class="evntaddr"><span>1702 Orrington, at Church - (847)866-0300</span></p>
    <p class="evntcnts"><span>MOVIE: “GRINE FELDER” (Green Fields) USA,</span></p>
    <p class="evntdesc"><span>1937, 97 minutes. Original play by Perets Hirshbeyn. Directed by Edgar G. Ulmer and Jacob Ben-Ami.*</span></p>
    </li>
    <li id="_14">
    <h6>14</h6>
    </li>
    <li id="_15">
    <h6>15</h6>
    </li>
    <li id="_16">
    <h6>16</h6>
    </li>
    <li id="_17">
    <h6>17</h6>
    </li>
    <li id="_18">
    <h6>18</h6>
    </li>
    <li class="actvdate" id="_19">
    <h6>19</h6>
    <p class="evntsum">Wilmette - Jeffry Mallow</p>
    <p class="evntlocation"><span>Wilmette Public Library</span></p>
    <p class="evntaddr"><span>1242 Wilmette Avenue - (847)256-5025</span></p>
    <p class="evntcnts"><span>PROF. JEFFRY MALLOW</span></p>
    <p class="evntdesc"><span>(Loyola University Chicago)“Does European Jewry Have a Future?”</span></p>
    </li>
    <li id="_20">
    <h6>20</h6>
    </li>
    <li id="_21">
    <h6>21</h6>
    </li>
    <li id="_22">
    <h6>22</h6>
    </li>
    <li id="_23">
    <h6>23</h6>
    </li>
    <li id="_24">
    <h6>24</h6>
    </li>
    <li id="_25">
    <h6>25</h6>
    </li>
    <li class="actvdate" id="_26">
    <h6>26</h6>
    <p class="evntsum">Northbrook - Barry Schechter</p>
    <p class="evntlocation"><span>Northbrook Public Library</span></p>
    <p class="evntaddr"><span>1201 Cedar Lane - (847)272-6224</span></p>
    <p class="evntcnts"><span>RABBI BARRY SCHECHTER (Congregation Kol Emeth, Skokie)</span></p>
    <p class="evntdesc"><span>"Yiddish and Laughter”</span></p>
    </li>
    <li class="actvdate" id="_27">
    <h6>27</h6>
    <p class="evntsum">Wheeling</p>
    <p class="evntlocation"><span>Indian Trails Public Library District</span></p>
    <p class="evntaddr"><span>355 South Shoenbeck Rd. - (847)459-4100</span></p>
    <p class="evntcnts"><span>DUO CONTROVERSO</span></p>
    <p class="evntdesc">
    <span>
    ANNETTE BJORLING, Klezmer harp<br/>
    KURT BJORLING, clarinet and basset-horn
    </span>
    </p>
    </li>
    <li class="actvdate" id="_28">
    <h6>28</h6>
    <p class="evntsum">Skokie - Stewart Figa</p>
    <p class="evntlocation"><span>Skokie Public Library</span></p>
    <p class="evntaddr"><span>5215 Oakton Street - (847)673-7774</span></p>
    <p class="evntcnts">
    <span>
    CANTOR STEWART FIGA (West Suburban Temple Har Zion) baritone,
    ILYA LEVINSON, piano
    </span>
    </p>
    <p class="evntdesc"><span>Yiddish folk and theater songs</span></p>
    </li>
    <li id="_29">
    <h6>29</h6>
    </li>
    <li id="_30">
    <h6>30</h6>
    </li>
    <li id="_31" class="datehide">
    <h6>31</h6>
    </li>
    </ol>

    <div id="siteinfo">
    <p class="copyright">Copyright© 2004 Yivo Institute for Jewish Research, All Rights Reserved. This page was last updated on 02/17/07</p>
    </div>
    <!--<script type="text/javascript" src="scripts/si-clear-children.js"></script>-->
    </body>
    </html>


    --CSS-- (for brevity, I've excluded the full layout. If this looks fine and you think it's an issue of inheritance from a higher weighed tag, let me know and I'll post the full layout.css sheet)

    .days, .caldates {
    position: relative;
    left: -1px;
    width: 770px;}

    .days li, .caldates li {
    width: 110px;}

    .days {
    height: 30px;}

    .days li {
    position: absolute;
    height: 30px;
    text-align: center;
    z-index: 3;}

    #sun {top : 0; left : 0;}
    #mon {top : 0; left : 110px;}
    #tues {top : 0; left : 220px;}
    #weds {top : 0; left : 330px;}
    #thurs {top : 0; left : 440px;}
    #fri {top : 0; left : 550px;}
    #sat {top : 0; left : 660px;}

    .caldates {
    height: 550px;}

    .caldates li {
    position: absolute;
    height: 110px;
    width: 110px;
    text-align: center;}

    .datehide {
    display: none;}

    li.actvdate p {
    margin: 10px;
    z-index: 3;}

    li.actvdate p span {
    display: none;}

    li.actvdate:hover p.evntsum {
    display: none;}

    li.actvdate:hover {
    width: 220px;
    height: 220px;
    margin-left: -50px;
    margin-top: -50px;
    padding: 5px;
    border: 1px dotted #3c0000;
    z-index: 301;}

    li.actvdate:hover span {
    display: inline;
    /* display: block;*/}

    li > h6 {
    text-align: right;
    }

    p.month {
    position: relative;
    margin-top: -10px;
    height: 30px;
    line-height: 40px;
    padding-left: 10px;
    text-align: left;
    }

    /* SPACES OUT THE CALENDAR DATES */

    #_1 {top : 0px; left : 550px;} #_2 {top : 0px; left : 660px;}
    #_3 {top : 110px; left : 0px;} #_4 {top : 110px; left : 110px;}
    #_5 {top : 110px; left : 220px;} #_6 {top : 110px; left : 330px;}
    #_7 {top : 110px; left : 440px;} #_8 {top : 110px; left : 550px;}
    #_9 {top : 110px; left : 660px;} #_10 {top : 220px; left : 0px;}
    #_11 {top : 220px; left : 110px;} #_12 {top : 220px; left : 220px;}
    #_13 {top : 220px; left : 330px;} #_14 {top : 220px; left : 440px;}
    #_15 {top : 220px; left : 550px;} #_16 {top : 220px; left : 660px;}
    #_17 {top : 330px; left : 0px;} #_18 {top : 330px; left : 110px;}
    #_19 {top : 330px; left : 220px;} #_20 {top : 330px; left : 330px;}
    #_21 {top : 330px; left : 440px;} #_22 {top : 330px; left : 550px;}
    #_23 {top : 330px; left : 660px;} #_24 {top : 440px; left : 0px;}
    #_25 {top : 440px; left : 110px;} #_26 {top : 440px; left : 220px;}
    #_27 {top : 440px; left : 330px;} #_28 {top : 440px; left : 440px;}
    #_29 {top : 440px; left : 550px;} #_30 {top : 440px; left : 660px;}
    #_31 {top : 550px; left : 0px;}

    Thanks in advance for any assistance.
    Last edited by dehuszar; 06-27-2007 at 10:50 PM. Reason: Incomplete CSS posted in original

  • #2
    Regular Coder
    Join Date
    Aug 2006
    Location
    Cardiff, UK
    Posts
    141
    Thanks
    15
    Thanked 2 Times in 2 Posts
    I haven't looked at the code in detail yet (lots on at work), but the XML prolog in the first line
    Code:
    <?xml version="1.1" encoding="UTF-8" ?>
    Will put IE6 in quirks mode - anything but white space before the DOCTYPE declaration will trigger this. With your current HTML, IE6 will react much like IE5.5, including the old incorrect box model.
    If anyone asks my boss, this counts as work, okay?

  • #3
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, I went ahead and removed those tags, but to no avail. The site is now live (as per the customer's request) so if it would help to view the full code, the site is chicagoyivo.org

    Thanks for your quick response, and I'd be grateful for any further comments/suggestions.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by dehuszar View Post
    Well, I went ahead and removed those tags, but to no avail.
    Hmm... It seems that the xml prolog still hasn't been removed? Did you put it back in there again?

  • #5
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    They are updated now. My client had a weird antiquated account configuration that was forcing a 100MB disk quota, so I couldn't re-upload all the stuff I needed to.

    That said, I tested it on my local copy, and it didn't seem to make much of a difference. Definitely perplexing.

    Thanks for your response. Any other ideas are welcome.

  • #6
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone? I will probably put a JavaScript popup on the site warning people about IE6 display issues in the meantime, but if anyone has any ideas as to why it's doing this, I'd be SUPER grateful.

  • #7
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    The problem seems to be that you are using id's that start with an underscore:

    Example:
    Code:
    <li id="_1">[...]</li>
    Code:
    #_1 {
      [...]
    }
    It seems that IE6 will not apply the specified styles above. But IE7 does. For some reason, it seems to work in IE6 if you escape the underscore with a backslash:
    Code:
    #\_1 {
      [...]
    }
    Back in 2001 Eric Meyer recommended that underscores should altogether be avoided because Navigator 4 compatibility was still relevant at the time. Today, there should be no problem using underscores in the id except at the beginning.

    He did not specifically discuss the case where the id starts with an underscore. I think that it is legal in CSS 2.1 that the id starts with an underscore, but I am not sure. I hope that someone can clarify this.

  • #8
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    The underscore at first, is actually a hack you can use. It only gets applied by IE 5 and 6.

    Code:
    h1 {
    color: Blue;
    _color: Red;
    }
    In IE 5 and 6, <h1> will be red.
    .
    .

  • #9
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Jutlander View Post
    The underscore at first, is actually a hack you can use. It only gets applied by IE 5 and 6.

    Code:
    h1 {
    color: Blue;
    _color: Red;
    }
    In IE 5 and 6, <h1> will be red.
    Yeah, that's true for properties. But now we are talking about id's.

  • #10
    New to the CF scene
    Join Date
    Apr 2007
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    First off, my apologies for not responding to the thread earlier. I never received an email informing me of a response.

    Second, YOU ARE GENIOUSES!!! I did a quick Find & Replace for all _# caldates and it worked brilliantly.

    Since I believe in Lao Tzu's concept of teaching myself to fish as opposed to begging for fish, where would I have looked to find that myself, so that next time I can go there instead of make demands on readers here?

    I can't thank you enough, but thanks again. I look forward to contributing back to this forum which has helped me tremendously.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •