Missing borders between the 2nd and 3rd row

HTML & CSS
1

Hi, I’m a newbie.

I am reading Build Your Own Website the Right Way, 3rd edition, Chapter 6, p233-237.
I cannot seem to figure out why am I missing the border in between the second and third row.

Here is the excerpt of table html code:

<TABLE class="events" summary="Details of upcoming club events and 
  dive trips">
  <CAPTION>Club events/dive trips for the next six months</CAPTION>
  <TR>
    <TH>Date</TH>
    <TH>Event Description</TH>
    <TH>Approximate Cost</TH>
    <TH>Contact</TH>
  </TR>
  <TR>
    <TD>12 July</TD>
    <TD>Committee meeting, deciding on next year's trips</TD>
    <TD>N/A</TD>
    <TD>Bob Dobalina</TD>
  </TR>
  <TR>
    <TD>19 July</TD>
    <TD>7-day trip to Hurghada(package deal)-limited space</TD>
    <TD>£260 pp(all inclusive), departing Luton</TD>
    <TD>Bob Dobalina</TD>
  </TR>
  <TR>
    <TD>5 August</TD>
    <TD>Ocean & Sports Diver Theory course</TD>
    <TD>Call for details</TD>
    <TD>Jeff Edgely</TD>
  </TR>
  <TR>
    <TD>12 August</TD>
    <TD>Murder Mystery weekend, Cotswolds(no diving!)</TD>
    <TD>£65 pp(accomodation included)</TD>
    <TD>Jill Smith</TD>
  </TR>
</TABLE>

Here is my css code:

table.events{
 border-collapse: collapse;
}

table.events th, table.events td{
 padding: 4px;
 border: 1px solid black;
}

table.events th{
 font-size: x-small;
 text-align: left;
 color: #ffffff;
 background: #241374 url(../backgrounds/header-bg.jpg);
 padding: 0 0 2px 2px;
}

table.events td{
 font-size: small;
 background: #e2edff url(../backgrounds/td.jpg) repeat-x top;
}

table.events caption{
 color: #000066;
 font-size: small;
 text-align: left;
 padding-bottom: 5px;
 font-weight: bold;
}

Thanks much for any help.

2

Hi twinklem, and welcome to the forums.

I’ve tried the code you posted above and I don’t see any problem with the border. Which browser are you using? (Not that that should matter, as your HTML and CSS is all valid.)

3

Thank much for your help!

I’m am using Firefox 7. You gave me an idea to try it at Chrome and IE and it works too!
Now I wonder why it’s not working in Firefox 7… hmmm.

4

That is weird, because I’m also using Firefox 7. I take it refreshing the page didn’t help?

5

Not at all! Did it work on your Firefox 7?

6

Yes. I tried it in Firefox first, and it was fine. Then I checked Chromium for good measure, and it was also fine. (I’m not on Windows at the moment, so couldn’t test IE.)

All I can say is, your code is fine and it ought to be working, so if I were you, I’d put it down to a little local gremlin and carry on. Maybe somebody else can suggest what’s causing it.

7

Looks like it’s a browser rendering bug I did see it; the bottom line on some cells appear thinner under the TABLE rows (it seems to depend upon Zoom level in the browser where they appear thin or don’t).

If that is what you saw basically just ignore that. Nothing to worry about (just try ‘Zoom In’ and ‘Zoom out’ and you should see it clear or reappear) its fine. If it was something else post your full code.

Regarding where to post? Here is perfect since it is a CSS and HTML syntax issue and you are a newbie. Typically if it’s to do with HTML or CSS code post here if you are unsure. I’ll get somebody to deal with the other post via speed-dial. :wink:

8

If I paste your code into an HTML file and view it in firefox, all the borders are there. What browser are you testing this in?

9

Hi twinklem,

there was some confusion, sorry!

There were three threads with the same topic. I’ve merged them into one and moved it to the CSS forum as you’ll have more exposure here. :slight_smile: