Why is this CSS rule not applied?

Question

I don't have experience as a web designer, but in effort to learn more about CSS, I'm doing the stylesheet for my own page. I am aware the way I'm doing it now probably sucks, is not the recommended way, but please help me understand why this isn't working.

I have this form:

<form action="/register" method="POST" id="registration_form">
    <p>
        <label for="username">Username</label>
        <input type="text" id="username" name="username"/>
    </p>
    <p>
        <label for="password">Password</label>
        <input type="password" id="password" name="password"/>
    </p>
</form>

I have included Eric Meyer's CSS reset, before including my own stylesheet, and I have this rule in my CSS:

#registration_form label {
    width: 100px;
}

I also tried to put:

label {
   width:100px;
}

I tried changing the value to more than 100px, but still it doesn't get applied. If it helps, I have a layout, which contains something like this:

<body>
   <div id="navigation">
     ...
   </div>
   <div id="pagebox">
     {% block body %}{% endblock %}
   </div>
</body>

This is a jinja2 template, and the content of body is added by some different view, when it's rendered. Here are the styles for these id's:

#navigation {
    text-align:center;
}

#navigation ul li {
    display:inline;
    margin-left:50px;
}

#pagebox {
    margin-left:50px;
    margin-right:50px;
    height:600px;
    background-color: #20f000;
}

Why isn't my label style getting applied?

Community · Accepted Answer · 2017-05-23 11:47:49Z

8

I believe that <label> has the display:inline by default, so width and height do not affect it. Try adding display: inline-block to it.

Added: As member Geoff Adams noted in the comments, there are some browser compatibility issues with display: inline-block. In this specific scenarion it should work, but see here for more information.

edited May 23, 2017 at 11:47

CommunityBot

11 silver badge

answered Mar 6, 2011 at 10:05

Vilx-

107k93 gold badges294 silver badges432 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Geoff Adams Over a year ago

display: inline-block isn't truly cross-browser unfortunately. If you need it to work on older browsers (read: Internet Explorer) then you may need to display: block, float: left and enter the wonderful world of the floating box model :)

Vilx- Over a year ago

@Geoff Adams - how old IE are we talking? IE6 would support this specific scenario.

Geoff Adams Over a year ago

well, IE6/7 support requires a CSS trick/hack to make it work, makes it slightly less simple than a one line solution. Looking at it now, even FF2 had issues with inline-block too.

johnhunter Over a year ago

Note: if you make an element float then you can use box properties like width anyway. If you do use float you should also set display: inline to prevent IE bugs like double-margin.

Erasus Over a year ago

Sorry for very old comment, but I'd like to know if there's such tool that checks if particular property will actually work on element? Because many times I find myself wondering why some things don't work, it would be great to have such tool where you can scan your css and know if properties that you apply actually are valid.

|

Guffa · Accepted Answer · 2011-03-06 10:13:16Z

3

The label element is an inline element, so the width style doesn't apply to it.

You could make the label and input element float inside the p elements. Applying overflow to the p element makes it work as a container for the floating elements:

#registration_form p {
  overflow: hidden;
}
#registration_form p label {
  float: left;
  width: 100px;
}
#registration_form p input {
  float: left;
}

answered Mar 6, 2011 at 10:13

Guffa

703k111 gold badges760 silver badges1k bronze badges

1 Comment

Geo Over a year ago

Oh my god! This is more complex than I ever imagined :)

Collectives™ on Stack Overflow

Why is this CSS rule not applied?

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related