Search bar scrolling with page..

[i3lack]

So quick background I'm not a css fan.. I don't mind it and can do some things but when it comes to css it's my weakness... so I have come to (welovecss) for help..

I changed my css to add a different layout to my forum but I have two - three issues that I can't figure out..

First - my search bar seems to scroll with the page..
Second - My logo moves when you resize the browser
Third - The search box/bar moves when resizing the browser

My main concern is the search box scrolling and not staying in it's correct place.. but if we can figure out all three that would really be great. I have spent many many hours reading and trying to figure these issues out..

website: http://forums.metabans.com/

Here is the index.css code.. part of it..

}
.logo {
	  
	border: medium none;
	float: left;
	margin-left: 460px;
	margin-top: -20px;

}

#modnav { line-height: 30px; text-align: right; font-size: 12px;}
#modnav strong, #modnav a { margin-right: 8px; color: #959595;}
#modnav span { background: #21839c; padding: 2px 6px; font-weight: bold; color: #fff; border-radius: 3px;}
#modnav a:hover { text-decoration: none; color: #777;}
#modnav a:hover span { background: #25a0bb;}

#main { background: #8b8b8b ; padding-bottom: 50px; min-height: 826px;}
#header { height: 85px;}

#search { background: url(../images/custom/search.png) no-repeat; height: 30px; width: 204px;  margin-top: -14px;  
position:fixed;
right:450px;

}

#search:hover { background-position: 0 -40px; }

#search input.search_input { float: right; background: none; border: none; outline: none; width: 181px; height: 16px; padding: 7px 8px 7px 15px; font-size: 12px; font-family: "Trebuchet MS", "Arial", "Helvetica", sans-serif; color: #FFFFFF;  }

and this is the topbar code

#topbar {
	

	 background-image: url("http://metabans.com/images/h1_bg.png");
	 box-shadow: 0 3px 4px #000000;
	 left: 0;
	 margin: 0 auto;
	 padding: 0;
	position:absolute;
	 top: 0;
	 width: auto;
	 z-index: 100;}

If anyone needs the index.css file I can upload it somewhere or you can grab it from http://forums.metabans.com/index.css

[sahlahmin]

Remove left and top properties from #topbar & replace position:fixed with relative.
You'll also have to give #topbar a height now of about 45px;.
Change the position of #search to absolute.
That should do it for the search bar. Check out this article on positioning...

http://www.barelyfitz.com/screencast...s/positioning/

[i3lack]

Originally Posted by sahlahmin

Remove left and top properties from #topbar & replace position:fixed with relative.
You'll also have to give #topbar a height now of about 45px;.
Change the position of #search to absolute.
That should do it for the search bar. Check out this article on positioning...

http://www.barelyfitz.com/screencast...s/positioning/

Thanks for the reply I will be able to check the edits soon one on our server staff took down the site to stress test.

We reply back if it worked =)

[i3lack]

It worked perfect now I need to figure out the other issue.

Thanks for all the help!