Quick search bar help...

[vrufusx65v]

I have a custom search bar with a uncooperative textfield. I linked the code and a picture of the problem. I need to get either the textfield small enough so it looks like its one fluid search bar, or a way to make the text field transparent so that you can only see the background picture behind it. is their such a way or am i just blowing smoke???

HTML

<div class="navsearch">
	<form id="search" method="get" action="http://shotsoundstudios.net/">
	<input class="search" onClick="if(this.value == 'Search SS Studios...')
	this.value='';" onBlur="if(this.value.length == 0) this.value='Search SS Studios...';"
	value="Search SS Studios..." name="s">
	</form>
	<img src="images/searchbutton.png" id="searchbutton" />
</div>

CSS

.navsearch {
	float:right;
	width:230px;
	height:20px;
	margin-right:176px;
	margin-top:5px;
}

.navsearch #search {
	float:left;
	background-image:url(../images/searchbar.png);
	width:156px;
	height:20px;
}

input.search {
	margin-top:2px;
	height:15px;
	width:140px;
	color:#FFF;
	background-color:#595959;
	border:none;
}

.navsearch #searchbutton {
	float:right;
	background-image:url(../images/searchbutton.png);
	width:59px;
	height:20px;
	margin-right:10px;
	margin-top:px;
}

Picture of the Problem:

 

[misson]

Set the background-color of input.search to "transparent" rather than #595959.

Rather than a text box whose size is determined by the background image, you can make an elastic one by using a tileable background image with end pieces set using :before and :after pseudo-elements (for IE gte 8) or by inserting actual elements (for IE lte 7). Read "Multiple Backgrounds and Borders with CSS 2.1" for specifics.

 

[vrufusx65v]

sweet, that background-color to transparent worked, as it should of...but now my text is black instead of white, and also my @font-face isn't working right, i have one font that i want the entire webpage to have, but it stays on the default times new roman or arial, whatever i have it set to within dreamweaver. I know my text.css containing the @font-face is correct but how should i have my style.css and index.html setup to understand the font?

 

[misson]

You should know it's hard to answer questions about source without seeing it. Your original sample has a hint about where to find the live page you're testing (somewhere on shotsoundstudios.net), but the main page doesn't lead anywhere. The only style sheet I can see (http://shotsoundstudios.net/css/style.css) doesn't use the @font-face directive. How about a minimal test case and links to live pages?

 

[vrufusx65v]

Sorry about that, it was late and i wasnt running on all cylinders...

my live test page is http://betatest.shotsoundstudios.net/

im hoping you and all others in the forums know how to read code via firebug or even "view > Page Source"...

 

[misson]

im hoping you and all others in the forums know how to read code via firebug or even "view > Page Source"...

Sure we can, but that still means we have to wade through extraneous code (unless the linked page is a minimal test case), which (among other things) lengthens how much time it will take to fix your problem. If it's going to take too much time, many might not bother. If you want us to check the source (such as if the source is too large to post here), it's best to point out where in the code to look, especially when there are multiple files involved. Posting source in the forum also creates a record of what you did, so that you can change the live page without causing confusion. This will help others with a similar problem to yours who come across the thread.

(For the @font-face problem, I went for view resources rather than view source, as it let me quickly view the external style sheets).

Where I see the @font-face is in text.css:

@font-face {
    font-family: myriadpro;
    src: url(css\MyriadWebPro.ttf);
}

The value for src has two problems:

• backslash isn't a path separator, it's an escape character. Since the escape "\M" is equivalent to "M", the slash is dropped, so the URL is equivalent to "url(cssMyriadWebPro.ttf)". Change it to a forward slash.
• Relative URLs in style sheets are relative to the style sheet. The above URL (after fixing the slash) would translate to "http://betatest.shotsoundstudios.net/css/css/MyriadWebPro.ttf". Change the path to an absolute path (or remove the "css/", though this is potentially confusing).

The fixed version is:

@font-face {
    font-family: myriadpro;
    src: url(/css/MyriadWebPro.ttf);
}

As for the text color of the search box, you haven't set it anywhere. Form input elements have default styling provided by the user agent. You have to override this in your style sheets.

 

[vrufusx65v]

the fixed version didnt work. Is it because i dont have the font-family connected to the text somehow?

 

[misson]

If you haven't set the font-family for the input, then the user agent styling will take precedence over inherited values, just as with the text color. You must override any user agent provided style that you don't want.

 

[vrufusx65v]

strike that, @font-face did work, just when it was live, apparently it doesn't like being active when you're just previewing it from its local roots via dreamweaver.

Thanks for all the help, unfortunately i will back, probably with more stupid questions that need answered... =]