CSS - Drop Down List And Label Alignment

I found this example on the web for a drop down list, I was wondering if anyone knows how I would go about fixing it to work for IE as well, it's perfect in firefox.

Even if doesn't show the sub items in IE it won't be a problem, just as long as the main items are shown.

I like this example because it doesn't use javascript, I've found ones that works in IE but they use JS I'd prefer to use just CSS.

Thanks for reading.

[html]<ul class="nav">
<li><strong><a href="">main</a></strong>
<ul>
<li><a href="">sub</a></li>
<li><a href="">sub</a></li>
<li><a href="">sub</a></li>
<li><a href="">sub</a></li>
</ul>
</li></ul>[/html]

Code:

/*Nav bar styles*/

ul.nav,
.nav ul{
margin: 0;
padding: 0;
cursor: default;
list-style-type: none;
display: inline;
}

ul.nav{
display: table;
width: 100%;
table-layout: fixed;
}

ul.block{
width: 100%;
table-layout: fixed;
}

ul.nav>li{
display: table-cell;
position: relative;
padding: 2px 6px;
}
/*
ul.nav>li:hover{
padding-right: 1px;
}*/

ul.nav li>ul{
display: none;
position: absolute;
max-width: 40ex;
margin-left: -6px;
margin-top: 2px;
}

ul.nav li:hover>ul{
display : block;
}

.nav ul li a{
display: block;
padding: 2px 10px;
}

/*Menu styles*/

ul.nav,
.nav ul,
.nav ul li a{
background-color: #fff;
color: #369;
}

ul.nav li:hover,
.nav ul li a:hover{
background-color: #369;
color: #fff;
}

ul.nav li:active,
.nav ul li a:active{
background-color: #036;
color: #fff;
}

ul.nav,
.nav ul{
border: 1px solid #369;
}

.nav a{
text-decoration: none;
}

I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right.

Here is the web page

The top navigation bar has a link "Other regions".

I want to have a drop down list of the other regions under it.

I nested a list under the "Other regions" li. It is working - sort of but not correctly.

The nested list is showing up under "home" and the are all on top of each other.

Here is the html:
Code:

	<div id="topbar">
  	<ul>
		
      <li><a href="index.html">Home</a></li>
		
      <li><a href="about_us/about_us.html">About Us</a></li>
		
      <li class="dropmenu"><a href="other_regions.html">Other Regions</a> 
        <ul>
          <li><a href="#">Ireland</a></li>
          <li><a href="#">Germany</a></li>
          <li><a href="#">USA (North America)</a></li>
          <li><a href="#">Latin America</a></li>
          <li><a href="#">Other</a></li>
        </ul>
      </li>
   	</ul>
  	</div>

Here is the css:
Code:

#topbar {
	height: 20px;
	background-color: #3399FF;
	border: 1px solid #000099;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	color: #FFFFFF;
	background-color: transparent;
	border: 1px solid #3399FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar a:hover, #topbar a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar ul {
	list-style: none;
	margin: 1px 0px 1px 0px;
	padding: 2px 0px 0px 0px;
}

#topbar li {
	display: inline;
	margin-right: 150px;
}


.dropmenu ul  {
	position: relative;
}

.dropmenu li  {
	position: absolute;
	
}

.dropmenu  a:link, .dropmenu  a:visited {
	color: #000000;
	background-color: transparent;
	border: 1px solid #FF00FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu  a:hover, .dropmenu  a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu li:hover ul { display: block; }


/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 519px;
	background: url(../images/bgcol.gif) repeat-y;
	padding: 0px;
	margin: 0px;
}

Help please

on my site i have a few drop down boxes, ive used css to change the textboxes and submit buttons, but is there a way to change the arrows/buttons on a drop down list?

I have an iframe that contains a CSS drop down list and I'm having problems getting the drop down list to display beyond the bottom of the iframe. The drop down list cuts off at the bottom of the iframe. Is it possible for a css drop down list to display beyond the borders of an iframe? I've experimented with z-index and have not had any luck yet. Any ideas?

For some reason, I cannot get my 2 form elements to line up as far as height is concerened. No matter what I try, one is always slightly taller than the other, even if I set both to the same height. Any ideas?

Code:

input[type="text"], select {
  color:#888888;
  font-size:10px;
  height:auto;
  }

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"...

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'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.

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

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 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"

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 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!

Hi!

Let's say I have this

Code:

<form id="some_form" ...>
<div>

<label>
Some text
<input .... />
</label>

<label>
Some text 2
<input .... />
</label>

<input type="submit ... />

</div>
</form>

In CSS I have this:

Code:

#some_form label {margin-button:10px}

This does work in NO browsers! Very strange... If one replaces the label with a div, everything works fine again.


I really want to use the labels...

I have a list that I've created with the list-style-type being an image.

For some reason, the space between the list-style-image and the list text differs in IE and Firefox. Has this happened to anyone else, or am I doing something incorrectly?

Below is the code. The cell that these lists sit in has has an id of 'cellid'.

Code:

#cellid {
margin: 0 0;
padding: 0 0;
}

#cellid ul {
margin: 10px 0 0 20px;
padding: 0 0;
}

#cellid li {
margin: 0 0;
padding: 0 0;
list-style-image: url(images/idxyellowlist.gif);
}

The ul has a margin of 20px on the left to line up with an element above it. Does anyone have any ideas as to how to get around this space?

Thanks,

Brian