SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Missing borders between the 2nd and 3rd row

    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:

    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:

    Code CSS:
    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.
    Last edited by Mittineague; Oct 27, 2011 at 15:51. Reason: adding bbcode tags

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    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. #3
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    That is weird, because I'm also using Firefox 7. I take it refreshing the page didn't help?

  5. #5
    SitePoint Member
    Join Date
    May 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not at all! Did it work on your Firefox 7?

  6. #6
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,227
    Mentioned
    265 Post(s)
    Tagged
    5 Thread(s)
    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. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. ;-)

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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. #9
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble




Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •