CSS - Form Styling: Subforms Shifted & First Legend Styled Differently

I have this code that works fine in firefox and MSIE and the whole page validates with tidy (Green checkmark). I can't post a URL because its on a private server.

The part that isn't quite right on safari is these: I have a table load of these that are part of a big form named commit.

<td width="30" bgcolor ="#e7e7e7"><input type ='submit' class='button_notdone' value='2'
onclick="javascript:mapbutt(document.commit,2)" /></td>

This is the javascript code for mapbutt

function mapbutt(myform,dex) {
myform.action.value='map';
myform.qnum.value=dex;
}

The javascript does not return false so after clicking and setting the action and qnum values it is supposed to fall through to the form's serverside action, which it does. The problem is the styling of the submits. On every other browser they are whatever color I specify in the style I assign to them.

Here is the style for button_notdone

.button_notdone {
font-family: monospace;
font-weight: bold;
width: 28px;
height: 22px;
color:#ffffff;
background:#000000;
}

The background color in this case is supposed to be black and the text color is supposed to be white, and on safari it is black text on grey.
I tried changing "input" to "button" which does indeed display the background color but unlike a submit it does not display the value. I need the text of the value to show in the text color over the button or submit or whatever it ends up being.
How can I get these submits to look like what I want on safari.
Thank you.

Is it possible to style form elements (specifically checkboxes) with pure CSS, and without JS?

I'm thinking of something similar to this (but without the JS):

http://ryanfait.com/resources/custo...-radio-buttons/

I have form located below the google map on this page -

http://www.hometowntrans.com/map_hours.asp

I want to style it such that it has a 3d look to it if you will, with a gray background and black text.

Is it possible to differentiate between various types of input field, e.g. assign a width to text inputs but leave buttons to find their own width based on content.

I know I can do this by assigning certain elements a class but I'd prefer not to have to do this.

Thanks

Here is the url:
http://bradleyrose.net/WaterStreetRestaurant/pages/about_us.html

The guy I'm building the site for says when he views the site, the pictures and copy in the 2 columns to the right of the navigation menu get pushed down to where the level of where the contact us button is.

He is viewing the site on either IE6 or IE7

Any insight would be greatly appreciated.

Im trying to get an input field and form button to line up to the right of an <li> tagged menu and not sure of the approach i should take.

I'd prefer not to use a table if possible, and the table im using now is a bit buggy anyway.

this is a page with the menu as it shows right now....
http://www.seesawusa.com/products/

this is the page with the basic idea of what im trying to do
http://www.seesawusa.com/pages/74/

Things i'v tried
1. put the form inside a LI tag.... This results in putting the search box below the list of menu items across all my test browsers.

2. put the UL and the FORM inside a table with 2 cells...
in FF, i get the result i want... except the LI and INPUT field are not aligned to the right
in IE6 & 7 I get it lined up the way i want it. But the table pushes the the height and width of the containing div to an unacceptable level

I've seen this type of thing before and in my searching other sites i've only found complicated table based layouts that use it. Does anyone know an approach that would allow me to leave out tables, or at the very least only use one?

Thanks for the glance.

P.S. Interestingly enough, the page you are reading has a menu and text field configuration that im wanting to use, but it is very table oriented.

I'm missing something here. I want to change the color of the default value for this text field, without changing the overall color of the input field. For example, the default value of 170 will be gray, but when a user overwrites the data with their own numerical value, it will be black. I know how to change the color of the input field when a user types in data, but is there a way to change the color of the value= ?

<input type="text" name="trans1_1" size="6" value="170"/>

Any ideas? Seems like a simple task, but can't figure it out. Thanks in advance for the time.

Hi Guys,

I'm trying to figure out if a certain formatting is available for Fieldsets, specifically, the legend styling.

In the fieldset, the legend is typically displayed in the top left corner of the fieldset.

I'm wanting to have TWO legends. One in the top left, and one in the top right.

