CSS - Form Area Issue Only With Ie Browsers

Im having trouble with styling a web form, im trying to manipulate the textarea width and have the following CSS code

textarea {

width: 400px;
height: 250px;
margin-top: 5px;
margin-bottom: 5px;
padding: 0;

}

The width is fine in Internet Explorer yet in Opera it seems to completely ignore the width attribute.

The form itself is in a <div> which has no width attribute.

Anyone got any ideas?

I'm working on this CSS test page and I am encountering some problems that I hope someone might know how to fix. The state and zip are supposed to be on the same line as the city, and the date and phone # are supposed on be on the same line as each other. Anyone know what I am doing wrong?

webtrain.austin.cc.edu/
~lbrown/circulontestnew.html

Also, in IE the last name box drops off the top.

Please let me know if you can help.

Thanks!

I have added a captcha code to a test form on my site which looks and works fine in ie. But in firefox you can't see it.

I am sure it is something simple but I just can't figure it out.

The form which can be viewed is www cristalclear.co.uk / contactus.php
(not allowed urls yet hence above)

Any help would be most appreciated.

I have a very curious problem with the formatting of input fields in html forms which has me completely stumped.

Basically, input fields are not looking as they should (and in particular, not showing any text typed inside them) in any versions of IE (well, 6, 7 and 8 anyway) - tested on various machines so not a Windows installation issue. Despite my setting a class for them I cannot get them to look like proper inputs, nor can I make the inputted text visible. I can see the cursor for the text when I click inside where the input should be, but it looks far too small- about 4 px as far as I can tell. (???)

Interestingly in Firefox the text inputted IS visible, although the border of the inputs doesn't show.

I've set a class for input:

input {border:1px #000; color:#000;}

I also tried setting this explicitly for inside the div holding a form where the input appears:

.searchform input {border:1px #000; color:#000;}

Neither of which work.

Here's one of the forms where I'm trying to include the input (hashes at the moment for links as it's in development):

<form action="#" method="POST" name="searchform">
<img src="/images/freecallback.gif" alt="Free Call Back">&nbsp;&nbsp;&nbsp;<a href="#" title="Member Login"><img src="/images/memberlogin.gif" alt="Member Login"></a>
<input type="text" name="searchtext" value="" size="8" />
<input type="image" src="/images/searchbutton.gif" name="searchform" />
</form>

And here's another form (same result though interestingly the SELECT appears ok):

<form action="#" name="bookahotel" method="post">
<label>Arrival</label>
<input name="date" size="6" type="text" />
<p class="text_normalblack">Arriving Today</p>
<input name="country" size="6" value="Country" type="text" />
<input name="towncity" size="6" value="Town/City" type="text" />
<select name="_EnquiryType" size="1" class="forminputs" />
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
</select>
<input name="bookahotel_search" size="6" value="" type="image" src="/images/bookahotel_search.gif" />
</form>

Any ideas???

Thanks

After i set the height of the text box, when viewing it in firefox, not only does it look like the font size is over 100 before typing the norm-sized text, but it starts in the middel-left of the box instead of the top left what do i do to correct this?

Hi Guys

I am struggling to resolve a small issue i am having. I am using a mac, and am working on a contact form for a website.

I am using the latest mac OS and latest versions of all browsers.

The following link is fine in firefox, however, in Safari and google chrome, the 'Message' text area has a big gap above it and I do not know how to get rid of this.

Here is the code for the form...

<form id="form" name="frmQuote" class="contactForm" method="post" action="process.php" onsubmit="return validate_form(this);" >


<ul>
<li>
<label for="name">Name:</label>
<input name="name" id="name" type="text" class="required" />
</li>




<li>
<label for="email">E-mail:</label>
<input name="email" id="email" type="text" class="required email" />
</il>


<li>
<label for="subject">Subject:</label>
<input name="subject" id="subject" type="text" class="required" />
</li>

<li>
<label for="detail">Message:</label>
<textarea name="detail" id="detail" rows="6" cols="60" class="required"></textarea>
</li>


<li>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="100" class="submitBtn" />
</li></ul>

</form>

Here is the css for that page...

#content_about {
color: #666666;
}



/***************************************************
CONTACT
***************************************************/
#form {
margin: 0px;
position: relative;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 15px;
float: left;
}
#form div {
width: 510px;
position: relative;
float: left;
padding-bottom: 9px;
}
#form div label {
width: 400px;
}
#form div label.error {
color: #a80000;
position: absolute;
top: 0px;
right: 0px;
text-align: right;
font-size: 11px;
}
#form div.message_sent {
background-color: #31B8DA;
width: 890px;
float: left;
padding: 10px;
margin-bottom: 15px;
color: #FFFFFF;
}
#form input {
width: 499px;
padding: 8px;
font-size: 13px;
color: #999999;
background-color: #FFFFFF;
float: right;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
}
#form input:focus, #form textarea:focus {
background-color: #F4F4F4;
}
#form textarea {
width: 500px;
padding: 8px;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #FFFFFF;
color: #aaaaaa;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #C3C3C3;
border-right-color: #E8E8E8;
border-bottom-color: #E8E8E8;
border-left-color: #C3C3C3;
float: right;
margin: 0px;
}
#form .submitBtn {
background-color: #31b8da;
width: 95px;
color: #FFFFFF;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
padding: 0px;
font-size: 16px;
height: 35px;
display: block;
margin-top: 20px;
}
#form .submitBtn:hover {
background-color: #1F93B4;
color: #FFFFFF;
}
#form .submitBtn:focus {
background-color: #4FC1E1;
}

