Solved

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

Posted on 2006-07-18
12
464 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
Comment Utility
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
Comment Utility
BTW, you've closed of the <th width="215"> with a </td> in your code.

Jezcentral
0
 
LVL 5

Expert Comment

by:Jezcentral
Comment Utility
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
 

Author Comment

by:logicmedia
Comment Utility
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
Comment Utility
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
Comment Utility
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 5

Expert Comment

by:Jezcentral
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Everyone's happy! :)

By the way, if you use:

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

Expert Comment

by:Jezcentral
Comment Utility
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
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.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…

743 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

16 Experts available now in Live!

Get 1:1 Help Now