WordPress.org

1. raygene
   Member
   Posted 4 years ago #

   Hi,

   After adding another RSS feed in the header (category), I've been playing around with my theme's CSS for about 2 hours and can't get my searchform flush right. Click here to see.

   Can anyone look at this code and tell me what needs to be changed?

   #header {
   	height: 117px;
   	border-bottom: 1px solid #383838;
   	margin-bottom: 28px;
   }
   #top{
   	float: right;
   	text-align: right;
   }
   #top li {
   	display: inline;
   }
   #top li a:hover {color: #AA0001;}
   #top a {
   	color: #383838;
   	margin: 0 0 0 13px;
   	background: url(i/toparrow.gif) center left no-repeat;
   	padding: 0 0 0 20px;
   	font-size: 1.4em;
   	font-weight: bold;
   }
   #top .current_page_item a {
   	background-image: url(i/toparrow2.gif);
   }
   #searchform {
   	margin: 25px 0 0;
   }
   #searchform input {
   	font: 1.1em "Trebuchet MS", Arial, Sans-Serif;
   	float: left;
   }
   #s {
   	width: 175px;
   	padding: 2px 6px;
   	border: 1px solid #383838;
   	margin-right: 5px;
   }
   #searchsubmit {
   	background: #E60000;
   	border: 0;
   	padding: 2px 7px;
   	color: #fff;
   	font-weight: bold !important;
   	overflow: visible;
   	height: 24px;
   	cursor: pointer;
   }
   
   #logo {
   	float: left;
   	color: #383838;
   	line-height: 0.85em;
   	font-size: 3.3em;
   	margin: 14px 0 15px;
   	padding: 0 0 2px 65px;
   	background: url(i/yang.jpg) no-repeat;
   
   }
   #logo span {
   	display: block;
   	font-size: 0.50em;
   	font-weight: normal;
   	text-transform: uppercase;
   }

   Thanks,
   Gene

2. jonimueller
   Member
   Posted 4 years ago #

   I suggest you zero out all the padding and margins on these:

   #searchform
   #searchform input
   #s
   #searchsubmit

   and that will tell you where you need to add it back in. That's usually how I solve things like that. Or you might think about an ID or class for the form element there.

3. RoseCitySister
   Member
   Posted 4 years ago #

   I would probably take the easy way out and wrap it in a floated right div. I always put this at the beginning of every stylesheet:

   * {
   margin: 0;
   padding: 0;
   }

   To strip away any default values, and then assign padding and margins to elements as I go along.

4. StrangeAttractor
   Member
   Posted 4 years ago #

   I guess you're going to have multiple things to try here -- in Firefox, you can just take out the float: left on the #searchform input:

   #searchform input {
   	font: 1.1em "Trebuchet MS", Arial, Sans-Serif;
   	/* float: left; */
   }

   That works in Firefox -- the search form is even with the right margin.

   Haven't tested it in other browsers, so you may hit the usual snags in IE 6.

5. raygene
   Member
   Posted 4 years ago #

   Thank for all the answers, I tried using StrangeAttractor's suggestion of simply commenting out the float: left; line and it looks great in FF, Camino and Safari (Mac user).

   Could someone with IE6 have a quick look at it please?
   http://matesjunction.com/altmedpress/

   Thanks,
   Gene

   P.S. Hey Joni, unusual gravatar...

6. jonimueller
   Member
   Posted 4 years ago #

   Looks great on this old buggy version of IE6 here at the office! :)

7. raygene
   Member
   Posted 4 years ago #

   What? My site or your Gravatar? LOL! Kidding.

   Thanks for checking it out.
   Gene

8. RoseCitySister
   Member
   Posted 4 years ago #

   I use http://browsershots.org to check out my site in IE - they are a real timesaver!

9. raygene
   Member
   Posted 4 years ago #

   Thanks RoseCitySister, heck of a useful link!

   Cheers,
   Gene

Topic Closed

This topic has been closed to new replies.