Message border should be the same width

[toplisek]

I have problem, that CLASS for error should have constant width.
It works if I have error like:

 echo '<p style="font-family: Trebuchet MS, Arial, Sans-serif;font-size: 12px;
border:1px solid #FF3300; padding:2px; width:300px;font-weight: normal;">';
echo 'Please change error:';
echo (isset($error)) ? $error : "&nbsp</p>"; 

But if I use CLASS it will not be width 300px, just 100% width

e.g. for CLASS :

.message { width:300px;
font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 12px;
line-height: 16px; text-decoration: none;
background-color: #FFFFFF;border:1px solid #FF3300; padding:2px } 

Do you know what can be wrong in CLASS?

[mwinter]

echo '<p style="font-family: Trebuchet MS, Arial, Sans-serif;font-size: 12px;
border:1px solid #FF3300; padding:2px; width:300px;font-weight: normal;">';

There are two issues with those style declarations. The first is that you are using pixels to set font size. Don't. Use percentages instead, and preferably 100% for body text. Read the posts from both Twey and myself in a recent thread. The second is that you are specifying a width in pixels for something that at least appears to contain predominantly text. An em length, perhaps 25em, is better as it is relative to the size of the font and will help produce a much more fluid layout.

.message { width:300px;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;
line-height: 16px; text-decoration: none;
background-color: #FFFFFF;border:1px solid #FF3300; padding:2px }

Similar problems exist here, though you've added a few more:

• Verdana on the Web is usually a very bad idea. See a post in a previous thread, as well as my followup.
• As you shouldn't be using pixels for font size, it stands to reason that it's also a bad idea for line height, too.
  
  

  line-height: 1.33;

  is more or less equivalent.
• You've specified a background colour, but no foreground. They should be paired.

Do you know what can be wrong in CLASS?

Other than the problems described above, there's nothing syntactically wrong. What does your markup look like when you try for this latter approach?

Mike

[toplisek]

What is actually em measure? How can I calculate to px if e.g
width of border is 23em

Need help as I'm new to this

[mwinter]

What is actually em measure?

The em unit is font-relative: 1em is equal to the computed value of the font-size property, 2em is twice the size, and so forth.

In other words, if text in a particular element was 16px high, then a length value of 1em would be the same as 16px. If the value was 0.8em, then it would be same as 12.8px (80%), and if it was 3.7em, it would be 59.2px (370%).

The advantage is that if the user views the document with a larger font size (because of a minimum font size control, or some other preference), containers will adjust as well. This can help ensure that there's no inadvertent overflow or clipping, either of which will seriously harm the readability of a document.

How can I calculate to px [...]

Divide the desired pixel width by the font size, in pixels.

Hope that helps,
Mike