CSS - Fix The Weight Of Text Fields

to start: this is my first post and i hope this forum is as helpful as the others i am a member of..

i have a basic text game i am working on and code is already layed out for me.. but i am looking to give the game my own style.. i have created the look i want in photoshop and sliced and sent over to dreamweaver but i am a noob and dont know how to get the things functioning.. at all

pretty much everything can be set as the background except for the form but i want the blue gradient in input fields and images as buttons. i would like to have big font size in boxes and also have white letters.. also i want the whole centered x and y when viewer goes to page

like i said: im a noob and just getting back into the web dev stuff and am pretty rusty so if anyone can help me out i will be SOOOOOO thankful!!!

here is the link to the jpg.. let me know if you need the psd but i have 2 or 3 dif fonts in it that are not common fonts

Code:

http://i951.photobucket.com/albums/ad353/zac_exuro/Untitled-1-2.jpg

I've seen some text inputs with pretty snazzy styling, such as borders with rounded corners. How is this done?

Hi,

I'm creating a form and for some reason I can't get rid of the space between each line of the fields.

I've tried making the margin and padding 0 but no joy. Is it me or just browser bugs?

Help appreciated PHP Addict

Code:

<div style="width: 350px; float: right;">
<div style="width: 100px; text-align: right; float: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
<br />
<div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
<br />
<div style="width: 100px; text-align: right; float: left; clear: left; background: yellow;">
<label for="">field Name:</label>
</div>
<div style="width: 100px; float: left; background: orange;">
<input name="Address1" type="text" id="Ad1" value="$Address1" size="15" maxlength="25">
</div>
<div style="width: 120px; float: right; background: blue;">
Error Message
</div>
</div>

is there a way to disable the 3d shadowing effect on form fields? so i can just have a border.

When using Safari, whenever you click inside an input field, a highlight goes around the field (focus ring). Is there anyway to use CSS to remove the focus ring altogether?

I'm trying to declare different charactoristics for different inputs (i.e. submit, checkbox, radio). I have this code, however, I can't seem to get the checkbox background color to go away. I want to declare the background color of the submit and button fields white, but have the checkbox be whatever color the page is.

Code:

