?
Solved

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

Posted on 2006-07-18
12
Medium Priority
?
510 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
Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

 

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 700 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 1300 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

765 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