?
Solved

css html border-bottom-style puts line through cell

Posted on 2011-10-02
17
Medium Priority
?
562 Views
Last Modified: 2012-06-27
I have an application that produces html pages. The formatting is controlled via a style sheet.

Some of my line use the rowspan attribute to make all cells double height except for one.
If I have two of these in a row the border-bottom-style does puts the line through the double height of the first one.

Please check the code

Can you tell me why the line appears through the cell?
This code works
<table class="res-exotic-table">
    <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
       <tr class="res-exotic-line">
        <td class="res-exotic-bet">Quinella</td>
        <td class="res-exotic-number">2, 3</td>
        <td class="res-exotic-name">Where's Wally, Chelsea's Beauty</td>
        <td class="res-exotic-odds">22.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
    </table>

This code doesn't
<table class="res-exotic-table">

    <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
       <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
    </table>

stylesheet entries
.res-exotic-line{
color:#80FF80;
font-size:20pt;
font-weight:600;
border-bottom-style: solid;
border-bottom-color:#FFFFFF;
border-bottom-width: 2px;
}

.res-exotic-number{
width:15%;
text-align:left;
}

.res-exotic-name{
width:55%;
text-align:center;
}

.res-exotic-odds{
width:15%;
text-align:right;
}

.res-exotic-bet{
width:15%;
text-align:left;
color:#FFFFFF;
}

Open in new window

0
Comment
Question by:jetbet
  • 9
  • 5
  • 3
17 Comments
 

Author Comment

by:jetbet
ID: 36901312
BTW
I am using Firefox as my browser
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36901443
Copying the code provided to a new web page does not produce the line through the row-spanned cells as you describe in Firefox (or any other browser). I'm using Firefox 3.6.23. In fact, the bottom borders don't show up at all. No borders show. Firefox does not recognize borders applied to table rows in my testing.

It's better to apply all styles directly to the cells. With a simple change you can accomplish what you want (if I understand correctly):

.res-exotic-line td{
color:#80FF80;
font-size:20pt;
font-weight:600;
border-bottom-style: solid;
border-bottom-color:#FFFFFF;
border-bottom-width: 2px;
}