#form strong {
font-size: 24px;
color: #FFFFFF;
font-weight: normal;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #6a6a6a;
display: block;
}
#form .font-11 {
font-size: 11px;
color: #CCCCCC;
display: inline;
}
#content_about #form li label {
margin-top: 0px;
margin-right: 35px;
margin-bottom: 0px;
margin-left: 0px;
line-height: 30px;
}
#content_about #form li {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 0px;
}


Any help would be greatly appreciated.

Regards

Jay

I'm having problems with a div, a simplified example is at http://alphaworks.co.uk/test/child.htm (code below), basically I want the grey area to completely surround the image and the text. At the moment the grey area (a div) only goes to the bottom of the text and the image sticks out the bottom of it. Can someone explain why this is and what I can do to get it doing what I want it to?

Many thanks,
Geoff

Code:

<html>
	<head>
		<style type="text/css">
			.child
			{
				border          : solid thin blue;
				background		: gray;
			}

			.child .thumb
			{
				float			: left;
			}

			.thumb img
			{
				border          : 1px solid black;
			}

			.child .text
			{
				margin-left		: 220px;
			}

			.child .name
			{
				font-weight     : bold;
			}

			.child .description
			{
				font-style      : italic;
			}

		</style>
	</head>
	<body>
		<div class="child">
			<div class="thumb">
				<img src="" alt="Image" width="200" height="134" />
			</div>
			<div class="text">
				<span class="name">
						Album name
				</span>
				<br/>
				<span class="description">
					Album description
				</span>
			</div>
		</div>
	</body>
</html>

I'm trying to get my link area to display so that the user can move over the area surrounding the link as opposed to the link text itself, but I can't seem to get it to work properly. I thought I could just set the padding and that would take care of it.

Code:

<div id="navBar">
    <h4>Interface Links</h4>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
    <a href=".\links.html">Link</a>
</div>

Code:

#navBar
{
	position:absolute;
	top:3em;
	right:0;
	width:15%;
	margin:0;
	padding:0;
	background-color:#CCCCFF;
	font-size:1em;
	border-left:2px solid #666699;
}
#navBar h4
{
	padding:0;
	margin:0;
	background-color:#666699;
	border-top:2px solid #666699;
	font-size:.90em;
	text-transform: lowercase;
	color:#FFFFCC;
}
#navBar a
{
	display:block;
   text-decoration:none;
	padding: 8px 0px 2px 10px;
}
#navBar a:hover
{
    background-color:#9999CC;
}

My name is Steven and I wanted to officially introduce myself and see if anyone could help me with a css issue.

I have set the page up and upon checking an item, I want the page to show the form below. I was able to do that but either way it keeps the space where the form is which in fact, it should minimize and maximize the space upon clicking the check item. Instead, the area is still there.

This seems to the only issue that I am unable to resolve and would greatly appreciate it if someone could help.

I have listed the code below as well as attached the css and the page( If images are need, please let me know:

Code:

html, body  {
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
   font-family:Arial, Helvetica, sans-serif;
}


#logo  {
   background: url(profileimages/logo.png) no-repeat;
   
   position: absolute;
   left: 6px;
   top: 3px;
   z-index: 4;
   width: 92px;
   height: 64px;
}

