Support » Themes and Templates » I nedd a little help with my CSS

  • 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;
    	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;


Viewing 8 replies - 1 through 8 (of 8 total)
  • I suggest you zero out all the padding and margins on these:

    #searchform input

    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.

    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.

    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.

    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?


    P.S. Hey Joni, unusual gravatar…

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

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

    Thanks for checking it out.

    I use to check out my site in IE – they are a real timesaver!

    Thanks RoseCitySister, heck of a useful link!


Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘I nedd a little help with my CSS’ is closed to new replies.