Here's two examples. A normal one, and one with two legends that I would like. (i photoshopped the 2nd one).





Is this possible?

Just wondering if there are any css tags that would be able to produce a fieldset/legend look like this...



The idea of being able to get a link to show up on the right side there is what i'm trying for.

thanks for reading...

Hi,
Can someone give me an example of a table styled with css that looks better than the standard html thing. I am trying to get a table with alternate colored rows and a thin line between the cells, and good looking cell headings.

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.

Within the LEGEND tag, how would I position the radio buttons to the far right?

I thought something like the following would work, but wasn't sucessful.
.radios {text-align: right;}

Thanks

Code:

<fieldset>


<legend>

Some Text
<select><option value="1">One</option><option value="2">Two</option></select>

<span class="radios">
<input type="radio" name="r" id="r" value="1">one
<input type="radio" name="r" id="r" value="2">two
</span>

</legend>


<table>
<tr><td>bla</td><td>bla</td></tr>
<tr><td>bla</td><td>bla</td></tr>
<tr><td>bla</td><td>bla</td></tr>
</table>

</fieldset>

This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat.

Observe he
http://www.drcwbt.com/codetests/disabledbutton.htm

I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it.

Any ideas on how to "gray out" in Mozilla?

been tearing my hair out with this problem

I've been doing an expanding menu for drupal and functionally it works perfect. You click on the legend, it expands the fieldset.

However I'm having major difficulties on the CSS side of things.

The problem is that when I adjust the height of the legend to fit the background image, it doesn't push the other fieldsets down in IE 7 and 8 but it does in Firefox and (oddly) IE6.

Given that means a ~20 pixel gap between menu items in Firefox compared to none in IE7,8 it means the menu always looks ugly in one of the two sets of browers.

Here's the CSS in question (displays ok in IE7,8 but spaced out in FF):

Code:

  fieldset.accordian
	{
	border:none;

	margin-top:8px;
	padding-bottom:3px;
	
	width:205px;
	}

	legend
	{
	background-image: url('images/menubg.png');
	background-repeat: no-repeat;
	margin:0;
	padding:0;
	width:205px;
	line-height:37px;
	height:37px;
	}

Hello!

I am using some pretty simple css to format a form for my website. I really like the way using Fieldset & Legend allows for quick and easy formatting of the form but I have one small problem. When I give the fieldset a background it goes above the border of the legend and doesn't look right. I've seen forms that have worked around this problem but I'm not sure how. Any suggestions or help would be appreciated!

Code:

<!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">
<title>ALE Join Form</title>
<head>
<style type="text/css">

fieldset
{
border: 2px solid #87AFC7;
width: 50%;
background: #F5F5F5;
}

legend
{
color: #fff;
background: #87AFC7;
border: 1px solid #fff;
padding: 2px 6px
} 

</style>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>ALE Membership</legend><br><br>

<!-- Provide a dropdown menu option field with sauces. -->
<input type="hidden" name="on0" value="Type">Type of Sauce
<select name="os0">
<option value="Select a type">-- Select a type --</option>
<option value="Red">Red sauce</option>
<option value="Green">Green sauce</option>
</select></p>
<br />

<!-- Provide a dropdown menu option field with prices. -->
<input type="hidden" name="on1" value="Size">Size
<select name="os1">
<option value="06oz">6 oz. bottle - $1.00 USD</option>
<option value="12oz">12 oz. bottle - $2.00 USD</option>
<option value="36oz">3 12 oz. bottles - $3.00 USD</option>
</select></p>
<br />

<!-- Display the payment button. -->
<input type="submit" name="submit" value="submit" /><br><br>

</fieldset>
</form><br><br>

<fieldset>
<legend>Thank You</legend>
<center>
<p>Your something is complete!</p><br>
</center>
</fieldset>
</body>
</html>

Below is a link to a terrible picture of the form (sorry it's not online):
http://www.leadershipeducators.org/redesign/images/users/Jared/profile.jpg