#congratulations  {
   
   position: absolute;
   left: 22px;
   top: 377px;
   z-index: 3;
   width: 914px;
   height: 30px;
   font-size:26px;
   font-weight:bold;
   color:#4fa700;
}

#toptext  {
   
   position: absolute;
   left: 31px;
   top: 85px;
   z-index: 6;
   width: 897px;
   height: 16px;
   font-size:16px;
   font-weight:bold;
   color:#1b1b1b;
}

#cartproduct,
#cartproductcopy  {
   
   position: absolute;
   z-index: 2;
   width: 268px;
   height: 20px;
   font-size:18px;
   color:#272727;
}

#shippinginformation  {
   
   position: absolute;
   left: 226px;
   top: 421px;
   z-index: 2;
   width: 711px;
   height: 31px;
   font-weight:bold;
   font-size:34px;
   color:#272727;
}

#willbesecure  {
   
   position: absolute;
   left: 83px;
   top: 285px;
   z-index: 3;
   width: 315px;
   height: 14px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#foryourarea  {
   
   position: absolute;
   left: 682px;
   top: 257px;
   z-index: 3;
   width: 233px;
   height: 14px;
   font-size:11px;
   color:#272727;
   font-weight:bold;
}

.toplinksbar  {
   color:#006FD6; 
   text-decoration:none;
}

.toplinksites  {
   font: 12px/14px Arial;
   margin: 0px;
   color: #1B1B1B;
   text-align: left;
   text-decoration: underline;
}

#toplinks  {
   
   position: absolute;
   left: 745px;
   top: 25px;
   z-index: 2;
   width: 227px;
}

#item,
#qtyproductback  {
   background: url(profileimages/layer5copy12.gif) no-repeat;
   
   position: absolute;
   left: 11px;
   z-index: 2;
   width: 31px;
   height: 25px;
}

#totalback,
#priceback  {
   background: url(profileimages/layer5copy9.gif) no-repeat;
   
   position: absolute;
   top: 156px;
   z-index: 2;
   width: 124px;
   height: 25px;
}

#cartproductcopy  {
   top: 720px;
   left: 262px;
}

#ourprice  {
   
   position: absolute;
   left: 803px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 28px;
   font-size:12px;
   font-weight:bold;
}

.ourpricepercent {
color:#43a000;
}

#securelock  {
   background: url(profileimages/id46vectorsmartobject.gif) no-repeat;
   
   position: absolute;
   left: 525px;
   top: 875px;
   z-index: 2;
   width: 20px;
   height: 27px;
}

#profilevectorsmartobject  {
   background: url(profileimages/vectorsmartobjectsmall.gif) no-repeat;
   
   position: absolute;
   left: 15px;
   top: 259px;
   z-index: 3;
   width: 62px;
   height: 68px;
}

#cartproduct  {
   top: 191px;
   left: 54px;
}

#productdescription  {
   
   position: absolute;
   left: 59px;
   top: 163px;
   z-index: 3;
   width: 140px;
   height: 13px;
   color:#272727;
   font-size:14px;
   font-weight:bold;
}

#retailprice  {
   
   position: absolute;
   left: 669px;
   top: 190px;
   z-index: 2;
   width: 117px;
   height: 13px;
   font-size:13px;
   color:#ff0000;
}

#acceptedpayments  {
   
   position: absolute;
   left: 490px;
   top: 270px;
   z-index: 2;
   width: 121px;
   height: 13px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#enteryourzipcode  {
   
   position: absolute;
   left: 683px;
   top: 279px;
   z-index: 3;
   width: 145px;
   height: 12px;
   font-size:12px;
   font-weight:bold;
   color:#272727;
}

#profilereadmoreaboutit  {
	
	position: absolute;
	left: 87px;
	top: 300px;
	z-index: 3;
	width: 98px;
	height: 9px;
}

.profilereadmoreaboutitlink {
text-decoration:underline;
color:#3170ab;
font-size:10px;

}

#formback  {
   background: url(profileimages/layer5copy13.gif) no-repeat;
   
   position: absolute;
   left: 557px;
   top: 467px;
   z-index: 2;
   width: 380px;
   height: 381px;
}

#formtable {
font-size:14px;
font-weight:bold;
}

#item  {
   top: 187px;
}

#qtyproductback  {
   top: 156px;
}

#checkback  {
   background: url(profileimages/layer5copy10.gif) no-repeat;
   
   position: absolute;
   left: 677px;
   top: 249px;
   z-index: 2;
   width: 249px;
   height: 77px;
}