If I am misunderstanding what you are trying to achieve, perhaps you could provide a screen shot.
bottomBorders.jpg
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36901614
<tr>s are odd things in HTML.  Since they have no content of their own, very few attributes can be applied to them.  I took you code above and put it in a web page and it looks the same in IE8, Firefox, and Chrome.  Code and screenshot below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Table Border Botttom</title>
<style type="text/css">
<!-- 
body { background-color: #666666; }
/*stylesheet entries*/
.res-exotic-line{
color:#80FF80;
font-size:20pt;
font-weight:600;
border-bottom-style: solid;
border-bottom-color:#FFFFFF;
border-bottom-width: 2px;
}

.res-exotic-number{
width:15%;
text-align:left;
}

.res-exotic-name{
width:55%;
text-align:center;
}

.res-exotic-odds{
width:15%;
text-align:right;
}

.res-exotic-bet{
width:15%;
text-align:left;
color:#FFFFFF;
}
 
-->
</style>
</head>
<body>
<h1>Table Border Botttom</h1>
<p>This code works</p>
<table class="res-exotic-table">
    <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
       <tr class="res-exotic-line">
        <td class="res-exotic-bet">Quinella</td>
        <td class="res-exotic-number">2, 3</td>
        <td class="res-exotic-name">Where's Wally, Chelsea's Beauty</td>
        <td class="res-exotic-odds">22.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
    </table>
<p>
This code doesn't</p>
<table class="res-exotic-table">

    <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
       <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
    </table>

</body>
</html>

Open in new window

TableBottomBorder.jpg
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jetbet
ID: 36905304
Here is the behaviour I am getting. This error is dependent on the order of the rows.

The reason that I have tried to use the <tr> is that it makes it easier for the user to remormat the page using the stylesheet. The application that produces the page allows for certain filelds to be selected/deselected via check boxes and then formatted further by using a stylesheet editor I wrote for the job that is also part of the application.

I am using Firefox 7

Here is the full page code. This page is a frame contained in an page. Both are included

InnerPage.html
<HTML>
  <head>
    <LINK rel="stylesheet" type="text/css" href="bigscreen.css"></LINK>
  </head>
  <body class="bsg-results" id="config" timerCount="1">
    <script type="text/javascript" src="genericCountDown.js"></script>
    <script type="text/javascript" src="wz_tooltip.js"></script>
    <h1 class="res-head-meet-line">

      <span class="res-head-meet-number">Meeting 9</span>
      <span class="res-head-meet-name"> PALMERSTON NORTH GREYHOUNDS</span>
    </h1>
    <h1 class="res-head-race-line">
      <span class="res-head-race-number">Confirmed Results for Race 4</span>
    </h1>
    <br></br>

    <table class="res-wp-table">
      <tr class="res-wp-headers">
        <th class="res-wp-number-head" width="5%"></th>
        <th class="res-wp-name-head" width="65%"></th>
        <th class="res-wp-odds-head" width="15%">Win</th>
        <th class="res-wp-odds-head" width="15%">Place</th>
      </tr>
      <tr class="res-wp-line">

        <td class="res-wp-number">3</td>
        <td class="res-wp-name">Chelsea's Beauty</td>
        <td class="res-wp-odds">11.90</td>
        <td class="res-wp-odds">2.80</td>
      </tr>
      <tr class="res-wp-line">
        <td class="res-wp-number">2</td>

        <td class="res-wp-name">Where's Wally</td>
        <td class="res-wp-odds"></td>
        <td class="res-wp-odds">1.70</td>
      </tr>
      <tr class="res-wp-line">
        <td class="res-wp-number">1</td>
        <td class="res-wp-name">Glenaddis</td>

        <td class="res-wp-odds"></td>
        <td class="res-wp-odds">1.20</td>
      </tr>
    </table>
    <br></br>
    <table class="res-exotic-table">
      <tr class="res-exotic-line">
        <td class="res-exotic-bet">Quinella</td>

        <td class="res-exotic-number">2, 3</td>
        <td class="res-exotic-name">Where's Wally, Chelsea's Beauty</td>
        <td class="res-exotic-odds">22.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>

        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
      <tr class="res-exotic-line">

        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>

      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet">Double</td>
        <td class="res-exotic-number">9, 3</td>
        <td class="res-exotic-name">Groovy Shane, Chelsea's Beauty</td>
        <td class="res-exotic-odds">71.20</td>
      </tr>

      <tr class="res-exotic-line">
        <td class="res-exotic-bet">C-Double</td>
        <td class="res-exotic-number">9, 2</td>
        <td class="res-exotic-name">Groovy Shane, Where's Wally</td>
        <td class="res-exotic-odds">17.40</td>
      </tr>
    </table>

  </body>
</HTML>

OuterPage
<HTML>
  <head>
    <META http-equiv="Content-Type" content="text/html"></META>
    <title>BSG</title>
    <META http-equiv="refresh" content="1"></META>
    <script language="JavaScript"></script>
  </head>
  <body><iframe src="innerPage.html" name="Odds" frameborder="0" height="100%" width="100%">You need a Frames Capable browser to view this content.</iframe>

  </body>
</HTML>




LineThrough.gif
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36905335
Where is "bigscreen.css"?  I'm running Firefox 7 and you see what I get above.
0
 

Author Comment

by:jetbet
ID: 36905357
Here it is
bigscreen.css
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36905497
Your code works in Chrome and Safari, has the extra line in Firefox 7, and the lines are missing and the positions are off in IE8.  I would look at simplifying your CSS and using the underline on <td>s only.
0
 

Author Comment

by:jetbet
ID: 36905573
Thanks for that Dave.

It is a shame that the standard cascade is not implemented correctly as this makes updates on the fly much easier for the user.  I never use IE8 as a lot of things dont work.

I will have to leave it up to the user to see if they want to build this into all 3 TDs rather than have it cascade from the TR.

As you would have seen I use the TR for setting the font size etc in one place as well but at least that works.  
0
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 total points
ID: 36905759
I never put anything in a <tr> other than 'vertical-align'.  I would put the font size in the CSS for the <td> also, maybe make up a class for the things that are common for the <td>s in the display.

Tables and <tr> and <td> were created before CSS ever existed.  Browsers are big on backwards compatibility so there are a number of things like this.  I made up a page that shows how some things don't get inherited but I cna't find it right now.  #1 on the list is that tables don't inherit much from the body or anything else and that is because they traditionally have not.

I will also point out that you do not have a DOCTYPE on your page.  The DOCTYPE determine precisely how HTML and CSS is interpreted.  Leaving it out disables some things in IE and causes occasionally odd responses in other browsers.  http://www.w3.org/QA/2002/04/valid-dtd-list.html  As has been often said... "The nice thing about Standards is that there are so many to choose from."  I use HTML 4.01 Transitional most of the time because it seems to be the most cooperative one that will do the things I want.
0
 

Author Closing Comment

by:jetbet
ID: 36905897
Thanks for your help.

Not quite what I wanted to hear, but good to understand the limitations. I will take your sugestion and try adding an aditional class to the TDs with the common stuff added.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36905997
I know it's already closed, but I did notice that the line through only occurs when a double high row is preceded by a double high row. Then the second double high row gets the line through. A workaround might be to add a thin row (with a 1 pixel high image for content) between each double high row to trick Firefox into behaving the way you want, something like this:

<table class="res-exotic-table">
      <tr class="res-exotic-line">
        <td class="res-exotic-bet">Quinella</td>

        <td class="res-exotic-number">2, 3</td>
        <td class="res-exotic-name">Where's Wally, Chelsea's Beauty</td>
        <td class="res-exotic-odds">22.80</td>
      </tr>
      <tr><td colspan="4"><img src="images/spacer.gif" alt="" style="border:0" /></td></tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet" rowspan="2">Trifecta</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1</td>

        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">107.80</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis</td>
      </tr>
      <tr><td colspan="4"><img src="images/spacer.gif" alt="" style="border:0" /></td></tr>
      <tr class="res-exotic-line">

        <td class="res-exotic-bet" rowspan="2">First 4</td>
        <td class="res-exotic-number" rowspan="2">3, 2, 1, 8</td>
        <td class="res-exotic-name">Chelsea's Beauty, Where's Wally</td>
        <td class="res-exotic-odds" rowspan="2">287.60</td>
      </tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-name">Glenaddis, Desire</td>
      </tr>
      <tr><td colspan="4"><img src="images/spacer.gif" alt="" style="border:0" /></td></tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet">Double</td>
        <td class="res-exotic-number">9, 3</td>
        <td class="res-exotic-name">Groovy Shane, Chelsea's Beauty</td>
        <td class="res-exotic-odds">71.20</td>
      </tr>
      <tr><td colspan="4"><img src="images/spacer.gif" alt="" style="border:0" /></td></tr>
      <tr class="res-exotic-line">
        <td class="res-exotic-bet">C-Double</td>
        <td class="res-exotic-number">9, 2</td>
        <td class="res-exotic-name">Groovy Shane, Where's Wally</td>
        <td class="res-exotic-odds">17.40</td>
      </tr>
      <tr><td colspan="4"><img src="images/spacer.gif" alt="" style="border:0" /></td></tr>
    </table>
0
 

Author Comment

by:jetbet
ID: 36906217
Thanks for the sugestion Tommy, but I will go with the option of adding a second class to the TD elements and set the row common details there.

Although I am sure your suggestion would work, I do not know what other stylesheet settings the user may want to try and so there may be unforseen troubles with the additional row approach.
0
 

Author Comment

by:jetbet
ID: 36907448
Bad news for this.

Adding the class to the TD does not work either. If there is a double row above and below it the line still appears in the middle row.

This is Firefox behaviour as there is no issue with chrome.
0
 

Author Comment

by:jetbet
ID: 36907574
I went to post the bug and found I had been beaten to it.

It was first reported 2010-10-30 and relates to the border-colapse being set to collapse.
Bug # is 608531
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 36907639
I'm not sure how your program works for allowing users to manipulate the styles, but I think your solution is to just get a little creative with the table layout. Either put in a thin, empty row between consecutive double rows as I suggested earlier or maybe use nested tables. Anything you can do to eliminate two consecutive double rows should work around the bug.
0
 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 36908677
I can get it to 'work' using 'old techniques'.  The files are posted below.  I put the 'td' CSS at the end of the CSS file because it screwed everything up to put it first.  Then I modified the table tags with old fashioned attributes.

<table class="res-wp-table" cellspacing="0" border="0" align="center">

Lastly, I put &nbsp; in the empty 'td's so IE8 would draw a bottom border there.
InnerPage.html
bigscreen.css
0
 

Author Comment

by:jetbet
ID: 36914531
Thanks for all your help guys.

In the long run I have decided to go with Tommy's idea of adding the empty row as this gives me the least problems with my stylesheet editor which is used by our non-technical staff to manipulate the look and feel in real time
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
High user turnover can cause old/redundant user data to consume valuable space. UserResourceCleanup was developed to address this by automatically deleting user folders when the user account is deleted.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question