[deanna.c]

I am having some problems with styling my form. I need 3 input boxes for the date. The first 2 are the same size and the last one is a little bigger (for the year). I have been messing around with last-child but i can't get it to work.

My HTML code:

				<div class="section">
					<label for="start"> Earliest start date? 
					<span class="red"> * </span> </label> </br>
					
					<input type="text" name="MM" id="start" /> /
					<input type="text" name="DD" id="start" /> /
					<input type="text" name="YY" id="start" /> </br>
					<span class="underline"> MM &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
					DD &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YYYY </span> </br>
				</div>	

My CSS code:

#start{width: 30px;
}
.start input.last-child text{width: 50px;
}

[Dormilich]

that's because last-child is a pseudo class (they use : not .), i.e.

.start input:last-child text

This post has been edited by Dormilich: 14 February 2012 - 01:55 AM

[deanna.c]

ooooh ok. Thanks.

I added that in. But it still isn't working.. I'm at my wit's end with this one.

I suppose i could add a different id for those boxes that need different sides.

Or is there a way to create several different textbox's for the same label under the same input statement. Like a broken textbox for serial codes and whatknot?

[revolutionx]

For last-child to work, you need to wrap the inputs in a div, for example if you take a look at this test I did with your code: http://jsfiddle.net/qAanA/ you'll see that it works.

Also, your break tags are wrong, they should be: <br />

[Dormilich]

revolutionx, on 15 February 2012 - 11:36 AM, said:

Also, your break tags are wrong, they should be: <br />

nope, they’re not wrong. self-closing tags are only required in XHTML served as "application/xhtml+xml". HTML 4 explicitly forbids it and HTML5 allows it. though no browser will complain unless you’re in XML mode.

[deanna.c]

I took a look at the code sample you provided from mine with the container tags. When you change the size of the last child the textbox doesn't change. Thanks though!

Also my </br> tags did work but didn't validate. So i had to change them to <br />. You where both right there.

[Dormilich]

you’re right there.

PS. only in XHTML you can do: <br></br> *gg*

[revolutionx]

Can you post your latest code + CSS?

[deanna.c]

I got it to work adding in a second ID but i don't think this would help me if i was going to actually make this form do anything. But i need to submit this code tonight so im submitting this so far. I still would like to figure it out though for future use.

HTML:

<div class="section">
					<label for="start"> Earliest start date? 
					<span class="red"> * </span> </label> <br/>
					<input type="text" name="MM" id="start" /> /
					<input type="text" name="DD" id="start" /> /
					<input type="text" name="YY" id="start2" size="50" /> <br/>
					<span class="underline"> MM &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
					DD &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; YYYY </span> <br/>
				</div>	

CSS:

#start{width: 30px;
}

#start2{width: 50px;
}

*edit* took out that size="50" that wasn't doing anything

[revolutionx]

You need to wrap just the inputs in a div. So for example you could do this:

<div>
	<input type="text" name="MM" id="start" /> /
	<input type="text" name="DD" id="start" /> /
	<input type="text" name="YY" id="start2" size="50" />
</div>

That way it's the last-child in that div.

And for the CSS

.section input[type="text"]:last-child {border:1px solid red;}

[deanna.c]

i tried that but i didn't work. In the example code that was posted it didn't work either. I fiddled with the numbers and it didn't change the size of the box.