0

Hi all, im looking for some help help,
i have this css which looks great, im happy with how the input type text boxes are displayed and the textarea looks neat too -

What I cant figure out is when I add a combo box, check box or image I cant resize them.

Im trying to add a search image to a form, but the form increases the size of the image.

any help would be appreciated please.

heres my form

<input type="image" src="img/search.png" width="169" height="48" name="button" class="ta" />

heres the complete css - If someone can show me how to define some css that will allow images remain the correct size - and help define combo box, check box

/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin : 0;
padding : 0;
border : 0;
outline : 0;
font-size : 100%;
vertical-align: top;
background : transparent;
}
body {
line-height : 1;
}
ol, ul {
list-style : none;
}
blockquote, q {
quotes : none;
}
blockquote:before, blockquote:after, q:before, q:after {
content : '';
content : none;
}
:focus {
outline : 0;
}
ins {
text-decoration : none;
}
del {
text-decoration : line-through;
}
table {
border-collapse : collapse;
border-spacing : 0;
}
a {
text-decoration: none;
}

/* RESET ENDS HERE */

/* Global styles */

* {
	font-family: Lucida Grande, Helvetica Neue, Helvetica, Arial, sans-serif;
	color:#336699;
	font-size: 16px;
	line-height: 1.3em;
}
html {
	-webkit-text-size-adjust: none;
}

/* Headers */

h1 {
	color: #336699;
	font-size: 1.1em;
	padding-bottom: 0.5em;
	line-height: 1em;
}

h1 a {
	font-family: inherit;
	letter-spacing: inherit;
	color:#3399FF;
}
h1 h {
	font-family: inherit;
	letter-spacing: inherit;
	color:#FF6600;
}
h2 {
	font-size: 1em;
	line-height: 0.9em;
	color: #fff;
	padding: 0.5em 0;
}
h2 a {
	font-family: inherit;
	letter-spacing: inherit;
	color: inherit;
}
h3 {
	font-size: 0.9em;
	color: #fff;
	letter-spacing: -1px;
	_letter-spacing: normal;
	padding: 0.5em 0;
}
h4 {
	font-weight: normal;
	color: #fff;
	letter-spacing: -1px;
	_letter-spacing: normal;
	font-size: 0.9em;
	padding: 0.5em 0;
}
h5 {
	color: #fff;
	font-size: 0.85em;
	font-weight: normal;
	font-style: italic;
	padding: 0.5em 0;
}

/* ULs */

article ul {
	margin: 5px 5px 10px;
}
article ul li {
	font-style: italic;
	font-size: 0.75em;
	padding: 4px 0;
	color: #fff;
	border-bottom: 1px solid #ccc;
}
#main li {
	border-bottom: 1px solid #ddd;
}
ul.disc li {
	list-style: disc;
	margin: 0 0 0 5px;
	list-style-position: inside;
}
ul.circles li {
	list-style-type: circle;
	list-style-position: inside;
	margin: 0 0 0 5px;
}
ul.roman li {
	list-style-type: upper-roman;
	list-style-position: inside;
	margin: 0 0 0 5px;
}
.post_list li {
	padding: 0;
}
ul.post_list h4, .blog_posts h4 {
	padding: 0;
}

/* Tables */

table {
	width: 100%;
	margin: 0.8em 0 0.625em;
	/* border-bottom: 1px solid #ccc; */
}
table th {
	font-size: 0.9em;
	color: #fff;
	/*padding: 0.2em 0.2em 0.4em;*/
}
table td {
	padding: 0.2em;
	font-size: 0.8em;
}
table td.last, table th.last {
	border-right: none;
}

/* Paragraphs and links */

p {
	font-size: 0.8em;
	padding: 0 0 0.5em;
	color: #fff;
}
p a {
	color:#FF6600;
	font-family: inherit;
}
#wrapper p a {
	color: #3b5998;
	text-shadow: 0 1px 0 #000;
}
#wrapper a.button {
	text-shadow: none;
}
p.align_center {
	text-align: center;
}
p.align_left {
	float: left;
	text-align: left;
	margin-right: 20px;
}
a {
	color: inherit;
}
strong {
	color:#333333;
	font-size: 1em;
	font-family: inherit;
}
hr {
	border: none;
	border-top: 1px dashed #336699;
	margin: 5px 0;
}

/* Buttons */

.button {
	font-size: 0.9em;
	display: inline-block;
	background: #efefef;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 7px 10px;
	color: #222;
	cursor: pointer;
	text-shadow: 0 1px 0 #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}

/* Img */

/* img {
	background: #fff;
	padding: 4px;
	border: 1px solid #bbb;
	-webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	-moz-box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	box-shadow: 0 2px 3px rgba(0,0,0,0.3);
	margin: 1em 0 1em;
} */

img.align_left {
	display: block;
	float: left;
	margin: 5px 10px 0 0;
}
img.align_center {
	display: block;
	margin: auto;
}
img.align_right {
	display: block;
	float: right;
	margin: 5px 0 10px 10px;
}

/* forms */

form {
	position: relative;
}

/* remove input */

input, textarea {
	font-size: 0.8em;
	width: 265px;
	border: 1px solid #999999;
	background: #fff;
	-webkit-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	-moz-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #999;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	color: #333;
	padding: 0.5em 0.5em  0.5em 30px;
	margin: 0.3em 0;
}

.landscape input, .landscape textarea {
	width: 425px;
}
input:focus, textarea:focus {
	-webkit-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #1e82f2;
	-moz-box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #1e82f2;
	box-shadow: inset 0 0 2px #000, 0 0 2px #eee, inset 0 0 4px #1e82f2;
	border: 1px solid #1e82f2;
}
textarea {
	height: 80px;
}
button {
	border: none;
}
button.button {
float: right;
	font-size: 0.8em;
}
#search_input {
	font-size: inherit;
	border: none;
	width: 127px;
	background-image: url('img/search_icon.png');
	background-repeat: no-repeat;
	background-position: 8px center;
}
.landscape #search_input {
	width: 297px;
}
input.name {
	background-image: url('img/user_icon.png');
	background-repeat: no-repeat;
	background-position: 8px center;
}
input.email {
	background-image: url('img/email_icon.png');
	background-repeat: no-repeat;
	background-position: 8px center;
}
textarea.message {
	background-image: url('img/message_icon.png');
	background-repeat: no-repeat;
	background-position: 8px 8px;
}
/*form label {
	display: none;
}
.form_alert {
	font-size: 0.7em;
	color: #333;
	position: absolute;
	bottom: 12px;
	left: 8px;
	text-shadow: none;
}
form .success {
	position: absolute;
	text-align: center;
	width: 100%;
	top: 35%;
	color: #1a1a1a;
	font-size: 0.8em;
	text-shadow: none;
}
form .success span {
	font-size: 1.2em;
	font-weight: bold;
} */

/* Etc */

span {
	font-family: inherit;
	color: inherit;
	letter-spacing: inherit;
}

/* CODE */

code, pre {
	display:block;
	font-family:"Courier New",Courier,Consolas,Monospace;
	font-size:12px;
	font-weight:normal;
	line-height:18px;
	margin: 0 0 30px;
	overflow:auto;
	padding:10px;
	white-space:pre;
	background: #fff;
	color: #333;
	text-shadow: none;
	letter-spacing: normal;
	border: 1px solid #f2f2f2;
	border-left: 20px solid #f2f2f2;
}
header, footer, article {
	display: block;
}

/* body */

body {
	width: 520px;
	background: #ffffff;
}
body.landscape {
	width: 480px;
	position: relative;
	padding: 0 0 20px;
}

/* header */

header {
	background: #3b5998/*url('img/header_back_heavyrain.png') repeat-x top left*/;
	height: 73px;
	padding: 2px 20px;
	z-index: 100;
	position: relative;
}
h1.logo {
	width: 260px;
	padding: 10px 0 0 0;
	float: left;
}
h1.logo a {
	display: block;
	background: url('img/main_logo.png') no-repeat top left;
	text-indent: -9999px;
	height: 42px;
}
#user_links {
	padding: 0;
	margin: 0;
	float: right;
	margin-top: 22px;
}
#user_links li {
	float: left;
	margin: 0 0 0 10px;
}
#user_links li a {
	display: block;
	width: 15px;
	height: 15px;
	text-indent: -999px;
	background: url('img/top_icons.png') no-repeat top left;
}
header a#login_link {
	background: url('img/top_icons.png') no-repeat top -25px;
}

/* login window */

#login_window {
	font-size: 1.2em;
	position: absolute;
	top: 73px;
	right: 10px;
	width: 200px;
	padding: 8px 10px;
	border: 1px solid #777;
	border-top: 1px solid #555;
	background: #bcbcbc;
	display: none;
	
	-webkit-border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
	
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5), inset 0 3px 0 rgba(0,0,0,0.2);
	
	background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2));
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.2)));
}
#login_name, #login_password {
	width: 165px;
}
#login_name {
	background-image: url('img/user_icon.png');
	background-repeat: no-repeat;
	background-position: 8px;
}
#login_password {
	background-image: url('img/lock_icon.png');
	background-repeat: no-repeat;
	background-position: 8px;
}

/* top bar */

#top_bar {
	height: 44px;
	overflow: hidden;
	padding: 10px 10px 2px;
	background: #3b5998/*url('img/main_back_heavyrain.jpg') center center*/;
	position: relative;
	top: -5px;
	margin-bottom: -5px;
}
.top_bar_buttons.left {
	width: 120px;
	float: left;
	text-align: left;
}
.top_bar_buttons.right {
	width: 120px;
	float: right;
	text-align: right;
}
.top_bar_buttons a {
	padding: 9px 10px;
	display: inline-block;
	background: #2a3c4b;
	border: 1px solid #222e37;
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	
	-webkit-box-shadow: inset 0 1.5em 0 rgba(251,251,251,0.06), inset 0 1px 2px rgba(0,0,0,1), 0 1px 0 rgba(251,251,251,0.13);
	-moz-box-shadow: inset 0 1.5em 0 rgba(251,251,251,0.06), inset 0 1px 2px rgba(0,0,0,0.7), 0 1px 0 rgba(251,251,251,0.13);
	box-shadow: inset 0 1.5em 0 rgba(251,251,251,0.06), inset 0 1px 2px rgba(0,0,0,0.7), 0 1px 0 rgba(251,251,251,0.13);
}
#top_bar_home {
	background: url('img/home_button_heavyrain.png') no-repeat left top;
}
#top_bar_home a {
	padding-top: 10px;
	background: none;
	border: none;
	-webkit-box-shadow:none;
	-moz-box-shadow: none;
	box-shadow: none;
	padding-left: 20px;
	padding-right: 15px;
}

/* slider */

#slider {
	height: 397px;
	overflow: hidden;
	position: relative;
	background: #3b5998/*url('img/main_back_heavyrain.jpg') center center*/;
	top: -5px;
	margin-bottom: -5px;
}
.slides {
	display: none;
}
#slide1 {
	display: block;
}

#slider .description {
	width: 518px;
	position: absolute;
	bottom: 0px;
	padding: 5px 5px 5px 5px;
	background: #3b5998;
}
.landscape #slider .description {
	left: 80px;
}
#slider img {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#slider .image {
	width: 512px;
	margin: auto;
}
#slider .description p {
	color: #ccc;
}
#slider_controls {
	position: absolute;
	left: 0;
	bottom: 6px;
	height: 23px;
	width: 100%;
	border-top: 1px solid #4b6274;
}
#slider_controls p {
	position: absolute;
	bottom: 0;
	font-size: 1em;
	padding: 0;
	z-index: 2;
}
#slider_controls p.prev{
	left: 15px;
}
#slider_controls  p.prev a {
	background: url('img/arrow_left_w.png') no-repeat left center;
	padding-left: 12px;
}
#slider_controls p.next {
	right: 15px;
}
#slider_controls  p.next a {
	background: url('img/arrow_right_w.png') no-repeat right center;
	padding-right: 12px;
}
#slider_navigation {
	position: absolute;
	bottom: 0;
	width: 320px;
	text-align: center;
	z-index: 0;
}
.landscape #slider_navigation {
	width: 480px;	
}
#slider_navigation li {
	display: inline-block;
	padding: 8px 0 0;
}
#slider_navigation li a {
	display: block;
	width: 10px;
	height: 15px;
	text-indent: -9999px;
	background: url('img/slider_nav_dots.png') no-repeat top left;
}
#slider_navigation li.current {
	margin: 0 -7px 0 -8px;
	padding-top: 0;
}
#slider_navigation li.current a {
	width: 25px;
	height: 20px;
	background: url('img/slider_nav_dots.png') no-repeat -10px top;
	top: 2px;
}

/* wrapper */

#wrapper {
	padding: 17px 10px 20px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #cbcbcb;
	background: #627aad/*url('img/wrapper_back_heavyrain.jpg') no-repeat center top #b2b2b2*/;
	text-shadow: 0 -1px 0 #888;
}
#main_navigation {
	height: 40px;
	position: relative;
}
#main_navigation .button {
	font-weight: bold;
	text-transform: uppercase;
	position: absolute;
}
#main_navigation .button span {
	display: inline-block;
	padding: 0;
	width: 10px;
	height: 18px;
	background: url('img/arrow_up.png') no-repeat center center #efefef;
	text-indent: -9999px;
}
#main_navigation_links {
	display: none;
	position: absolute;
	bottom: 43px;
	width: 170px;
	z-index: 10;
	font-size: 0.9em;
	background: #efefef;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 5px 0;
	cursor: pointer;
	text-shadow: 0 1px 0 #fff;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	-webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.inner #main_navigation_links {
	bottom: -145px;
}
#main_navigation_links li {
	margin: 0;
	padding: 0;
}
#main_navigation_links a {
	color: #333;
	text-transform: uppercase;
	display: block;
	border-bottom: 1px solid #d7d7d7;
	border-top: 1px solid #fff;
	padding: 4px 10px;
}
#main_navigation_links li:first-child a {
	border-top: none;
}
#main_navigation_links li:last-child a {
	border-bottom: none;
}
#top_search {
	position: relative;
	float: right;
	overflow: hidden;
	height: 33px;
}

/* posts */

.post_data {
	color: #fff;
	text-shadow: 0 1px 0 #ccc;
	float: left;
	font-size: 0.6em;
	padding-top: 5px;
}
.inner article.single .post_data {
	float: none;
	padding-bottom: 10px;
}
.read_more {
	float: right;
}
.read_more a.button {
	padding: 3px 6px;
	text-shadow: none;
}
article {
	overflow: hidden;
	border-top: 1px solid #cacaca;
	border-bottom: 1px solid #999;
	padding: 1em 0 0.4em;
}
article.first {
	border-top: none;
}
article.single {
	border: none;
}
#posts_navigation {
	padding: 1em 0 0;
	border-top: 1px solid #cacaca;
	font-size: 0.8em;
}
#posts_navigation a#older_posts {
	background-image: url('img/arrow_left.png');
	background-repeat: no-repeat;
	background-position: 8px 11px;
	padding-left: 20px;
}
#posts_navigation a#newer_posts {
	background-image: url('img/arrow_right.png');
	background-repeat: no-repeat;
	background-position: 88px 11px;
	padding-right: 20px;
	display: none;
}

/* comments */

#comments {
	margin: 10px 0 10px;
	overflow: hidden;
}
.comment {
	margin: 10px 0;
}
.userpic {
	float: left;
	width: 40px;
	height: 50px;
	background: url('img/reader_comment.png') no-repeat top left;
	margin-top: 15px;
}
.author_comment .userpic {
	float: right;
	background: url('img/author_comment.png') no-repeat top right;
}
.comment_body {
	background: #fff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 10px;
	margin-left: 40px;
}
.author_comment .comment_body {
	margin: 0 40px 0 0;
	background: #fffadf;
}
.comment_body p {
	text-shadow: none;
	color: #666;
	padding: 0;
	font-size: 0.75em;
}
p.comment_data {
	margin-top: 10px;
	color: #111;
	font-size: 0.7em;
}

