Designing Forms with CSS and Image Replacement for Buttons

***view Edit HTML for source code***

BASIC FORM CODING

First name:


Last name:


email:


Male

Female

CSS CODING FOR BG IMAGE REPLACEMENT FOR BUTTONS/INPUT FEILDS
.fieldset .textfield {
margin:3px;
height:20px;
width:200px;
/** hides input element but keeps function **/
border:solid 0 #fff;
background: transparent

/** add bg img and browser fixes **/
url("graphics/textfield_bg.gif") no-repeat fixed; }


fieldset>input.textfield {
background: transparent
url("graphics/textfield_bg.gif") no-repeat; }

------------------------------------------------------
IE5

#login input.button:hover
{

background-image:url(../images/login.png);
background-repeat: no-repeat;
height: 69px;
width: 70px;
}

-------------- http://www.rtbwizards.com/helpcenter/cssforms.htm

Warning: you cannot have both a submit button image and a reset button image. Using an image will cause the reset button to also submit the form in Internet Explorer.
From this:





To this:





http://woork.blogspot.com/2008/06/form-elements-design-using-css-and-list.html

Error Fix | Adjust DIV dimensions for Padding

Can't figure out why dimensions aren't working out. Check your padding! adding padding adds to the overall dimensions of your DIV. For example you have set div width to 900 to match an image width of 900px, but the DIV comes out wider. It could because your set your padding: 30 (that 30 for all sides). This means that the left and right padding = 30 each. This adds 60px to the overall width of the DIV (360px).

Resolve by removing padding or add 60 px to the DIV width to adjust for the right and left padding.

Errot Fix | Zero Padding to Rid Unwanted Space

Working on subpages for the NS project, I decided to build my own html page with divs instead of a Photoshop generated table layout. But I couldn't get rid of this unwanted top space, even after setting the margins to zero. (didn't have this problem with table layout)

Padding the body at zero solved my problem. To be on safe side by default zero your margins & padding to avoid undesirable spaces that you didn't specify. The following code sets my layout to "zero" by getting rid of any unwanted spaces brought about by the browser. Note the auto margin in the outer div also centers the layout (see previous post). Need to start every new web page with this basic code to avoid headaches!

body {
padding: 0; 

margin: 0;
background-color: #D66D29;
}
#wrapper {
padding: 0;
margin: 0 auto;
width: 1200px;
}

No pixels are selected?

Why, when trying to make a selection within a layer with my lasso tool, do I always get a pop up that says"No pixels are selected" ?  One reason for getting this message is failing have the layer active which has the object you are trying to select. But I am sure that I am in the correct layer which is not an adjustment layer. The marquee tool works but its not a useful option for the "car" I am trying to select within this photo. For now I am switching to the polygonal selection tool.

Hmm, I see this is also weird. There's a long delay from one point to the next. Perhaps it the problem is the file size of the photo causing everything to move so slow, that the dragging of the lasso won't compute at the speed of my hand....

File size under 200kb.

UPDATE: After restarting PC. Alls well. Lassoing just fine. Boy did we waste alot of time. When in doubt ALWAYS RESTART PC.

How can I get rid of the Hand in Photoshop!

In the middle of a project one day, I try to switch to a tool but instead of the apprropriate tool I get the "hand" instead! I kept switching to different tools. No luck! Finally I Google "How can I get rid of the Hand" and got various answers. Most worthless. But someone, said "hit the space bar." It works. This has happened repeatedly since the first time and I always waste time before remembering the remedy. So I decided to document the answer in my own blog.