CSS - Overlaying A Form

I'm relatively new to css and i'm hoping this forum will help me get better acquainted by working out some of the problems i'm running into.

the address is: thenserenity.com/form.html

this form looks fine in everything except IE. in IE there is no margin and the text starts in the top left of the div, as you can see if you check it out in ie.

i have two css's, 1 general and 1 for ie. here is the ie css:
---------------------------
@charset "utf-8";
/* CSS Document */


div#wrapper {
background:none;
filterrogidXImageTransform.Microsoft.AlphaImageLoader(src='colhead-tl.png' ,sizingMethod='crop');
}

.nav {

margin-top:49px;

}

.rounded_STYLE
{
background-color: white; /* if needed */
border: 25px solid white; /* if needed */
position: relative;

}

.rounded_STYLE > .tl, .rounded_STYLE > .tr, .rounded_STYLE > .bl, .rounded_STYLE > .br
{
width: 750px;
height: 25px;
position: absolute;
}

.rounded_STYLE > .tl
{
background: url(../images/colhead-tl.jpg) top left no-repeat;
top: -25px;
left: -25px;

}

.rounded_STYLE > .tr
{
background: url(../images/colhead-tr.jpg) top right no-repeat;
top: -25px;
right: -25px;
}

.rounded_STYLE > .bl
{
background: url(../images/colhead-bl.jpg) bottom left no-repeat;
bottom: -25px;
left: -25px;
}

.rounded_STYLE > .br
{
background: url(../images/colhead-br.jpg) bottom right no-repeat;
bottom: -25px;
right: -25px;
}

br.clear {
clear:both;
}


/* FORM -----------*/

.rounded_STYLEform
{
background-color: white; /* if needed */
border: 25px solid white; /* if needed */
position: relative;
width:auto;
height: 200px;
}

.rounded_STYLEform > .tl, .rounded_STYLEform > .tr, .rounded_STYLEform > .bl, .rounded_STYLEform > .br
{
width: 750px;
height: 25px;
position: absolute;
}

.rounded_STYLEform > .tl
{
background: url(../images/colhead-tl.jpg) top left no-repeat;
top: -25px;
left: -25px;
}

.rounded_STYLEform > .tr
{
background: url(../images/colhead-tr.jpg) top right no-repeat;
top: -25px;
right: -25px;
}

.rounded_STYLEform > .bl
{
background: url(../images/colhead-bl.jpg) bottom left no-repeat;
bottom: -25px;
left: -25px;
}

.rounded_STYLEform > .br
{
background: url(../images/colhead-br.jpg) bottom right no-repeat;
bottom: -25px;
right: -25px;
}
----------------------

anyone know how to make this form look, in ie, as it does in everything else.

thanks,
jtn

Hello,

I am creating a form based an ordered list.
I want to have two columns:
- Left column with labels and 20% width.
- Right column with inputs with 80% width.

The total width is defined by a div that contains the list ... or by the list itself.

In this moment I have a few problems:
1. The inputs don't take the total width;
2. The labels get outside of the container on the left;
3. The required icon does not take a space to the input;
4. The input button is not aligned with other inputs.

Could someone please help me out in solving these problems and improving my code?

I created a sample project and uploaded it to:
http://www.27lamps.com/Labs/Form/Form.html

Any help would be great!

Thank You,
Miguel

how would i change the colour of a text box in css?
and also not sure if this is css or javascript
but how do i clear a text box when the user clicks on it to write in their username?

thanks
tony

Is there a way to alter the <form> starting tag so that it doesn't add white space before and after it?

I have this form tag that is really screwing with my design because of the spacing it's adding to the page ... I have found CSS to make an entire form pretty, but not something to remove the space that this tag adds to my page.

Hi, I'm having difficult with learning forms and how to style them. I've gotten mostly what I am looking for just now I don't seem to be able to make adjustments: Adjusting the size of the text-window, wrapping the frame boarder around the fieldset. Those are my main issues, any help would be greatly appreciated.

I'm reading around, wondering how I get form fields to change style and the text that is inserted in the form fields to change style (font/size)..

