Forum Moderators: not2easy
I am trying to use the negative text-indent rule to hide some text in a Label element. I am doing this so the form isn't cluttered up but screen readers can still see it.
Anyway it doesn't appear to be working. Below is the HTML code and the CSS.
Please help if you can.
*****HTML*****
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Test 2</title>
<link rel="stylesheet" type="text/css" href="form2css.css"/>
</head>
<body>
<p>
<label for="dateOfBirth">Date of birth:</label>
<input name="dateOfBirth" id="dateOfBirth" type="text"/>
<label id="monthOfBirthLabel" for="monthOfBirth">Month of birth:</label>
<select name="monthOfBirth" id="monthOfBirth">
<option value="1">January</option>
<option value="2">Febuarary</option>
<option value="3">March</option>
</select>
<label id="yearOfBirthLabel" for="yearOfBirth">Year of birth</label>
<input name="yearOfBirth" id="yearOfBirth" type="text"/>
</p>
</body>
</html>
*****CSS*****
#monthOfBirthLabel, #yearOfBirthLabel {
text-indent: -1000em;
width: 0;
}
input#dateOfBirth {
width: 3em;
margin-right: 0.5em;
}
select#monthOfBirth {
width: 10em;
margin-right: 0.5em;
}
input#yearOfBirth {
width: 5em;
}
I have tried putting this in forme tags with a legend and also in fieldset tags but nothing works. I know from previous style sheets that the negative text-indent rule usually works.
Please help if you can...
Thanks in advance
Erdy
If you want to get them to accept your text-indent, you need to add display:block; to your rule.
