Solved

I've gone blind... CSS and tables...

Posted on 2006-07-18
12
485 Views
Last Modified: 2008-02-26
I have this simple code where I'm trying to style a table. It goes well until I try to apply an alternate class (spacerow) to 3 of the table rows - this gets ignored - and that really bugs me - I know the answer is simple but I can't see it - I've gone blind on this one... anyone??

The use og the TH tag is a due to the same problem - couldn't get an alternate class to work so the th tag saved me... but then the problem came back when I needed a special row :(

UPDATED: Just simplified the code to focus on the problem!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
  <style>
    .signuptable {
      table-layout: fixed;
      margin: 0px;
      width: 743px;
      border-collapse: separate;
      border-spacing: 3px;
    }
   
    .signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }
   
    .signuptable th {
      background-color: #e3e6e7;
      padding: 5px;
      font-weight: normal;
      color: #4c5d67;
      text-align: left;
    }
   
    .signuptable tr.spacerow {
      background-color: #ff0000;
      padding: 0px;
    }
  </style>
</head>

<body>

        <form Action="signup.asp?cmd=newuser" Method="Post" Name="frmSignUp">
        <table class="signuptable" align="center">
       
          <tr>
            <td width="175">Fulde navn:</td>
            <td width="330">
              <INPUT TYPE="TEXT" maxlength=50 NAME="fullname" VALUE="">
             
            </td>
            <th width="215">
              Dit navn! Det er dette navn der vil blive vist på EASYBLOG.dk.
            </td>
          </tr>

          <tr class="spacerow">
            <td colspan="3"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
       
          <tr>
            <td colspan="3" style="padding: 5px; padding-bottom: 0px; padding-top: 15px;" align="center"><INPUT TYPE="submit" NAME="OK" VALUE="Opret bruger"></td>
          </tr>
         
        </table>
        </form>

</body>
</html>
0
Comment
Question by:logicmedia
12 Comments
 
LVL 3

Expert Comment

by:cdemir
ID: 17129175
hi, do you mean this? (added : style="padding: 0px")

          <tr class="spacerow">
            <td colspan="3" style="padding: 0px"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17129246
BTW, you've closed of the <th width="215"> with a </td> in your code.

Jezcentral
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17129280
The problem is that the TR may have a style, but the TD's have a background-color of their own, rather than inheriting it from the TR. You can't see through the TD style to see the TR style, although it is there, and can be seen if you get rid of the TD background-color settings.

Jezcentral
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:logicmedia
ID: 17129321
jezcentral,

Well you are right - if I move the spacerow to the TD it works... It just puzzles me since I remember seeing the method in a book where they did apply it to every second TR in order to make the table more readable. I think! Gonna check it when I get home.


    .signuptable td.spacerow {
      background-color: #ff0000;
      padding: 0px;
    }


          <tr>
            <td colspan="3" class="spacerow"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
0
 
LVL 1

Assisted Solution

by:dharmeshmaniar
dharmeshmaniar earned 175 total points
ID: 17129350
your css class
.signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }

overrides the class on your tr.

Please make this changes in your css and html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
  <style>
    .signuptable {
      table-layout: fixed;
      margin: 0px;
      width: 743px;
      border-collapse: separate;
      border-spacing: 3px;
        background-color: #f4f5f6;
    }
   
    /*.signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }*/
   
    .signuptableth {
      background-color: #e3e6e7;
      padding: 5px;
      font-weight: normal;
      color: #4c5d67;
      text-align: left;
    }
   
.spacerow{
background-color: #FF0000;
}
  </style>
</head>

<body>

        <form Action="signup.asp?cmd=newuser" Method="Post" Name="frmSignUp">
        <table class="signuptable" align="center">
       
          <tr>
            <td width="175">Fulde navn:</td>
            <td width="330">
              <INPUT TYPE="TEXT" maxlength=50 NAME="fullname" VALUE="">
             
            </td>
            <td width="215" class=signuptableth>
              Dit navn! Det er dette navn der vil blive vist på EASYBLOG.dk.
            </td>
          </tr>

          <tr class="spacerow">
            <td colspan="3"><img src="images/blank.gif" alt="" width="740" height="2" border="0"></td>
          </tr>
       
          <tr>
            <td colspan="3" style="padding: 5px; padding-bottom: 0px; padding-top: 15px;" align="center"><INPUT TYPE="submit" NAME="OK" VALUE="Opret bruger"></td>
          </tr>
         
        </table>
        </form>

</body>
</html>
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17129371
Just as a further hint:

I've found that all-encompassing css statements about TDs like

   .signuptable td {
      background-color: #f4f5f6;
      padding: 5px;
    }

are too powerful sometimes. It's perfect for layout (like your padding: 5px; statement) as all table cells need to act the same way. However, when you start including presentation styles (like background-color: #f4f5f6;) when it will conflict with other styles (like alternating row colours) it's best to be more specific in your code, rather than trying to use general statements.

Try this sort of approach:

   .signuptable td {
      padding: 5px;
    }
   .signuptable tr {
      padding: 0px;
    }
    .signuptable tr.spacerow1 {
      background-color: #ff0000;
    }
   .signuptable tr.spacerow2 {
      background-color: #f4f5f6;
    }

Good luck! :)

Jezcentral.
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17129398
Logicmedia, you're right to try alternating TRs, as it makes far easier for the reader. The example you saw in the book would only work if the TDs did not have their own colour.

Jezcentral.
0
 
LVL 5

Accepted Solution

by:
Jezcentral earned 325 total points
ID: 17130324
Ha! Okay, one last point:

  .signuptable tr.spacerow td {
      background-color: #ff0000;
    }

If you put this in your syylesheet, this should override the current TD settings whenever you apply class="spacerow" to the TR.

Jezcentral.
0
 

Author Comment

by:logicmedia
ID: 17131419
I guess there is no perfect solution...

jezcentral: I like your last solution but it only "works" because of the colspan = "3". If not I would get the visible cell spacing  - of course because we are coloring the cells and not the row (which could work as well - guess that's a matter of design)... Anyway clever solution you found there!! (and btw you were right about the book ;-) )

dharmeshmaniar: I see your point in avoiding styling the TD... not a clean solution but it works and I guess that's what I needed!

Don't know yet which solution I will apply to my project yet... which ever fits the design picture best I guess...

Any way thanks both for your help... I really appriciate it!

Gonna split the points for this one!!
0
 

Author Comment

by:logicmedia
ID: 17131451
dharmeshmaniar: One last point which I forgot is of course that your solution of moving the background coloring to the table style messes up the border spacing which now gets colored... easily fixed tho by introducing a seperate class for the TD as with the TH I guess...
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17131658
Everyone's happy! :)

By the way, if you use:

.signuptable tr.spacerow td {
      background-color: #ff0000;
    }
0
 
LVL 5

Expert Comment

by:Jezcentral
ID: 17131719
Sigh. Sorry. I hit tab and return, and submitted early.

Anyway....

If you use both:

   .signuptable tr.spacerow {
      background-color: #ff0000;
    }

   .signuptable tr.spacerow td {
      background-color: #ff0000;
    }

that should work for all cases. Remember, the reason you are seeing no change is because of the colspan completely covering the TR. Styling the TR as well will fill in the spaces between the TDs when they are not colspanned.

Happy coding!

Jezcentral.
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

813 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now