Help with field border

HTML & CSS
1

I’ve successfully changed the styling of the user_name_login border-color and width, but I’ve applied the same to the password_login, but I see no change. I’m not sure why. Any help will be appreciated.


<style type="text/css">
.form_label {
font-size: 12px;
color: #696969;
margin: 0px 0px 20px 0px;
}
#user_name_login {
width: 75px;
border-style:solid;
border-width: 1px;
border-color:#e5e5e5;
}
#password_login {
width: 40px;
border-style:solid;
border-width: 1px;
border-color:#e5e5e5;
}
</style>
2

The problem is that you don’t have any HTML. :slight_smile:

3

The code looks ok so as Ralph cleverly said we need to see the html :slight_smile:

As a tip use shorthand for border styles and save yourselves loads of code:


.form_label {
	font-size: 12px;
	color: #696969;
	margin:0 0 20px 0;
}
#user_name_login {
	width: 75px;
	border:1px solid #e5e5e5;
}
#password_login {
	width: 40px;
	border:1px solid #e5e5e5;
}

Historically there is actually greater support for the shorthand border styles than there is for the longhand (not that it matters these days).

4

Thanks for your replies.
Here is the html:

<div class="container1">
<form action="../login.php" method="post" accept-charset="UTF-8" class="middletext">
<p>
<style type="text/css">
.form_label {
font-size: 12px;
color: #696969;
margin: 0px 0px 20px 0px;
}
#user_name_login {
width: 75px;
border-style:solid;
border-width: 1px;
border-color:#e5e5e5;
}
#password_login {
width: 40px;
border-style:solid;
border-width: 1px;
border-color:#e5e5e5;
}
</style>

<label for="user_name_login" class="form_label">USERNAME</label>
<input type="text" name="user_name_login" id="user_name_login" size="10" />

<label for="password_login" class="form_label">PASSWORD</label>
<input type="password" name="password_login" size="10" />

<input type="hidden" name="cookie_time" value="10080" />

<img src="/images/arrow-red.png" alt="" />
<input type="submit" font-size="6px" value="" class="button-form2" />
<input type="hidden" name="submitted" value="yes" />
<input type="hidden" name="remember_me" value="remember_me" />
</p>
</form>
</div>
5

Hi,

You mentioned it works for the id called ‘user_name_login’ but not for the id called ‘password_login’.

See if you can see why that may be in the reduced code here:


<input type="text" name="user_name_login" [B]id="user_name_login"[/B] size="10" />
<input type="password" name="password_login" size="10" />

You don’t have an id called ‘password_login’ on the password input. :slight_smile:

(click and drag the mouse over the gray spoiler background to reveal the answer)

PS I assume that CSS was only in the body for testing?

6

Thanks for the help (and lesson). Much appreciated.

Why would leaving the CSS “in the body” not be a good thing?

Thanks again

7

a) because it’s invalid
b) because it should be external so can be controlled from the stylesheet (or at the very least in the head if not used in other pages)
c) because it’s messy

:slight_smile: