|
CSS - Is Setting A Form Label To Display: None With Javascript Accessible?
Hi all,
I'm implementing a web form where the labels for each input will appear as the default value rather than having the actual label elements visible. The label elements themselves will still be present in the markup for accessibility. I want to visually remove the labels while still having them acknowledged by screen readers. I'm aware of the left-offset trick, but I've read several articles where it's suggested to simple set the labels to display: none with JavaScript after the DOM has loaded. This seems to assume that screen readers will ignore this, otherwise there you might as well just set them as display: none in the first place. Can anyone confirm that a screen reader will still acknowledge a label element if display: none has only been applied after the DOM load via JavaScript? Thanks! Similar TutorialsHi, I have a webpage with a 3 column layout using css. In the left column I have a form which takes input and relays it to another php script which either populates another form or produces output. I would like to control where the output of each form is displayed. With frames I just use the target command. Some of the output will be in the same div as the original form (if the output is a form) or in the middle column if it is an output of results. I have been told that javascript would accomplish this. Any thoughts? Thanks, R Haynes for some reason when i declare a div as "display: inline", the width is ignored. as soon as i take display: inline out, the width goes to what i set it to. Code: #jobs_list{
background-color: #ffe6c4;
padding: 5px;
clear: both;
overflow: auto;
width: 600px;
}
#jobs_list .heading{
width: 200px;
display: inline;
}
#jobs_list .title{
font-weight: bold;
text-align: left;
}
#jobs_list .company{
text-align: center;
}
#jobs_list .location{
text-align: right;
}
<div id="jobs_list">
<div class="heading title">Title</div>
<div class="heading company">Company</div>
<div class="heading location">location</div>
</div>
Okay i have been working on this for a while now, and i hate asking for help.. but i have given up on it. Firstly i started using display:inline-block; which meant i could have a width so my hover over menu effect would work. But this did not work in IE7 which means it is useless to what i am doing. So i then moved onto Display:inline; This worked fine, in both IE and Firefox, but the width cannot be set with this value. This value just wraps itself around the content. But i need to set a width to the Inline value. Any help? CSS: Code: #navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li {
display: inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
text-align:center;
}
#navcontainer ul li a{
display:inline;
width: 65px;
height: 21px;
background: url("images/tabbg.gif") 0 0 no-repeat;
text-decoration: none;
}
#navcontainer ul li a:hover{
background-position: -65px 0;
color:#FFFFFF;
}
html: Code: <div id="navcontainer"> <ul> <li><a href="#">Milk</a></li> <li><a href="#">Eggs</a></li> <li><a href="#">Cheese</a></li> <li><a href="#">Vegetables</a></li> <li><a href="#">Fruit</a></li> </ul> </div> Also a link to the actual page is http://www.therow2.com/adsense/zzzzzzzzzzzzzzz.php Hello, I am working on a website where all the necessary data is held in an MySQL database, the pages are generated by PERL and formatted using CSS. I want to make the site accessible by a cellphone. Can someone point in the right direction. What should I be reading up on, what languages are required? Does anyone have an good example website I can visit with my cell phone? Can I use Flash? Thanks for the help. webg I have a form label styled from an external stylesheet. I don't understand why some style options don't seem to work. For example, setting the width of the label seems to have no effect. But setting the font does work. I assume it is because of some parent div style? The stylesheet is from a template in which I am attempting to make some additions. I'm actually having the same problem with unordered lists. Could someone explain what would cause some style options to be ignored? I can post the stylesheet, but it is rather long. Thanks. Hello. I have code like this one Code: <div class='captionCell cbregName'> <label for="cbpplan10">AVATAR DESIGN</label> </div> how to hide just that label. Since there is many <div class='captionCell cbregName'> but labels are named different like for="cbblane9"... Hello. I'm nesting inputs within labels to enable me to position the inputs underneath their labels. (I use relative positioning for the labels and absolute positioning to move the inputs underneath and slightly to the right.) For one label I don't want any text to appear. I could use a non-breaking space but I'd ideally like to keep the label but just not show the text. But I can't hide it because it contains the input What would be a good way to approach this? (I've given the label a class to identify it/them.) Code: <form id="myForm" method="">
<label>Email<input type="text" id="txtEMail" /></label>
<label>Password<input type="text" id="txtPWord" /></label>
<label class=" lblHidden " >Login<input type="image" src="images/login.jpg" id="btnLogin" /></label>
</form>
[It occurred to me to set the width to 0 but I'm not so keen on this approach and it might interfere with my positioning.] Andy. PS I could post my css if it's useful (?). Edited: width:0px doesn't do anything anyway, because it contains an image. Here is my problem: keoasian .com/details If you look at the contact form, it does not properly line up. I've had this problem on another site before but I forget how I fixed it. The solution is probably simple, I just can't think of it. By the way, this may not show up on all browsers as a problem. I initially designed and tested this page on a Windows XP machine with 1024x768 running Google Chrome; now I am on a Mac OSX computer with 1280x800 resolution testing it on Chrome and Firefox. Hi gyus! I am trying to recode an form we use, which is based on table layout, to use CSS layout instead, using the label element. The old layout had one input per row with a description text next to the input. After coming up with a successful CSS layout in Safari/Firefox/Opera I tried the page in IE and the layout failed. All my inputs are floated to the left (at the top, stacked after each other), but the labels are rendered correctly (one label per line) It seems like the label elements doesn't seem to clear the float (so that the label and inputs are aligned) I broke the code down to the following example: (sorry guys, I don't have the possibility to put it on an publicly accessible server) Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" []> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Testing</title> <link rel="stylesheet" type="text/css" href="test.css"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8;"/> </head> <body> <form name="service" action="label2.html" method="post" enctype="application/x-www-form-urlencoded" accept-charset="UTF-8"> <div> <label for="audio_level">Audio Level:</label> <input type="text" id="audio_level" value="0"/> <label for="audio_level1">Audio Level:</label> <input type="text" id="audio_level1" value="0"/> <label for="audio_level2">Audio Level:</label> <input type="text" id="audio_level2" value="0"/> <label for="audio_level3">Audio Level:</label> <input type="text" id="audio_level3" value="0"/> </div> </form> </body> </html> And the CSS: Code:
body {
width:800px;
}
label {
display:block;
float:left;
clear:left;
width:100px;
text-align:left;
}
input {
display:block;
float:left;
width:100px;
}
Applying a <br> element with clear:left after each input seems to fix it, but I is adding extra markup really necessary? I can't figure out what I am missing to get the one label/input per "line" Not the best title, but I couldn't think of a better way to describe what I am trying to do. I currently use css to position form elements and their labels nicely without the use of tables. I now want to be able to add fieldset tags, encapsulating a bunch of radio or checkboxes, and a legend tag, and have that legend tag appear exactly as my current label tags do. Easier to look at the demo page I think: http://markdw.com/formTest.html Looks fantastic in FF, almost perfect in IE, but not so good in Safari (all on a PC). I can fix the positioning of the fieldset in Safari by removing the top:-18px and margin-top:-18px styles, but no matter what I do I cannot get the LEGEND to show up on the page. The same applies to IE6 I just noticed. a) I hope the code is useful and/or interesting to others, and b) I hope someone will be able to help me with the safari issue Many thanks. Hi, I am trying to create a very simple login form. Before I used to develop everything with tables, so I had the email label and password label alligned under each other correctly. Now I am trying to do it only with divs, spans and css, however i can not give a fixed with the span or labels so that email and password are alligned under each other! Here is the html file I have. Basically I have to login forms, one with css and the other one with tables. You can see that the table example has email and password label alligned under each other keeping the same width, while in the css example email takes less space then password. I tried setting the witdh to the label, but it did not work! Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Login</title>
<style>
div.login{
border: 1px solid red;
}
div.login label{
border: 1px solid green;
width: 200px;
text-align:left;
}
</style>
</head>
<body>
Example with only divs, span and css:
<div class="login">
<div>
<label>
Email
</label>
<input id="username" name="username"
type="text" value="" />
</div>
<div>
<label>
Password
</label>
<input id="username" name="username"
type="password" value="" />
</div>
<div>
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</div>
</div>
<br>
<br>
<br>
Example with tables.
<table>
<tr>
<td>Email</td>
<td>
<input id="username" name="username"
type="text" value="" />
</td>
</tr>
<tr>
<td>Password</td>
<td>
<input id="username" name="username"
type="password" value="" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Login" />
<input type="button" value="Register" />
<input type="button" value="Forgot Password" />
</td>
</tr>
</table>
</body>
</html>
What should I do to my css to set a width to a label or span? thanks and regards, sim085 Hello, I am trying to create a drop down list with a label, and have them align. I simply want the label to display left of the drop list. I can't seem to get them to do it. It sits inside a topoptsbox div tag (css below). Code: <form name="bpmform"> <label for="bpmfrom" class="bpmddl">BPM From</label> <select class="bpmddl" id="bpmfrom" name="bpmfrom"> <option id="0from" value="0">0</option> <option id="50from" value="50">50</option> <option id="100from" value="100">100</option> <option id="150from" value="150">150</option> </select> </form> Code:
#topoptsbox {
border-style: inset;
border-width: 1px;
width: 1000px;
height: 80px;
float: left;
display: block;
}
Is there a way to change the value of the display property using CSS rather than JavaScript on the client side? Hi Their.. I have an html page that contains a form named form1...i want to display another form when the button in form1 have submitted....It's a matter of (show/hide) html elements...Anyone can help..please. Thank you in Advance [edit] New question, see http://forums.devshed.com/css-help-...tml#post1377956 below for details. Thanks! --------- old question ------------ Hi, I'm trying to get some checkboxes aligned in a form that i'm creating. I can get it to work perfectly in Firefox, but not in IE6. In Firefox: In IE6: I don't care so much about the height/spacing issue as much as the left/right reversal. the relevant css(i think) is here Code: #application p {text-indent: 0px;}
#application div.col1 {width: 50%; float: left;}
#application div.col2 {width: 50%; float: right;}
#application label {
float: left;
width: 70px;
text-align: right;
height: 2em; line-height: 2em;
}
#application .label_checkbox {width: 100%;}
#application .label_checkbox p{
clear: both;
float: none;
position: relative;
}
#application .label_checkbox input {
position: absolute;
top: 1px;
left: 1px;
}
#application .label_checkbox label {
display: block;
margin-left: 22px;
text-align: left;
width: 160px;
}
and relevant xhtml: Code: <div class="label_checkbox">
<div class="col1">
<p><input type="checkbox" id="ch" value="Classroom Helper" name="roles" /><label for="ch">Classroom Helpers</label></p>
<p><input type="checkbox" id="lt" value="Literacy Tutor" name="roles" /><label for="lt">Literacy Tutor</label></p>
<p><input type="checkbox" id="ta" value="Technology Assistant" name="roles" /><label for="ta">Technology Assistant</label></p>
<p><input type="checkbox" id="ce" value="Campus Enrichment" name="roles" /><label for="ce">Campus Enrichment</label></p>
<p><input type="checkbox" id="ote" value="One-Time Events" name="roles" /><label for="ote">One-Time Events</label></p>
</div>
<div class="col2">
<p><input type="checkbox" id="frn" value="Family Reading Night" name="roles" /><label for="frn">Family Reading Night</label></p>
<p><input type="checkbox" id="rad" value="Read Aloud Day" name="roles" /><label for="rad">Read Aloud Day</label></p>
<p><input type="checkbox" id="dd" value="Dictionary Day" name="roles" /><label for="dd">Dictionary Day</label></p>
<p><input type="checkbox" id="gs" value="Guest Speaker" name="roles" /><label for="gs">Guest Speaker</label></p>
<p><input type="checkbox" id="other" value="Other" name="roles" /><label for="other">Other</label></p>
</div>
</div>
you can see the page at http://oaklandheroes.org/beta/application.php. Thanks for the help! Hi, If I place an input field or select box in a div and set the display to none - will that variable still be sent when the form is submitted? Thanks, I recently relaunched our web site and, trying to stay with the times, use CSS as much as possible for layout purposes. The one place I still use a table for layout is in the top navigation bar, which includes a search form. I would like to eliminate the table and use CSS for styling the top navigation bar, but am not sure how. I want the pages to hold up in IE 5.0+, Mozilla, Netscape 6+, Firefox and Safari and to be tolerable in Mac IE 5.x - a tall order but manageable I think. Can this be done? Am I stuck with a layout table here? Any help is appreciated. You can see an example web page at: http://www.cambridgema.gov/~CDD/ The HTML is in the attached file. Hello! I've got a <div> inside a <form> which I show/hide when a user clicks on a show/hide link. That div holds several form options which I DON'T want to submit with the form when the div is hidden. At the moment, even when my div is hidden, the values within it are still being submitted with the form. Is it possible to / how do I - hide the div so any values enclosed in it do NOT get submitted along with the form? Thanks, regan. good day, long title, i know this problem is very tricky and i have spent much too long on it, so i decided to ask it here. i have a site that is currently live, and in need of a great css artist to check out a bug for me. i have tested in firefox, ie 7 and safari, and all work fine, but in IE 6, when i use jscript to hide and show a <div></div>, for some reason, half a DIFFERENT <div></div> disappears, and turns into the bg-color. it's very peculiar since the <div></div> tag which gets messed up is seemingly unrelated if anyone has any quick recommendations, then i'd appreciate it, otherwise let me know and i can pm the login and pass to someone to check it out (i dont wanna post it on here since it im trying to keep the project under wraps right now) regards onassar Hi all, I have a fairly complex page with quite a few nested divs, and some of these nested divs have overflow:auto assigned to them. The problem Im having is that on pageload and when I click a link that has uses javascript to switch the visibility of some of the sub elements, it flickers the div to a different part of the page. I know the description isnt much help, but I didnt know if this was something that others had ran into in general with gecko browsers. I've tried assigning overflow: auto to the containing divs, and to no avail. Anyone have any general ideas as to what it could be? Thanks in advance |
|||||||