Elements don't line up

[ashwood]

my stylesheet is ok.. everything is in place.. then it will go out of place when you go on a page then you refresh a few times and it goes back in place :S i dont understand it..

edit:

my css is completely w3 validated with no errors

[Temor]

i dont understand

Me neither. Please give a more detailed explanation of what is happening.

[ashwood]

rite basically everything is inline like it should then ill go to say a profile page and everything goes out of line :S but if i refresh the page like 3 times it goes back inline..

[Temor]

rite basically everything is inline like it should then ill go to say a profile page and everything goes out of line :S but if i refresh the page like 3 times it goes back inline..

I believe that has something to do with the searchbar. It seems to be pushing your themepicker downwards.

Lets take a look at your css shall we?

[ashwood]

body { background: url('background.png'); z-index: 0; }
* { margin: 0px; }

a img {
 border: 0px;
}

.home_wrap {
 width: 1000px;
 margin-left: auto;
 margin-right: auto;
 background: #000000;
}
.home_main { padding-top: 3px; padding-right: 5px; padding-left: 5px; padding-bottom: 3px; }
.top_all { height: 45px; border-bottom: 2px solid #000000; }
.top_central {
 padding-right: 13px;
 padding-bottom: 5px;
 padding-top: 5px;
 width: 1000px;
 margin-left: auto;
 margin-right: auto;
}
#tc_left {
 float: left;
}
#tc_right {
 float: right;
}
.top_central a {
 float: left;
 padding-left: 10px;
}

.top_search {
 width: 900px;
 margin-left: auto;
 margin-right: auto;
}
.main_cotent {
}
.login_form {
  color: #000000;
  font-family: arial;
  background: url('all_bg.png');
  border: 2px solid #000000;
  width: 270px;
  padding: 8px;
  margin-left: auto;
  margin-right: auto;
}
#login_error {
 color: #cc0000;
 font-family: arial;
 font-weight: bold;
 font-size: 12px;
}
.login_box {
 border: 1px solid #faf04b;
}
.login_submit {
 border: 1px solid #faf04b;
 background: #000000;
 color: #faf04b;
 padding-top: 4px;
 padding-bottom: 4px;
 padding-left: 6px;
 padding-right: 6px;
 margin-top: 4px;
}
.login_process {
 background: url('all_bg.png');
 height: 95px;
 width: 400px;
 margin-left: auto;
 margin-right: auto;
 border: 2px solid #000000;
 font-family: arial;
 color: #000000;
}
.login_process a{
 text-decoration: none;
 color: #000000;
}


img a {
 border: 0px;
 text-decoration: none;
}
.footer_main {
 padding-left: 5px;
 padding-right: 5px;
 margin-top: 3px;
 font-family: arial;
}

.footer_main a {
 text-decoration: none;
}

#home_left {
 float: left;
}
#home_right {
 float: right;
}

#footer_left {
 float: left;
text-decoration: none;
}
#footer_right {
 float: right;
}

.index_search_b {
 border-top: 2px solid #000000;
 border-bottom: 2px solid #000000;
 border-left: 2px solid #000000;
 border-right: 2px solid #000000;
}

#index_search {
 border: 2px solid #000000;
}
.index_search_sub {
 border-top: 2px solid #000000;
 border-bottom: 2px solid #000000;
 border-right: 2px solid #000000;
 border-left: 2px solid #000000;
 background: #000000;
 color: #ffffff;
 padding-top: 1px;
}
#column_left {
 float: left;
 padding: 10px;
 color: #ffffff;
}
#main_right {
 float: right;
 color: #ffffff;
}
#music_link {
 width: 417px;
 font-size: 15px;
 font-family: arial;
}

#music_link a {
  width: 100%;
  display: block;
  color: #000000;
  background: #FFFFFF;
  text-decoration: none;
  padding: 3px;
}
#music_link a:hover {
  width: 100%;
  display: block;
  color: #000000;
  background: #faf04b;
  text-decoration: none;
  padding: 3px;
}
.page_title {
 padding: 5px;
 height: 25px;
 font-family: arial;
 width: 95%;
 margin-left: auto;
 margin-right: auto;
 background: url('background.png');
}

#float_left {
  float: left;
}

#float_right {
  float: right;
}

#page_left {
 float: left;
}

#page_right {
 float: right;
 width: 364px;
}

.page_title a {
 font-family: arial;
 width: 95%;
 margin-left: auto;
 margin-right: auto;
 color: #000000;
 text-decoration: none;
}
.music_out {
 padding-left: 5px;
 font-family: arial;
 width: 946px;
 padding-top: 10px;
 padding-bottom: 10px;
 padding-right: 5px;
 margin-left: auto;
 margin-right: auto;
 color: #000000;
 font-size: 13px;
 background: #ffffff;
 border-left: 2px solid #faf04b;
 border-right: 2px solid #faf04b;
 border-bottom: 2px solid #faf04b;
}
.music_out a{
 text-decoration: none;
}

.change_filter {
 padding: 5px;
 border: 2px solid #000000;
 background: url('all_bg.png');
 width: 350px;
 margin-left: auto;
 margin-right: auto;
}

/* skin changer */

#toggle {
 width: 100px;
 margin-left: auto;
 margin-right: auto;
}

#toggle a{
padding: 5px;
border-left: 2px solid #000000;
border-right: 2px solid #000000;
border-bottom: 2px solid #000000;
z-index: 1;
}

#style_blue {
 border: 2px solid #000000;
 width: 18px;
 background: #559ada;
 height: 18px;
 margin-right: 5px;
 float: left;
}

#style_yellow {
 border: 2px solid #000000;
 width: 18px;
 background: #faf04b;
 height: 18px;
 margin-right: 5px;
 float: left;
}

#style_pink {
 border: 2px solid #000000;
 width: 18px;
 background: #e672d7;
 height: 18px;
 margin-right: 5px;
 float: left;
}

#style_select {
 float: left;
 margin-right: 6px;
}

/* ADD TO OTHER STYLESHEETS */

#music_dropdown {
 width: 915px;
 margin-top: 5px;
 margin-left: auto;
 margin-right: auto;
 border: 2px solid #000000;
 background: #ffffff;
 padding: 10px;
}

#users_online {
 font-family: arial;
}

#users_online a {
 color: #000000;
}

#users_online a:hover {
 color: #666666;
}

#profile_left {
 float: left;
}

#profile_right {
 float: right;
 border: 2px solid #000000;
 width: 550px;
}

LOL there you go

[Temor]

try adding some space underneath the style-picker. Or above the " right " box.

[ashwood]

you mean like a <br /> or something?

[Temor]

No, like

margin-top:10px; OR margin-bottom: xx px;

[ashwood]

that will make the nav bar a bigger height which i dont want..

[Temor]

Alright. I'm not sure how to help you then. CSS isn't my strongest subject

[Tino]

No margins do not add to the height. Margins will only push elements away from eachother, basically.

You're confusing margins with padding, which does in fact add to the width/height of an element if applied.

[ashwood]

so if i do margin it should solve the problem?

[Tino]

Have you tried it?

[ashwood]

Have you tried it?

not yet.. trying to get my college work complete as im meant to finish today but due to doing what i love to do ive fell behind.

[Tino]

Well then first try it and report back here if it didn't work.