Styling of form using CSS

Question

I have created a search function in my website. I would like to load the images for the search button from the CSS. The search function works, but the button images won't load — why not?

This is my form:

<form>
<div id="form"><input value="/etn/pagetree" type="hidden" name="c" /> 
<input value="search" type="hidden" name="func" /> 
<input value="1148074" type="hidden" name="rid" /> 
<input onblur="if(value==''){value='Search'}" id="search_str" onfocus="if(value=='Search'){value='';}" value="Search" name="search_str" type="text" /><input id="search_btn" value=" " type="submit" name="Submit" /></div>
</form>

This is my CSS:

FORM { margin:0px; }

A, A:visited, A:hover { text-decoration:none; }

.subpages_box A, .subpages_box A:visited, .subpages_box A:hover { color:#ab0019; font-size:13px; font-weight:bold;  }

.footer_area A, .footer_area A:visited, .footer_area A:hover { color:#fec80c; }

a.sitemenu, a.sitemenu:visited { font-size:14px; color:#fff; padding:2 5 3 5; margin:2; line-height:170%; }
a.sitemenu:hover { background-color:transparent;}
#sitemenulit{ background-color:transparent; }

.map_box A, .map_box A:visited { color:#AB0019; }
.Xmap_box A:hover { color:#000; }

.lineOdd {
    BACKGROUND-COLOR: #e8e8e8
}
.lineEven {
    BACKGROUND-COLOR: #e8e8e8
}
.dropmenu A {
    PADDING-BOTTOM: 2px; PADDING-LEFT: 20px; PADDING-RIGHT: 10px;  COLOR: #443f3f; PADDING-TOP: 2px
}
.dropmenu A:visited {
    PADDING-BOTTOM: 2px; PADDING-LEFT: 20px; PADDING-RIGHT: 10px;  COLOR: #443f3f; PADDING-TOP: 2px
}
.dropmenu A:hover {
    BACKGROUND-COLOR: #901a6c; COLOR: #fff; TEXT-DECORATION: none
}


TABLE.search_box {
    WIDTH: 130px; MARGIN:8 50 0 0; float:right;
}
TABLE.search_box TD {
    TEXT-ALIGN: left; FONT-SIZE: 90%
}
TABLE.search_box #search_str {
    WIDTH: 94px;
    height: 21px;
    background: url(/wbn/slot/u3252/style/extbox.png) no-repeat;
    border: 0px solid transparent;
    padding: 3 2 0 5; font-size:11px;
}
TABLE.search_box #search_btn {
    WIDTH: 28px;
    height: 21px;
    background: url(/wbn/slot/u3252/style/btn.png) no-repeat;
    border: 0px solid transparent;
    cursor: pointer;
}

INPUT { margin:0px }

.content_area OL { margin:0px; padding-left:10px }

Newly edited code

<table border="1">
<tbody>
<tr>
<td><form>
<div id="header"><input value="/etn/pagetree" type="hidden" name="c" /> <input value="search" type="hidden" name="func" /> <input value="1148074" type="hidden" name="rid" /> <input onblur="if(value==''){value='Search'}" id="search_str" onfocus="if(value=='Search'){value='';}" value="Search" name="search_str" type="text" /><input id="search_btn" value=" " type="submit" name="Submit" /></div>
</form></td>
</tr>
</tbody>
</table>

Are you just trying to style your search field and button? Am I understanding your question right? — Dyn
– Dyn, Commented Jan 19, 2013 at 1:59
Check the path of your images, that looks like a weird and long path to me. Also, use quotes before and after your image paths: background: url("/wbn/slot/u3252/style/btn.png") no-repeat; — Dyn
– Dyn, Commented Jan 19, 2013 at 2:04
Hi Dyn, I created this website using Swiiit website builder, hence the link look weird, but i have check the path of the image by using "img src' it can load. But it still fail to load in the form. thank in advanced — user1992100
– user1992100, Commented Jan 19, 2013 at 2:10
I have try replace the class to form, still the image could not load. but if I put the form inside a table, will it work? — user1992100
– user1992100, Commented Jan 19, 2013 at 2:46

Dyn · Accepted Answer · 2013-01-19 03:15:14Z

1

Try this

input#search_str {
    WIDTH: 94px;
    height: 21px;
    background: url(/wbn/slot/u3252/style/extbox.png) no-repeat;
    border: 0px solid transparent;
    padding: 3 2 0 5; font-size:11px;
}
input#search_btn {
    WIDTH: 28px;
    height: 21px;
    background: url(/wbn/slot/u3252/style/btn.png) no-repeat;
    border: 0px solid transparent;
    cursor: pointer;
}

Look at how your elements are nested, in what div, class or id. There is something wrong with your CSS definitions. It's not good enough to build a website with an automated tool and then come and look for an answer here, you have to understand what you are doing...

answered Jan 19, 2013 at 3:15

Dyn

3953 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dyn Over a year ago

please set the question as answered!

Collectives™ on Stack Overflow

Styling of form using CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related