input,textarea, select {
font-family : Verdana; font-size : 12px; background-color : #ffffff; }
input.checkbox {
border: solid 0px #666666;
}

I'm stumped. Cannot find a solution here. Is it possible to vertically align a form field inside a DIV in IE6? It works fine everywhere else. (Big shock...)

Thank you for any help you can give. I've resolved to using tables temporarily. Ughhh.

Here's a snippet of the CSS:

Code:

body { background-color: #e2e4d7; background-image: url("../images/fade_top.gif"); background-repeat: repeat-x; margin: 0; padding: 0 }
#wrapper  { margin: 12px auto; width: 796px }
#top    { background-image: url("../images/main_top.gif"); background-repeat: no-repeat; width: 796px; height: 8px; overflow: hidden; vertical-align: bottom }
#main { background-image: url("../images/main_back.gif"); background-repeat: repeat-y; width: 796px; overflow: hidden }
#header { background-image: url("../images/header_back.gif"); background-repeat: no-repeat; width: 796px; height: 262px }
#nav { margin-right: 8px; margin-left: 8px; width: 780px; height: 60px }
#nav ul { list-style-type: none; margin: 0; padding: 0; width: 780px }
#nav li { float: left }
#nav li a { display: block; padding-top: 60px; height: 0; overflow: hidden }
...
#banner { margin-right: 8px; margin-left: 8px; width: 780px; height: 202px; overflow: hidden }
#bannerLeft   { background-image: url("../images/banner_logo.gif"); background-repeat: no-repeat; position: relative; width: 316px; height: 202px; float: left }
#searchBox   { line-height: 53px; text-align: center; position: absolute; top: 149px; width: 316px; height: 53px }
#searchField     { margin: 0; padding: 0; width: 196px; vertical-align: middle }
#searchButton   { margin: 0 0 0 6px; padding: 0; vertical-align: middle }
#bannerRight { background-image: url("../images/banner_photo.jpg"); background-repeat: no-repeat; width: 464px; height: 202px; float: right }
...

And here's a snippet of the HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
		<title></title>
		<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"/>
	</head>

	<body>
		<div id="wrapper">
			<div id="top"></div>
			<div id="main">
				<div id="header">
					<div id="nav">
						<ul>
						...
						</ul>					</div>
					<div id="banner">
						<div id="bannerLeft">
							<form action="http://www.google.com/search" method="get">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<input type="hidden" name="domains" value="http://www.whmca.com">
<input type="hidden" name="sitesearch" value="http://www.whmca.com">
<div id="searchBox">
	<input id="searchField" type="text" name="q"><input id="searchButton" name="btnG" type="image" src="images/search_bt.gif" alt="Search" height="14" width="42">
</div>
</form>						</div>
						<div id="bannerRight"></div>
					</div>
				</div>
				<div id="body">
				...
				</div>
			</div>
			<div id="bottom"></div>
			<div id="copyright">
			...
			</div>
		</div>
	</body>

</html>

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

I have a php application that requires the applicant to input information on their spouse. If they claim to be single the fields for spouse dissapear using javascript to make a <div> surrounding the fields "hide".

This leaves a blank gap on the applicaton where the fields use to display. How would I go about moving the questions below it on top of the hidden spouse fields?


here is the current javascript I am using to accomomplish this. It uses a php loop to display the questions for X amount of owners.
Code:

<?

echo "<script language=javascript type='text/javascript'>";

for($i=1; $i <= $_SESSION['principal']['numOwners']; $i++)
{

  echo "
  
  function hidediv".$i."() 
  { 
    if (document.getElementById) 
    { // DOM3 = IE5, NS6 
      document.getElementById('hideShow".$i."').style.visibility = 'hidden'; 
    } 
    else 
    { 
      if (document.layers) 
      { 
        // Netscape 4 
        document.hideShow".$i.".visibility = 'hidden'; 
      } 
      else 
      { 
        // IE 4 
        document.all.hideShow".$i.".style.visibility = 'hidden'; 
      } 
    } 
  } 
  
  
  function showdiv".$i."() 
  { 
    if (document.getElementById) 
    { 
      // DOM3 = IE5, NS6 
      document.getElementById('hideShow".$i."').style.visibility = 'visible'; 
    } 
    else 
    { 
      if (document.layers) 
      { 
        // Netscape 4 
        document.hideShow".$i.".visibility = 'visible'; 
      } 
      else 
      { 
        // IE 4 
        document.all.hideShow".$i.".style.visibility = 'visible'; 
      } 
    } 
  } ";

}

echo "</script>";

Greetings!
Maybe it's a newbie question, but I can't find out why form fields don't get vertically centered when rule height: 4em; line-height: 4em; is applied on them, they are inline elements, aren't they?
In FF applied correctly, not so in IE. Please take a look at: http://147.32.113.143/biotest/Sourc..._LookUpTerm.php

I have a form with several input and option fields, can I apply a separate background color to an individual input field possibly by name or id ?

Code:

#form1 
 INPUT, OPTION {

	background-color: #999999;
	
}

Is it possible to expand a table with DIV's using CSS hidden/visible?
If I select an option from a select field in one row, to have a hidden select field appear in the row directly below, moving the contents directly below down a row? Expanding the table when a hidden row becomes visible. Or should I just use DIV's and forget about using the table format?

is this possible with CSS?
So when the carat is focused on a form field the field is highlighed maybe by changing the border color... or background color.

very much like the macromedia support site.
http://www.macromedia.com/support/

I have a feeling though... it might involve a bit of javascript?

Cheers in advance
Rob

Hi,

I am having trouble clearing labels and fields.

I have set up my labels to float left and my fields to float left.

When i have more than one set of label and field, they do not align underneath each other.

Please could someone suggest the best way to clear the label and field so the next row will display correctly?

Thanks