contained within #content. Remember that trick I mentioned elsewhere? So I need to remove those borders and I'll do like this: */ .calendar_pages #content div { border:none; /*there's also padding in this area that we will not need for the calendar. So let's get rid of it: */ padding:70px 10px 20px 0px; z-index:0; } /* We're done preparing the page for the calendar. Very cool. I love this stuff! Now, what I'm going to do is simply build the calendar table not worrying about styles. I'll do that after the table is built and of course this is the perfect time to use a even though this is a "tableless site". I'll be back. */ /* Let's add the text image for the title */ #events_calendar { background-image:url(../images/103x024calendar_text.gif); background-repeat:no-repeat; position:absolute; top:15px; left:235px; width:103px; height:24px; text-indent:-4000px; } #subpages.calendar_pages #content div #next_back_buttons { /* clear this div of all formatting */ margin:0px; padding:0px; position:absolute; /* remove it from the flow of the document */ top:15px; /* top, right corner */ right:10px; /* top, right corner */ height:30px; width:200px; min-height:30px; /* this has to override the min-height set for short pages this was hard to figure out until I looked at Firefoxes "View Style Information" I can't emphasize enough the NEED to use that Firefox tool!!!!!*/ } #next_back_buttons a { display:block; height:30px; float:right; width:50px; padding-left:12px; background-image:url(http://www.gmpc.org/images/007x011pointer_white_bg_left.gif); background-repeat:no-repeat; background-position:0px 3px; } #content #next_back_buttons #next { padding-left:0px; padding-right:10px; background-image:url(../images/007x011pointer_white_bg.gif); background-position:30px 3px; } /******* the calendar table *********/ #calendar_large { width:100%; border-collapse:collapse; z-index:0; } #calendar_large td { padding:0px 10px; border-right:1px solid #bfb7b1; width:14%; } #calendar_large .last_td { border:none; } #calendar_large .spacer { padding:15px 0px; border:none; } #calendar_large td h3 { /* DAY OF THE WEEK */ text-transform:uppercase; font-size:13px; line-height:16px; padding:0px; font-weight:normal; } #calendar_large td h2 { /* THE DATE */ font-size:18px; padding:0px; line-height:21px; } #calendar_large td p { /* THE TIME */ font-size:13px; padding:0px; line-height:16px; padding-top:16px; } /*************************************/ /**** DROPDOWN CALENDAR NAVIGATION *****/ /*************************************/ #nav2 { padding: 0px; margin: 0px; list-style: none; width:206px; height:31px; background-color:#a0a444; position:absolute; top:10px; left:0px; display:block; } /* the above code creates a very nasty IE 6 bug. When the dropdown appears on IE 6 it is the same width as the mother link and since the links themselves are narrower the green background shows all the way down the right side. Don't know why it is doing this. I've changed about everything I can to try to remedy it, so once again I am resorting to targeting IE 6 only and this time the dropdown itself will have to look a little different: it will be as wide as the mother links. I'm making this change in the document: includes/dropdowns_ie_hack.php */ #nav2 li { position: relative; width: 206px; color:#FFFFFF; line-height:31px; /* this centers the text in the main_links area (same as valign="middle" in a

tag) */ text-align:left; } #subpages.calendar_pages #content #nav2 li a { /* had to get very specific here to override some general styles */ font-size:13px; letter-spacing:2px; color:#FFFFFF; font-weight:normal; padding-left:18px; } #subpages.calendar_pages #content #nav2 li a:hover { /* had to get very specific here to override some general styles */ text-decoration:none; } #subpages.calendar_pages #content #nav2 ul li a { /* had to get very specific here to override some general styles */ display:block; height:20px; width:102px; font-size:12px; letter-spacing:0px; color:#5f4b3d; text-decoration:none; padding:0px 20px; } #subpages.calendar_pages #content #nav2 li ul li { background-color:#d4d7ab; float:none; line-height:20px; height:20px; list-style-type:none; width:142px; } /* the following code is responsible for a nasty bug in Firefox What is happening is that when the dropdown appears there is a 1 pixel space between the main links and the dropdown area. Correctly, IE 6 and 7 do not show this space - go figure! */ #subpages.calendar_pages #content #nav2 li ul { /* this block can be removed, just left it for demonstration purposes */ display: none; margin-top:0px; background-color:none; } /* an easy way to try to fix things without losing your original code is just to copy and paste the exact thing below what you suspect to be the offending code. Anything you do here will override what is above it as long as you have the exact same attributes. I tried a lot of things here. Tried the z-index which can stack things on the page according to how you set it. The highest numbers stack on top of the others. Tried changing margins and padding - that didn't work */ #subpages.calendar_pages #content #nav2 li ul { display: none; background-color:#d4d7ab; width:142px; position:absolute; /* this fixes a nasty IE 6 bug. For some reason IE 6 expands the

from the flow of the document and we can do that with position:absolute. Then with what is below we can place it exactly where we want it. */ top:31px; left:0px; } /* I made all kinds of changes in this code nothing worked so after working on this for about 45 minutes I have resorted to targeting only IE 6 and 7 with code to override the above. I've put that code in a separate file: includes/dropdowns_ie_hack.php As I've said elsewhere, I don't like doing this, but sometimes you either have no choice either because it can't be fixed or to continue would simply be too time-consuming for your project. */ #subpages.calendar_pages #content #nav2 li ul li a:hover { background-color:#f2f2e4; text-decoration:underline; } #subpages.calendar_pages #content #nav2 li:hover ul, #subpages.calendar_pages #content #nav2 li.over ul{ display: block; }