3 replies [Last post]
tebk77
Offline
Regular
Last seen: 7 years 46 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Hi, I'm having a problem with my table:

I only want the leader dots on 1st line (date........event)

1. 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.

2. So I tried another way in the September 8 section: but the leader dots are on LAST LINE ONLY!

here is link to file:
http://www.frankfordfriendsschool.org/2014site/calendar-test1.html

How can this be fixed?

I wouldn't be surprised if this had to do with the child factor. I've had a hard time understanding child-factor, -nth factor, etc.

here is the html5 coding:
This did pass in the W3C validator.

<!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, 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">&bull; SCHOOL CALENDAR 2014&#8211;2015 &bull;</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&nbsp;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">
              					&nbsp;&nbsp;&nbsp;8:30 am: Pre-K/K<br />
              					&nbsp;&nbsp;&nbsp;8:15 am: 1st&#8211;8th&nbsp;grade<br />
								&nbsp;&nbsp;&nbsp;Noon closing for all grades
							</td>
							<td></td>
					</tr>
 
						<!-- september 5 event goes here -->
 
					<tr>
						<td>Monday, September 8, <br />
              				&nbsp;&nbsp;&nbsp;8:30 am: Pre-K/K<br />
              				&nbsp;&nbsp;&nbsp;8:15 am: 1st&#8211;8th&nbsp;grade<br />
							&nbsp;&nbsp;&nbsp;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>

Please help! I've been stuck for awhile.
Thanks.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi tebk77, Don't you want

Hi tebk77,
Don't you want something like:
.dot-table tr:first-child td:after {

tebk77
Offline
Regular
Last seen: 7 years 46 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Do you mean...?

Do you mean try replacing

.dot-table td:first-child:after {
    content:" . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . "
}

with

.dot-table tr:first-child td:after {  etc...
}

If so it didn't work.

Any other suggestions?
Thanks!

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi tebk77 it works for me,

Hi tebk77
it works for me, are you sure it's not cached.