Solved

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

Posted on 2006-07-18
12
506 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

690 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