Need help with a CSS problem

[OldRod]

Trying to stylize my user registration screen and have run into a problem.

In my style.css file I have this:

Code: Select all

#pageMiddle > #register > input[type=text], input[type=password] {
	border: 1px solid black;
	display: block;
	margin: 0 0 1em 0;
	background: #ADA593;
}

Then in my registration page, I have this:

Code: Select all

<div id="pageMiddle">
     <div id="register">
          <h4>Choose a Username:</h4>
          <input type="text" name="username" />
          <h4>Password:</h4>
          <input type="password" name="password" />
     </div>
</div>

What is happening is the password box gets the custom style, but the textbox does not. I tried styling each one individually (just do #pageMiddle > #register > input[type=text] and then neither of them get the style. Only if I have them both on the same line does it work, and then only the 2nd element listed gets the style. If I swap text and password, then the text fields get it, but password fields don't.

What am I doing wrong?

[Epiales]

Trying to stylize my user registration screen and have run into a problem.

In my style.css file I have this:

Code: Select all

#pageMiddle > #register > input[type=text], input[type=password] {
	border: 1px solid black;
	display: block;
	margin: 0 0 1em 0;
	background: #ADA593;
}

Then in my registration page, I have this:

Code: Select all

<div id="pageMiddle">
     <div id="register">
          <h4>Choose a Username:</h4>
          <input type="text" name="username" />
          <h4>Password:</h4>
          <input type="password" name="password" />
     </div>
</div>

What is happening is the password box gets the custom style, but the textbox does not. I tried styling each one individually (just do #pageMiddle > #register > input[type=text] and then neither of them get the style. Only if I have them both on the same line does it work, and then only the 2nd element listed gets the style. If I swap text and password, then the text fields get it, but password fields don't.

What am I doing wrong?

Strange, as I just put your code into an empty page and both get the custom style. Do you have other css or styles that conflict with them?

[Epiales]

Maybe try something like:

Code: Select all

<style>
   input[type=text], input[type=password] {
   border: 1px solid black;
   display: block;
   margin: 0 0 1em 0;
   background: #ADA593;
}
   </style>
   <div class="pageMiddle">
   <div class="register">
   <h4>Choose a Username:</h4>
   <input type="text" name="username" />
   <h4>Password:</h4>
   <input type="password" name="password" />
   </div>
</div> 

Works for me as well.

[OldRod]

Yeah, if I remove the #pageMiddle and #register div names, then it works, but this form is inside those divs and I wanted it styled differently than other forms on the site if I can

I will keep tinkering with it

[Epiales]

Yeah, if I remove the #pageMiddle and #register div names, then it works, but this form is inside those divs and I wanted it styled differently than other forms on the site if I can

I will keep tinkering with it

Well, I've found out that CSS can be very touchy ! Hope you get it figured out soon. I also, as said before, took your code and plugged it into a blank file and it all worked. It formatted everything. So not sure! Thought maybe changing them individually might help and turning them into class.

[OldRod]

I got it working. I just made a special div class "reginput" and used that for those input boxes

[Epiales]

I got it working. I just made a special div class "reginput" and used that for those input boxes

Awesome! Glad you have it working