Why does this happen?

[Farrhad A]

Hi,

My logo splits into two on certain resolutions.

I have attached a screenshot.

Many people are complaining of this.

How can I fix this? Please help.

Thanks!

www.webmasterpeers.com

[Attitude5ire]

Your header might be fixed where the top part of the logo is and centered but the part below might be fluid which expands with resolution.

[Farrhad A]

Your header might be fixed where the top part of the logo is and centered but the part below might be fluid which expands with resolution.

I am a real noob at coding please can someone tell me how to fix this.

[Lynne]

It's very hard to figure out something like that when there is no link to your site to see the actual code.

[Farrhad A]

I have linked to it in my opening post, guess you missed it since it is very near to the attachment.

[Lynne]

Ah yes. You can see it in firefox also if you expand your browser width and then collapse it. I think Attitude5ire is correct in that the positioning of the two is different which is why you see the offset.

[Farrhad A]

Ah yes. You can see it in firefox also if you expand your browser width and then collapse it. I think Attitude5ire is correct in that the positioning of the two is different which is why you see the offset.

Okay, but how do i fix it?

[Attitude5ire]

You need to either make the header fluid too so it doesnt just center or you need to fix the section below header. I took a peek at ur code and u need to ask ur webmaster to redo ur header and possibly navbar not sure, Simple way to float that logo without cutting 2 parts is just using transparent png and some absolute or relative positioning.

Cheers

[Farrhad A]

Imanaged to fix the logo but now the forum has got too wide. :(

/* *** required *** */
.nopad, .nopad * {
padding: 0;
margin: 0;
}
.clear { clear: both; }
.container {
margin: 0 auto;
width: 900px;
padding: 0px 100px 0px 100px;
}

/* *** header *** */
#header {
background: url(images/webmasterpeers/header/bg.gif) repeat-x top left #355052;
}
#header .container {
background: url(images/webmasterpeers/header/header.jpg) no-repeat top left;
width: 1100px;
position: relative;
height: 88px;
padding: 0px;
}

/* *** logo *** */
#header h1 {
height: 88px;
float: left;
margin-left: 75px;
width: 238px;
}
#header h1 a {
display: block;
height: 88px;
text-indent: -9999px;
outline: none;
}

/* *** nav *** */
#header ul {
background: #50959a;
border-top: 1px solid #314a4b;
position: absolute; bottom: 0; right: 100px;
width: 671px;
}
#header li {
display: inline;
list-style: none outside;
}
#header li a {
border-top: 1px solid #79c2c7;
border-left: 1px solid #386b73;
border-right: 1px solid #65b2b7;
color: #FFF;
font: bold 14px/40px arial;
display: block;
height: 40px;
float: left;
text-align: center;
}
#header li a:hover {
background: url(images/webmasterpeers/header/rollover.gif) repeat-x top left #c9d8e7;
border-right-color: #bbc8d4;
border-top-color: #b8c5d1;
color: #5c6875;
text-decoration: none;
}

#header li#nav1 a {
border-left: 0;
width: 67px;
}
#header li#nav2 a {
width: 80px;
}
#header li#nav3 a {
width: 108px;
}
#header li#nav4 a {
width: 55px;
}
#header li#nav5 a {
width: 63px;
}
#header li#nav6 a {
width: 71px;
}
#header li#nav7 a {
width: 57px;
}
#header li#nav8 a {
background: url(images/webmasterpeers/header/register_now.gif) no-repeat center center #3e747a;
width: 156px;
padding: 0;
border-right: 0;
text-indent: -9999px;
}
#header li#nav9 a {
width: 156px;
border-right: 0;
}

/* *** header lower *** */
#header_lower {
background: url(images/webmasterpeers/header/lower_bg.gif) repeat-x bottom left #ceddec;
border-bottom: 1px solid #ecf6ff;
min-height: 187px;
}
* html #header_lower {
height: 187px;
}
.logo {
background: url(images/webmasterpeers/header/logo_under.gif) no-repeat top center;
display: block;
float: left;
height: 60px;
width: 214px;
}

#member_box {
clear: left;
float: left;
margin-top: 11px;
width: 211px;
}
#member_box p { margin: 0; }
#member_box input { vertical-align: middle; }
#member_box div {
border-top: 1px solid #9facba;
border-left: 1px solid #acbac9;
border-right: 1px solid #acbac9;
border-bottom: 1px solid #b4c2d2;
font-size: 10px;
padding: 9px;
background: url(images/webmasterpeers/header/login_bg.gif) repeat-x top left #b8c7d7;
}
.loginput {
padding: 2px 8px;
width: 74px;
margin: 0 2px;
margin-bottom: 6px;
height: 14px;
font-size: 10px;
border: 0;
background: url(images/webmasterpeers/header/login_input.gif) no-repeat center right;
color: #5f666e;
}
.loginGo {
border: 0;
background: url(images/webmasterpeers/header/login_go.gif) no-repeat center center #5ca0a6;
width: 211px;
height: 36px;
}

#guest_message {
background: url(images/webmasterpeers/header/msg_top.gif) no-repeat top center #FFF;
float: right;
position: relative;
margin-top: 5px;
margin-right: -5px;
width: 681px;
}
#guest_message #inner {
background: url(images/webmasterpeers/header/msg_bottom.gif) no-repeat bottom center;
padding: 25px 20px;
}
#guest_message p {
color: #66857d;
margin: 0;
line-height: 150%;
}

#foursixeight {
float: right;
margin-bottom: 12px;
margin-top: 7px;
text-align: center;
width: 681px;
}

/* *** content *** */
#main_content {
border-top: 4px solid #ddeef6;
padding: 30px 0;
}

/* *** footer *** */
#footer {
background: url(images/webmasterpeers/footer/bg.gif) repeat-x top left #9ba4ae;
}
#footer .container {
background: url(images/webmasterpeers/footer/copyright.jpg) no-repeat top left;
width: 1100px;
padding-top: 85px;
padding-bottom: 20px;
}
#footer p {
color: #FFF;
margin: 0;
margin-left: 100px;
margin-bottom: 5px;
}
#footer p a { color: #26272a; font-weight: bold; }

/* *** misc *** */
.tcat_icon { margin-right: 6px; }
.count {
color: #2b4041;
font-weight: bold;
}

/* *** postbit *** */
.posttitle {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #afb2b7;
font-size: 13px;
color: #3e5a5d;
}
#postbit_top, #postbit_bottom {
display: block;
height: 4px;
width: 196px;
margin: 0 auto;
}
#postbit_top {
background: url(images/webmasterpeers/postbit/postbit_top.gif) no-repeat bottom center;
}
#postbit_bottom {
background: url(images/webmasterpeers/postbit/postbit_bottom.gif) no-repeat top center;
}
#postbit {
background: url(images/webmasterpeers/postbit/postbit.gif) no-repeat top center;
color: #f4f2f5;
width: 172px;
padding: 9px 12px;
text-align: center;
}
#postbit a {
color: #3d5b5d;
}
.userinfo {
border: 1px solid #36393e;
border-width: 0 1px;
text-align: left;
padding: 5px 8px;
margin-bottom: 6px;
background: url(images/webmasterpeers/postbit/userinfo.gif) repeat-x top left;
}
.post_top_cell {
background: url(images/webmasterpeers/postbit/gradient_top.gif) repeat-x top left #d7dce2;
}
.post_bottom_cell {
background: url(images/webmasterpeers/postbit/gradient_bottom.gif) repeat-x bottom left #d7dce2;
border-bottom: 1px solid #FFF;
}
.msg {
color: #3d4248;
line-height: 150%;
}