Problem with CSS inheritance

Discussion in 'CSS' started by mogsub, Jul 16, 2009.

0
  1. #1
    Hi,

    I have the following code

    <style type="text/css">


#mainc{
	width: 780px;
	background-color:#FFFFFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border: 10px solid #FFFFFF;
        text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:x-small;
}

table, td{
	font:100% Arial, Helvetica, sans-serif;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th, td{text-align:center;padding:.5em;border:1px solid #fff;}
th{background:#d80119 url(/images/tr_back.gif) repeat-x;color:#fff;}
td{background:#ffffff;color:#000000;}

.sqText {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	font-size: 13px;
}
.sqTitle {
	font-family: Arial, Helvetica, sans-serif;
	color: #FF7400;
	font-weight: bold;
}
.tdsquares {
	padding-left: 10px;
}
.sqTextCopy {
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}

</style>

</head>

<body>

<div id="mainc">
<table width="800" border="0" cellpadding="0" cellspacing="0" class="squares">

   <tr>
    <td height="296" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
   
      <tr>
        
		<td width="250" height="132" valign="top" bgcolor="#5CCCCC" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">1</p>
            <p class="sqText">1 </p></td>
			
          <td width="250" valign="top" bgcolor="009999" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">2 </p>
          <p class="sqText">2</p></td>
		  
          <td width="250" valign="top" bgcolor="#1D7373" class="tdsquares"><p class="sqText">&nbsp;</p>
            <p class="sqTitle">3</p>
          <p class="sqText">3 </p></td>
		  
      </tr>
	  <td></tr>
    </table>
</body>
</html>
    HTML:
    And I want my 3 cells to have different colours but they inherit the value from table class

    How should I fix my CSS code so that the text and colours inside the 3 cells are correct?

    Thank you
     
    mogsub, Jul 16, 2009 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well... If what I'm seeing is correct you APPEAR to be using a table for layout... With enough presentational markup in there to make one ask why you are bothering with CSS in the first place.

    As it is I suspect that sqTitle's should be TH on their own rows separate from sqText which should be the TD, with that non-breaking space in a leading P not even belonging on the page. The presentational classes (tdsquares) do nothing to say what each TD actually is, making that a wee bit less than useful... and the whole math for the layout makes no sense since you have 750px in TD's nested inside a table that should only end up 296 pixels wide thanks to the TD around it.

    I have the feeling you are overthinking your layout and attempting to use layout techniques a decade out of date. Even using tables I'm fairly certain something's not kosher here. (as evidenced by the use of width, height, valign, border, cellpadding, bgcolor...)

    WAIT, bgcolor... attributes are always trumped by CSS... Which is why usually anyone using CSS has LONG SINCE STOPPED USING THEM.

    That list of attributes I was just rattling off - those ALL need to go... and your classes need to go as well since they too should say WHAT your content is, not how they are going to appear.

    Do you have a picture of what you are actually trying to achieve for appearance with some actual data plugged into it? What type of site is this for and what is the data in these columns?
     
    deathshadow, Jul 16, 2009 IP