...
PDA

Collapsing ordered list in IE6

dehuszar
06-27-2007, 10:18 PM
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.
butlins
06-28-2007, 11:47 AM
I haven't looked at the code in detail yet (lots on at work), but the XML prolog in the first line
<?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.
dehuszar
06-28-2007, 11:22 PM
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.
koyama
07-01-2007, 01:06 AM
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?
dehuszar
07-02-2007, 05:08 PM
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.
dehuszar
07-05-2007, 09:32 PM
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.
koyama
07-08-2007, 04:45 PM
The problem seems to be that you are using id's that start with an underscore:

Example:

<li id="_1">[...]</li>

#_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:
#\_1 {
[...]
}
Back in 2001 Eric Meyer recommended (http://developer.mozilla.org/en/docs/Underscores_in_class_and_ID_Names) 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.
Jutlander
07-08-2007, 05:13 PM
The underscore at first, is actually a hack you can use. It only gets applied by IE 5 and 6.

h1 {
color: Blue;
_color: Red;
}

In IE 5 and 6, <h1> will be red. :)
koyama
07-08-2007, 05:17 PM
The underscore at first, is actually a hack you can use. It only gets applied by IE 5 and 6.

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.
dehuszar
07-15-2007, 06:17 AM
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.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum