WordPress.com

1. aw1923
   Member
   Jan 3, 2009, 2:53 AM

   OK, first heres my CSS for the search widget
   

   #searchform {
   margin-top: -195px; margin-left: -75px; width: 190px;
   }
   #s{
   background: transparent; width: 137px;
   }
   #searchsubmit{
   background: red; background:url('http://sensico.files.wordpress.com/2009/01/go.png') 10% 50% no-repeat;
   color: transparent;
   }

   The problem is that, my header overlaps the search bar so that if you were to click on the search bar them you would return to the home page, and on my last CSS theme I was able to move the search bar to the header without any problems but I don't know how I would fix this using the sandbox theme.
   Next problem is trivial, but in the search form I would like the words "search here" to appear, and I was wondering if anyone knew how to do that.

2. aw1923
   Member
   Jan 3, 2009, 3:06 AM

   never mind solved it. If anyone has a tip on that second issue it would be great, but since Its not a necessity I'll label the post as solved.

3. devblog
   Member
   Jan 3, 2009, 3:23 AM

   Your CSS has some flaws...

   Try this:

   #searchform {
   z-index: 1000;
   position: absolute;
   right: 59px;
   width: 190px;
   }
   
   #s{
   background: transparent; width: 137px;
   }
   
   #searchsubmit{
   background: red url('http://sensico.files.wordpress.com/2009/01/go.png') 10% 50% no-repeat;
   color: transparent;
   }

   Since you are a CSS raising star, analyze me code and see what was wrong with yours. ;)

   Just some notes, this doesn't mean you have to change what you have, but I personally use pixels to set margins, paddings and positions, widths (etc)... and ems, % and pts (pts for printing, btw) for fonts only (sometimes I use % for widths and/or heights... it depends what elements I'm using them with). I do this because, semantically, it makes more sense. Just giving you another point of view.

   Also, try using shorthands, they make your code look cleaner.

4. devblog
   Member
   Jan 3, 2009, 3:27 AM

   slow much? ....

5. aw1923
   Member
   Jan 3, 2009, 3:49 AM

   At least I now know what z-index does. And I took your units advise with my font size, I will try that for my width with the search bar, so hopefully it will look better in IE7.

   Thanks devblog, and I can't believe you called me a CSS raising star :D

6. aw1923
   Member
   Jan 3, 2009, 4:42 AM

   OK, I fixed my second issue so I wanted to add it here just in case anyone in the future comes searching for how to do this, I just created an image background with the text I wanted and then added the #searchform input:focus class.

   #searchform {
   margin-top:-106.9px;
   margin-left:-75px;
   z-index:1000;
   position:absolute;
   width:20%;
   background:url('http://sensico.files.wordpress.com/2009/01/search.png') 10% 50% no-repeat;
   }
   
   #searchform input:focus {
   background:white;
   }

Topic Closed

This topic has been closed to new replies.