WordPress.org

Ready to get started?Download WordPress

Forums

I nedd a little help with my CSS (9 posts)

  1. raygene
    Member
    Posted 6 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. Joni
    Member
    Posted 6 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 6 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 6 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 6 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. Joni
    Member
    Posted 6 years ago #

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

  7. raygene
    Member
    Posted 6 years ago #

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

    Thanks for checking it out.
    Gene

  8. RoseCitySister
    Member
    Posted 6 years ago #

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

  9. raygene
    Member
    Posted 6 years ago #

    Thanks RoseCitySister, heck of a useful link!

    Cheers,
    Gene

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.