Hi, I'm having a problem with a table:
I want the leader dots on only the 1st line (date........event)
In September 4 section the leader dots are on the FIRST and LAST line. For the Second-last lines I thought if I created a new "tr" section (with different styling that would get rid of leader dots and vertical space). Obviously didn't work.
So I tried another way in the September 8 section: but the leader dots are on LAST LINE ONLY!
<!DOCTYPE html>
<html>
<head>
<title>FFS Calendar</title>
<meta name="description" content="Frankford Friends School provides an affordable and quality Quaker education for grades Pre-K to 8 in Philadelphia. Established in 1833.">
<meta name="keywords" content="Quaker, Quaker school, Quaker education, affordable education, Frankford, Philadelphia, academics, teachers, faculty, staff, students, classes, principal, meeting, Pre-K, Kindergarten, to 8th grade, Pre-K to 8, library, literacy, social studies, mathematics, art, science, music, Spanish, physical education, early care, after school care, EITC tax credit, scholarships, funding" />
<meta charset="utf-8">
<link href="cmainstyle.css" rel="stylesheet" type="text/css">
<link href="navigationMar2014.css" rel="stylesheet" type="text/css">
<style type="text/css">
/* To make older browser HTML5 aware */
header, nav, aside, article, figure figcaption footer {display: block;}
/*mobile version w bkgrd COLOR only*/
@media all and (max-width:800px){
body{background-color:#fc6;} /*YELLOW*/
}
</style>
<style type="text/css">
/***for CALENDAR page only ***/
.dot-table {
border-collapse: separate;
border-spacing: 0 1em;
}
.dot-table td {
width:100%;
max-width:18.75em; /*300px*//*was 480px=30em*/
overflow:hidden;
white-space:nowrap;
vertical-align:top;
line-height:110%;
padding:0;
}
.dot-table td:first-child:after {
content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
}
td.right {
text-align:right;
vertical-align:top;
line-height:110%;
}
tr.clear {padding-bottom:0; margin-bottom:0;}
td.clear {
padding-top:0;
padding-bottom:0;
margin-top:0;
margin-bottom:0;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- LEFT SIDEBAR -->
<aside>
<img src="/images2014/4girls-mar2014.jpg" alt="4 girls smiling">
<!--<figcaption></figcaption>-->
<!-- links -->
<aside class="sidebar">
<!-- SIDE LINKS -->
<hr class="topsiderule" />
<span class="sidetext"><a href="/2014site/contactFFS.html">Contact Us</a></span>
<hr class="siderule" />
<span class="sidetext"><a href="/2014site/calendarFFS.html" class="current">Calendar</a></span>
<hr class="siderule" />
<span class="sidetext"><a href="/2014site/directionsFFS.html">Directions</a></span>
<hr class="siderule" />
</aside>
<!-- END links -->
</aside>
<!-- ARTICLE -->
<article>
<span class="topicbar">• SCHOOL CALENDAR 2014–2015 •</span>
<p class="spacebefore">
<p style="font-size:11px; color:#339; font-weight:normal; text-align:center; margin-bottom:0;">No registration needed for the Open House events.</p>
<table class="dot-table">
<tr>
<td>Wednesday, September 3</td><td class="right">Pre-K/K Orientation</td>
</tr>
<tr>
<td>September 4,</td><td class="right">First Day of School</td>
</tr>
<tr class="clear">
<td class="clear">
8:30 am: Pre-K/K<br />
8:15 am: 1st–8th grade<br />
Noon closing for all grades
</td>
<td></td>
</tr>
<!-- september 5 event goes here -->
<tr>
<td>Monday, September 8, <br />
8:30 am: Pre-K/K<br />
8:15 am: 1st–8th grade<br />
2:45 pm closing for all grades
</td>
<td class="right">Classes begin, FULL DAY</td>
</tr>
</table>
</article><!-- END ARTICLE -->
</div><!-- END WRAPPER -->
</body>
</html>
