Do you mean this search box? Because it has borders. I checked it in both. Safari will not render CSS changes that get rid of borders and whatnot.
Okay, I am basically trying to replicate what Apple is doing on this page:
http://www.apple.com/itunes/
Right down by the "Today on the iTunes Music Store." I want the search box for my forum to look like this. I've checked the box in both Firefox and Safari, and it looks good in both.
The problem is, if I have the search box be of type="text", Firefox and Safari both put a border around the box. If I use type="search", Firefox makes a nice plain white box, but Safari gets totally fancy with a circular box that screws up what I'm trying to do. If I use type="plain", Firefox makes a nice plain white box, but Safari makes a box with a border around it.
All I want is a text entry box that is white, has no border, and is the size I tell it to be. What do I need to do here?
Or, if nothing else, what do I need to do to totally rip off the way Apple is doing it on their page?
WARNING: This post may contain violent and disturbing images.
Do you mean this search box? Because it has borders. I checked it in both. Safari will not render CSS changes that get rid of borders and whatnot.
Last edited by Calliander; 02 Oct 2005 at 10:45 PM.
The borders aren't the actual search box's borders - they are made via images. That's why I'm so confused as to how they made the box it is look the same in both Safari and Firefox with the same HTML and CSS code.
WARNING: This post may contain violent and disturbing images.
If their code works, why not just use it?
The only thing in CSS that I notice are these three things:
I'll have to look at this a bit harder to figure it out.Code:#itmstop #itmssearch .srchimgs {margin: -2px 0 0 0; padding: 0;} html>body #itmssearch .srchimgs {margin-bottom: 0;} /*\*/ html>body*#itmssearch .srchimgs {display: none;}
I'm having a bit of trouble wrapping my brain around exactly how they're working things out. I've tried doing things their way, but I'm not getting the same results.Originally Posted by kedawa
This stuff goes along with the code you found, Calliander. The .sbox code seems to be part of the major formatting of the search box.
Oh, and here's the way I'm trying to do it.#itmssearch select, #search input {font-size: 10px} #itmssearch input.sbox {color: #80808C; height: 12px; width: 130px; border: 0; background: white url(http://images.apple.com/itunes/image...bg20050907.gif) repeat-x left top; padding: 3px;} #itmstop #itmssearch .srchimgs {margin: -2px 0 0 0; padding: 0;} html>body #itmssearch .srchimgs {margin-bottom: 0;}
Here is the code in my HTML file:
And then the CSS code for that main div<div class="searcharea">
<center>
<form action='{ipb.script_url}act=Search&CODE=01&forums=all' method='post'>
<input type="plain" style="background: #FFFFFF; border: 0px; height: 13px;" size='18' name='keywords' onfocus="this.value=''" value='Enter words to search...' />
</form>
</center>
</div>
.searcharea {
background: url(<#IMG_DIR#>/search.png);
position: fixed;
width: 156px;
height: 19px;
top: 25px;
right: 10px;
z-index: 20;
}
WARNING: This post may contain violent and disturbing images.
Alright, I ripped their code, made a few changes and now get consistent results in both FireFox and Internet Explorer 6. This should reproduce just their search box exactly. Even the first doctype line matters or else IE will not render the search box correctly.Code:<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <head> <style type="text/css"> INPUT { FONT-SIZE: 9px } .sbox { border-width:0px; padding: 3px; BACKGROUND: white url('http://images.apple.com/itunes/images/searchbg20050907.gif') repeat-x left top; WIDTH: 130px; COLOR: #80808c; HEIGHT: 12px; } </style> </head> <body> <form id="search" action="http://phobos.apple.com/WebObjects/MZSearch.woa/wa/com.apple.jingle.search.DirectAction/search?term=" method="get" name="search"> <table border="0" cellspacing="0" cellpadding="0"> <TR> <TD><img src="http://images.apple.com/itunes/images/searchleftcap20050907.gif" border="0" width="16" height="18"></TD> <TD valign=top><input class="sbox" onclick="if(this.value=='Search iTunes Music Store')this.value='';" type="text" value="Search iTunes Music Store" name="term" results="5" size="20"></TD> <TD><img src="http://images.apple.com/itunes/images/searchrightcap20050907.gif" border="0" width="9" height="18"></TD> <TD><input type="submit" value="Go"></TD> </TR> </table> </form> </body>
Question: Does Apple's page show up correctly with Safari? It may very well be the first line, "<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">" that makes the difference. I don't get consistent results between IE and FireFox without it as I mentioned.
EDIT: Oops, you already answered my question actually. Yeah, then there should be no problem with this code.
Last edited by NightWolve; 09 Oct 2005 at 07:20 AM.
"Don't be a pansy." - James
You are to be commended. I will try that out, and see if it works.
WARNING: This post may contain violent and disturbing images.
Except that it is broken in FireFox.Originally Posted by cka
WARNING: This post may contain violent and disturbing images.
Bookmarks