2 CSS related questions: how to line checkbox with text & change hyperlink in a class

HTML & CSS
1

Hello,

What is the CSS code for getting the text next to a check box to align up at the middle
of the check box? Equivalent to valign=“middle” of Tables.

You can see a sample of what I am looking for here:

The 2 items in question are the check box under username form field and the text is next to it, it is: “Keep me signed in”

Also, what is the CSS code for making a Huperlinked under a given Class to be a different color
than the Hyperlink for the whole site? So lets say the class in question is: log_in

I though it would be this:

log_in a:link {COLOR: white;}

but it is not working. In particular in the above reference web page, I am talking with link:
Forgot Username/Password
which is under password field.

Regards,

2

to make a link a different color you could do it one of two ways.

The BETTER ONE is to write rule specific to its cascade:

.log_in a {COLOR: white;} ( note the period)

you could also give the tag itself a class,
<a class=‘log_in’ href=“#”>link</a>
then you would do this:
a.log_in {COLOR: white;}

Check boxes are hard to get pixel perfect as each browser uses its own graphic to represent the element… however they are still default inline elements, so what youneed to do is set both to vertical-align middle, and line-height:1;

for example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title></title>
		<style type="text/css">
p label {font-size:200%;}
input, label, p { vertical-align: middle;line-height: 1}
		</style>
	</head>
	<body>
<p  ><input  type="checkbox" name='x'><label>Text</label></p>

hope that helps

3

Hi,

1st, Thanx for your suggestions.

But I am afraid they did not quite work. Well one almost did and the other not at all.

1- The 1st suggestion almost worked. That is after I added:

.log_in a {
COLOR: white;
}

.log_in a:hover {
COLOR: red;
}

I was still not able to get the hyperlinked item inside class log_in to stay white, BUT after I removed the
overall properties for hyperlink, then it worked Ok. That is I had to remove the property definitions:

a:link {color: blue;}
a:hover {color: red;}
a:active {color: #FFA500;}
a:visited {color: blue}

and then hyperlink item inside class log_in would stay white.
But then how do I define the properties for hyperlink for the whole site?

2- The 2nd suggestion did not work at all. I think there are multiple errors with it, for example you have:

<label>Text</label>
sholdnt this be <div class=“label”>Text</div>

And what is p label {font-size:200%;} for?

FYI, I actually entered the above exactly as you have it and it was a total mess.

Still thanks for your suggestions and looking forward to any corrections you have.

Dean.

4

Remember : LOVE HATE!!!


a:link {color: blue;}
a:visited {color: blue}
a:hover {color: red;}
a:active {color: #FFA500;}

also… does the mark up change when someone is logged in? right now there is no link at all:<div class=“log_in”>Password</div>

The rule I suggested would target: <div class=“log_in”><a href=“#”>Password</a></div>

My second suggestion was more abstract, sorry. I was trying to explain proper form construction. LABEL is an INLINE TAG ( as opposed to DIV, which is a block tag) which means… well, “label for the following input”. you can wrap any INLINE tag (not a DIV) next to it , but the label tag is just more semantic. After you have two inline tags next to each other, then you can just use vertical align… as I described. You will need to have both tags wrapped in a block level tag ( that’s why I used P… but TD, DIV, FIELDSET… are fine too)

As far as the font size 200% that was for demo purposes. Showing you that the input aligns to the middle regardless of how big the adjacent text ( inside the label) is. Hope that is more clear now.

5

Thanks for your help.
I need to study your points in more detail.
And study related CSS in more detail.

Hopefully I will quickly get to the desired results.
Will see.

6