Home/ Questions/Q 4044100
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T13:12:40+00:00

I don’t have experience as a web designer, but in effort to learn more

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0