/* footer */

footer {
	padding: 15px 0 0;

	text-shadow: 0 -1px 0 #666;
}
footer p {
	color: #e5e5e5;
	text-shadow: 0 -1px 0 #888;
}
footer .container {
	padding: 1em 0;
	border-bottom: 1px solid #7a7a7a;
	border-top: 1px solid #adadad;
	padding: 15px 10px;
}
footer .container.first {
	border-top: none;
	padding-top: 0;
}
footer .container.last {
	border-bottom: none;
}
#footer_navigation_links li {
	border-bottom: 1px solid #8f8f8f;
	border-top: 1px solid #aaa;
	padding: 0;
}
#footer_navigation_links li:first-child {
	border-top: none;
}
#footer_navigation_links li:last-child {
	border-bottom: none;
}
#footer_navigation_links li a {
	font-size: 0.9em;
	color: #e5e5e5;
	text-shadow: 0 -1px 0 #888;
	display: block;
}
#footer_navigation_links li a:hover {
	color: #fff;
}
#twitter_update {
	background: #3b5998;
	margin: 10px 0 0;
	padding: 0.7em 1em 1em;
	font-size: 0.8em;
	-webkit-border-radius: 8px;
}
#follow_button {
	margin-top: 8px;
	float: left;
}
#follow_button a {
	font-size: 1em;
	padding-top: 4px;
	padding-bottom: 3px;
	padding-left: 24px;
	background-image: url('img/follow.png');
	background-position: 8px center;
	background-repeat: no-repeat;
}
#twitter_name {
	text-align: right;
	padding: 10px;
}
#twitter_name a {
	padding: 10px 0;
	background: url('img/twit_arrow.png') no-repeat center top;
}
#copyrights {
	color: #fff;
	text-shadow: none;
	font-size: 0.6em;
	float: right;
	margin-top:30px;
}
#back2top {
	background: url('img/back2top.gif') no-repeat left center;
	padding:0 0 0 15px;
	width: 80px;
}
/* video post */

#vidposter {
	height: 288px;
	overflow: hidden;
	position: relative;
	background: #3b5998/*url('img/main_back_heavyrain.jpg') center center*/;
	top: 5px;
	margin-bottom: 10px;
}
#vidpostersml {
	height: 144px;
	overflow: hidden;
	position: relative;
	background: #627aad/*url('img/main_back_heavyrain.jpg') center center*/;
	top: 5px;
	margin-bottom: 10px;
}
.vids {
	display: none;
}
#vid {
	display: block;
}

.vidssml {
	display: none;
}
#vidsml {
	display: block;
}

#vidposter .description {
	width: 520px;
	position: absolute;
	bottom: 0px;
	padding: 5px 5px 5px 5px;
	background: #3b5998;
}
.landscape #vidposter .description {
	left: 80px;
}
#vidposter img {
	padding: 0;
	margin: 0;
	border: none;
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#vidposter .image {
	width: 512px;
	margin: auto;
}
#vidpostersml .imagesml {
	width: 288px;
	margin: auto;
}
#vidposter .description p {
	color: #ccc;
}
3
Contributors
5
Replies
8
Views
6 Years
Discussion Span
Last Post by saliha
0

Post the codes where the problem that you think. Show us the focus and it may save our time.

0

Hi thanks for your reply -

Here is the complete form I am working with -

<form action="tresults.php" method="GET">Search for a trade or service<br /><input name="search" type="text" size="25" title="Enter text to search" /><div class="p">Search by Country, City, Trade, Description, Keywords</div><input type="image" src="img/search.png" width="169" height="48" name="button" class="ta" /><br /></form>
0

Try with 'input type="button"' instead of 'image' and set background image 'search.png', and put the exceed width and height to the button that it necessary to see the background.
Hope that help.

0

Try with 'input type="button"' instead of 'image' and set background image 'search.png', and put the exceed width and height to the button that it necessary to see the background.
Hope that help.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.