MOHAMMED NASEER wrote:
> can someone tell me, a newbie, why in code (A) the 'width' works, but
> in code (B) it doesn't :
It would be much easier to study the issue if you had posted URLs instead of
code fragments. For one thing, nasty things may happen to HTML markup when
posted to Usenet (e.g., lines broken where they must not be broken). And /*
... */ is _not_ a comment in HTML markup, it's just character data.
> .first_label {
> width: 230px; /*
> <------------------ NOT FUNCTIONING */
> font-weight: bold;
> text-align: right;
> margin-right: 10px;
> }
[...]
> <fieldset><span class="first_label">Rate your </
> span> /* <------------------ NOT
> FUNCTIONING */
I have no idea why you want to set the width to 230px (the effect is odd),
but in this case the width property has no effect, since the element is an
inline element. The span element is inline by default, and you have not set
anything to change that.
You could, for example, set float: left on it to turn it to a block element
(as far as CSS is concerned) and yet place it on the same row as the
subsequent content.
> ( I would imagine 'fieldset' in B to be a block level element just
> like 'p' in A,
It is a block element in HTML terms, by definition, and this implies that it
is by default a block element in CSS terms, too. This has no impact here,
though, since you are not setting width on that element but on an inner
element.
> and 'span' in both A and B is inline element - but I
> don't see why in A it works but in B it doesn't )
Well, yes, span is inline in HTML and thus by default inline in CSS too.
Whether span is the right markup here is debatable, and in (B), you seem to
be using it instead of a legend element - note that now your fieldset has no
legend, which is a syntax error, though probably harmless as regards to
rendering. However, it's best to get the markup right first, because
otherwise you would first solve styling problems with wrong markup, then
realize the mistake, and you'd have to work out the styling again.
Anyway, in (A) you have float: left on the span element. This explains the
difference, since float: left "generates a block box that is floated to the
left", to quote the CSS 2.1 proposed recommendation.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
