How to combine class and inline style

  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

Hi,
I specified a certain class in an external css file (basically it is colors and alignments meant to be used in a table's cells). In particular instances I want to also specify cell's dimensions which for different cells are different by using inline style:
Code: [ Select ]
<td class="cell" style="width:100px;">

It does not seem to work- all attributes of the class are totally ignored when there is inline style.
Is there a way of combining class and inline style?
  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England

Post 3+ Months Ago

no it won't inline styles have to be enclosed in tags I think, like so
Code: [ Select ]
<style>td .cell{width:100px;}</style>
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1827
  • Loc: In the Great White North

Post 3+ Months Ago

No they don't have to be separated out. The OP code will work however you need to understand inheritance issues. Inline styles will always override linked styles meaning in the following example:

HTML Code: [ Select ]
<style>
   .example {background:blue;}
</style>
<div class="example" style="background:red;">content</div>
 
  1. <style>
  2.    .example {background:blue;}
  3. </style>
  4. <div class="example" style="background:red;">content</div>
  5.  


Your div background would be red. You can usually override this progression by using the !important attribute in your linked style

HTML Code: [ Select ]
<style>
   .example {background:blue !important;}
</style>
<div class="example" style="background:red;">content</div>
 
  1. <style>
  2.    .example {background:blue !important;}
  3. </style>
  4. <div class="example" style="background:red;">content</div>
  5.  


thereby producing a blue div.

More info from The W3C
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Quote:
It does not seem to work- all attributes of the class are totally ignored when there is inline style.


This makes me believe you've got a syntax error in your HTML, or an unexpected match with another selector. I've never heard of something like you've explained happening under any other circumstances and I can't reproduce it with a simplified test page.

HTML Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <title>Title</title>
   <meta http-equiv="content-type" content="text/html;charset=utf-8" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <link rel='stylesheet' type='text/css' href='style.css' />
</head>
<body>
   <div>
   <table cellspacing="10" cellpadding="10">
      <tr>
         <td class="cell">One</td>
         <td class="cell" style="width:100px;">Two</td>
      </tr>
   </table>
   </div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4.    <title>Title</title>
  5.    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  6.    <meta http-equiv="Content-Style-Type" content="text/css" />
  7.    <link rel='stylesheet' type='text/css' href='style.css' />
  8. </head>
  9. <body>
  10.    <div>
  11.    <table cellspacing="10" cellpadding="10">
  12.       <tr>
  13.          <td class="cell">One</td>
  14.          <td class="cell" style="width:100px;">Two</td>
  15.       </tr>
  16.    </table>
  17.    </div>
  18. </body>
  19. </html>


CSS Code: [ Select ]
.cell {background:#f00; color:#0f0;}


Can you post a more complete version of the offending code, and note which browsers you're looking at it with ?
  • lzr
  • Novice
  • Novice
  • lzr
  • Posts: 28

Post 3+ Months Ago

joebert wrote:
This makes me believe you've got a syntax error in your HTML, or an unexpected match with another selector. I've never heard of something like you've explained happening under any other circumstances and I can't reproduce it with a simplified test page.


You are right, I've found a typo in my script. Sorry for wasting your guys time on this.

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.