Back To Website Design Forum

How to combine class and inline style

  • lzr
  • Novice
  • Novice
  • No Avatar
  • Joined: May 09, 2008
  • Posts: 28
  • Status: Offline

Post April 15th, 2010, 10:02 am

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?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post April 15th, 2010, 10:02 am

  • tastysite
  • Proficient
  • Proficient
  • User avatar
  • Joined: Apr 09, 2008
  • Posts: 349
  • Loc: Brighouse, West Yorkshire, England
  • Status: Offline

Post April 15th, 2010, 11:10 am

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
  • Joined: Jul 11, 2005
  • Posts: 1828
  • Loc: In the Great White North
  • Status: Offline

Post April 15th, 2010, 1:43 pm

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
If at first you don't succeed F1... If that doesn't work try Google!
//// Designer, Developer & Teacher - Interactive, Motion and 3D \\\\
Portfolio at WhenImNotSleeping.com
  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Joined: Feb 10, 2004
  • Posts: 13455
  • Loc: Florida
  • Status: Offline

Post April 16th, 2010, 1:31 am

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 ?
Strong with this one, the sudo is.
  • lzr
  • Novice
  • Novice
  • No Avatar
  • Joined: May 09, 2008
  • Posts: 28
  • Status: Offline

Post April 16th, 2010, 6:47 am

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.

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 168 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
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.