#lowerbar  {
   background: url(profileimages/layer1copy5.gif) no-repeat;
   
   position: absolute;
   left: 4px;
   top: 342px;
   z-index: 2;
   width: 952px;
   height: 3px;
}

#shippingback  {
   background: url(profileimages/layer5copy7.gif) no-repeat;
   
   position: absolute;
   left: 566px;
   top: 156px;
   z-index: 2;
   width: 90px;
   height: 92px;
}

#zipcodefield {
   
   position: absolute;
   left: 681px;
   top: 296px;
   z-index: 3;
   width: 150px;
   height: 25px;
}

#zipcodefieldform {
border:#aab1b7;
}

#totalback  {
   left: 800px;
}

#priceback  {
   left: 667px;
}

#formarea {
display:none;
overflow:hidden;
width:1px;
height:1px;
}

#congratulationsback  {
   background: url(profileimages/layer24copy.gif) no-repeat;
   
   position: absolute;
   left: 5px;
   top: 368px;
   z-index: 2;
   width: 951px;
   height: 42px;
}

#producttitleback  {
   background: url(profileimages/layer5copy6.gif) no-repeat;
   
   position: absolute;
   left: 48px;
   top: 156px;
   z-index: 2;
   width: 507px;
   height: 25px;
}

#layer1copy  {
   background: url(profileimages/layer1copy.gif) no-repeat;
   
   position: absolute;
   left: 373px;
   top: 68px;
   z-index: 3;
   width: 400px;
   height: 5px;
}

#profilesecurityback  {
   background: url(profileimages/layer5copy.gif) no-repeat;
   
   position: absolute;
   left: 19px;
   top: 278px;
   z-index: 2;
   width: 395px;
   height: 40px;
}

#area  {
   margin: 0px auto 0px auto;
   background: url(profileimages/background.gif) no-repeat;  
   height:100%;
   width: 960px;
   position: relative;
}

#shipping  {
   
   position: absolute;
   left: 583px;
   top: 162px;
   z-index: 3;
   width: 54px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#yourcart  {
   
   position: absolute;
   left: 10px;
   top: 132px;
   z-index: 2;
   width: 106px;
   height: 17px;
   font-size:20px;
   font-weight:bold;
   color:#272727;
}

#profileshadow  {
   background: url(profileimages/layer16.gif) no-repeat;
   
   position: absolute;
   left: 29px;
   top: 326px;
   z-index: 2;
   width: 32px;
   height: 4px;
}

#fedex  {
   background: url(profileimages/layer30.gif) no-repeat;
   
   position: absolute;
   left: 579px;
   top: 221px;
   z-index: 4;
   width: 66px;
   height: 18px;
}

#paymenttypes  {
   background: url(profileimages/layer18.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 291px;
   z-index: 2;
   width: 174px;
   height: 27px;
}

#profileproductback  {
   background: url(profileimages/layer24.gif) no-repeat;
   left: 223px;
   top: 467px;
   z-index: 2;
   width: 323px;
   height: 243px;
}

#profileproductimage {
   /*background: url(profileimages/layer25.gif) no-repeat;*/
   
   position: absolute;
   left: 227px;
   top: 491px;
   z-index: 3;
   width: 305px;
   height: 200px;
}

#topbar {
	background: url(profileimages/topbar.png) no-repeat;
	position: absolute;
	left: 15px;
	top: 73px;
	z-index: 5;
	width: 952px;
	height: 41px;
}

#freedivide  {
   background: url(profileimages/layer32.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 213px;
   z-index: 4;
   width: 88px;
   height: 1px;
}

#fedexback  {
   background: url(profileimages/layer31.gif) no-repeat;
   
   position: absolute;
   left: 567px;
   top: 214px;
   z-index: 3;
   width: 88px;
   height: 33px;
}

#checkbackbutton  {
   /*background: url(profileimages/layer21.gif) no-repeat;*/
   
   position: absolute;
   left: 835px;
   top: 293px;
   z-index: 3;
   width: 72px;
   height: 26px;
}

#lowerarrow {
   background: url(profileimages/layer34.gif) no-repeat;
   
   position: absolute;
   left: 862px;
   top: 344px;
   z-index: 3;
   width: 24px;
   height: 6px;
}