Is there an easy way to do this?

for example

http://member.classifieds.com/userjoin.php

the entry boxes are smaller, and the text is smaller.. I looked at their code and I'm not quite sure how they achieved this.

Hello, my code uses span tags within a link tag to make an html form become visible when the link is hovered. It works perfectly in everything except IE7/8. I would really appreciate it if anyone is able to help me stomp out this bug.

Bug description: After text has been entered into the form, the form will then close prematurely when the cursor is moved over the fields (specifically, while crossing the tiny gap between the fields).
Recipe to reproduce bug: 1. Hover the link to reveal the form, and fill the fields with text.
2. Close the form by moving the mouse off of the form.
3. Mouse back onto the link and move the cursor continuously over the text fields. If you're in IE7/8 then the form will seem to suddenly close at random.

I've uploaded a stripped down version of the code for your convenience: http://mobile.sheridanc.on.ca/~goodalek/test2.htm

CSS code:
Code:

.hyperLeft2:hover{
background-color: #E9F1F9;
text-decoration:none;
z-index:50;
}

.hyperLeft2 span{ /*CSS for enlarged image*/
text-decoration:none;
position: absolute;
background-color: #E9F1F9;
text-align:left;
left: 20px;
font-size: 13px;
color: #474747;
top: -95px;
visibility: hidden;
color: black;
width: 500px;
}

.hyperLeft2:hover span{ /*CSS for enlarged image on hover*/
background-color:#aaaaaa;
visibility: visible;
left: 20px;
top: -95px;
z-index:60;
}

HTML code:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="test2.css">
</head>
<body>
         <br><br><br><br><br><br>
           <a href="#" class="hyperLeft2">Request a Quote<span>

 <form name="form1">

<input type="text" name="name" ><br>
<input type="text" name="custEmail" ><br>
<input type="text" name="phone"  ><bR>
<input type="text" name="domain" ><br>
<input type="text" name="name2" ><br>
<input type="text" name="custEma3il" ><br>
<input type="text" name="phon4e"  ><bR>
<input type="text" name="domai4n" ><br>
 <input type="submit">

  </form>
  </span></a>

</body>
</html>

Please let me know if any further information is required.

I am not able to give a width to Label. so i tried to put a span around it and provide a width. still it doesnt work


I want to shift the text fields to the right so that all are alligned at a right vertical line even if the label is of different char length.




http://www.variable3.com/clients/be...gerDetails.html

Hi there,

I've been battling to get this right...basically I have the following HTML setup:


<input class="tboxes" type="textbox" />
<input class="tboxes2" type="textbox" />


"span.label01" is an inline element, and appears to the left of the textbox "input.tboxes". What I am trying to do attach some style to "span.label01" AND "div.box10" when the textbox receives focus.

I have tried the following CSS code:

input.tboxes:focus {
color:#FF9900;
}

input.tboxes2:focus {
color:#FF9900;
}
but nothing happens. I know this is a CSS selector issue, but I just can't seem to get it right. I have even tried adjacent sibling selectors, and nothing. Can anyone help me here? TIA!

How do you keep a dropdown box on top of all other windows?

hey
What i want is to have one line with a select box and a submit button on it. But when i put those 2 elements in a form it takes up 2 lines.

How can i make it so that the form wont require an extra line?

When i click on the Login at the loginform on www.ipan.be the form is jumping under the text, IE is good...

Is there anyone who has this porblem or a solution?

Hello.

I have created a form with CSS and Divs. My problem is my "Submit your Testimonial" button background is all messed up and doesn't look like my "Reset Form" button in IE 6.0 SP2. It looks fine in Firefox.

Not sure how or where this gets changed. It seems to be adding a thicker border or something?

Here is the page:
http://www.nessphysiotherapy.com/testimonials.php

Suggestions?

Thanks

Matt

hello people,

If you click the link "Search this Forum" above, a popup window appear(about 40x30) and you may now
search you Thread. The popup window and the form created inside is what I wanted to do but dont know how start.
Can you help? Is css behind all this or simple a script? What's best thing to use? Thanks!