#paymentline  {
   background: url(profileimages/layer20.gif) no-repeat;
   
   position: absolute;
   left: 490px;
   top: 285px;
   z-index: 2;
   width: 173px;
   height: 1px;
}

#form  {
   /*background: url(profileimages/layer23.gif) no-repeat;*/
   
   position: absolute;
   left: 571px;
   top: 480px;
   z-index: 3;
   width: 349px;
   height: 354px;
}

#checkoutbuttonback  {
/*background: url(profileimages/layer6.gif) no-repeat;*/
   
   position: absolute;
   left: 556px;
   top: 854px;
   z-index: 2;
   width: 382px;
   height: 50px;
}

#total  {
   
   position: absolute;
   left: 806px;
   top: 163px;
   z-index: 3;
   width: 28px;
   height: 10px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#price  {
   
   position: absolute;
   left: 673px;
   top: 163px;
   z-index: 3;
   width: 30px;
   height: 11px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#free  {
   
   position: absolute;
   left: 598px;
   top: 191px;
   z-index: 3;
   width: 34px;
   height: 10px;
   font-size:14px;
   color:#2e2e2e;
   font-weight:bold;
}

#radiobutton  {
   
   position: absolute;
   left: 571px;
   top: 190px;
   z-index: 3;
   width: 13px;
   height: 13px;
}

#qty  {
   
   position: absolute;
   left: 15px;
   top: 162px;
   z-index: 3;
   width: 25px;
   height: 14px;
   font-size:14px;
   font-weight:bold;
   color:#272727;
}

#itemnumber  {
   
   position: absolute;
   left: 24px;
   top: 190px;
   z-index: 3;
   width: 5px;
   height: 13px;
   font-size:18px;
   color:#272727;
}

#copyright  {
	position: absolute;
	left: 13px;
	top: 971px;
	z-index: 2;
	width: 940px;
	height: 126px;
	font-size:11px;
	
}

.copyrighttext {
text-align:center;
}

.copyrightlinks {
text-decoration:underline;
color:#000000;
} 

I'm (noobishly) developing a site and want a menubar of fixed size at the top, with the remaining area of the window filled with a div containing the scrolling content.

It's height should be effectively 100% - size of menubar.

When I tried 100% height it natually was the full screen height, but then the whole page is full screen height plus the height of the menu bar.

Does anyone know how to size a div to meet my needs?

I was wondering whether there is someway to fix the area of a content in CSS so that it wont expand if too much
text was entered, just similar to the html code that fixes the area of the table.

i.e.

Code:

<table style="table-layout: fixed;">

This code lets the table stay in a fixed size no matter how much text is entered...

Hello...

My name is Matt and I'm looking for some help with what could be simple CSS coding.

I designed an image using Adobe Photoshop and I plan on uploading it to my website. What I want to try do is make this image after I upload it, to a like certain table. I wasnt sure what the terminology would be for this. I want my image to be the text area instead of using a large textarea code I want the image to be the text area where the text will scroll up and down within the image. I dont want my image to be the background. specifically I need the image itself to be the scrolling text area.

Can anyone help me out with this coding? Or steer me in the right direction of terminology for this?

I'd appreciate it...

Thanks

I'm trying to move my user CP area to be at the right hand side underneath the banner at the top of the forum page, where the Mark of the Wolves text link is....right across from that on the right side, but it seems that it's impossible, the user CP is there but the banner is overlapping it and when I tried to move it it just disappeared, like the lower area under the banner was a completely different area or something. Please help.

My site: garou-motw.com

Code:
#userarea {
height: 78px;
float: right;
padding: 25px 15px 20px 10px;
text-align: right;
font-size: 1.0em;
color: #ffd700;
font-family: tahoma, sans-serif;
}
#userarea a:link, #userarea a:visited {
color: #C68E17;
text-decoration: none;
border-bottom: 1px dotted #555555;
}
#userarea a:hover {
color: orange;
text-decoration: none;
border-bottom: 1px dotted green;
}

The right end of the DIV extends out of the viewable area. Why?
Code:

<html>
<head>
	<title>Untitled</title>
	<style>
	.book_box {	
			width: 100%;
			padding: 5px 5px 5px 5px;
			margin-top: 10px;
			margin-bottom: 10px;
			border: 2px solid #003366;
			background-color: #eef7ff;
			text-align : center;	
	}
	body {
		margin: 10px;
	}
	</style>
</head>

<body>

<div class="book_box">
	This is a test.
</div>

</body>
</html>