Please help, concerning background width

[snacky]

Hello, this is simple.

 

I use the DEFAULT, WHMCS Portal.

 

The problems occurs, as you can see the text between {} is displaying outside my "wrapper" styled background.

 

Here is the CSS wrapper code.

 

.wrapper {
   background-image: url(/images/body/layout_04.png);
   /background-repeat: repeat-y;
   /text-align: left;
   width: 914px;
   margin-top: auto;
   margin-right: auto;
   margin-bottom: auto;
   margin-left: auto;
}

 

Hope, can someone help.

 

Thank you!!

[DedicatedPros]

Here this should fix it (I also cleaned up your code ):

 

.wrapper {
   background-image: url(images/body/layout_04.png) repeat-y;
   text-align: left;
   width: 914px;
   margin: auto;
   padding: 0 30px;
}  

 

That will push the left and right side lines in by 30 pixels

[snacky]

doestn work, it now looks like this.

[sparky]

how about you post your url so that we can see whats happening from the page source instead of an image

[snacky]

http://desk.sk-servicios.com

[DedicatedPros]

Changing the margin would fix that, but as sparky said, please post your URL

 

Update: Change the width to 895px and let's see what happens then

[snacky]

edit: i changed from:

 

.wrapper {
background-image: url(http://www.sk-servicios.com/images/body/layout_04.png);
background-repeat:repeat-y;
width: 914px;
   padding: 0 30px;
   margin: auto;

}

 

to

 

.wrapper {
background-image: url(http://www.sk-servicios.com/images/body/layout_04.png);
background-repeat:repeat-y;
width: 914px;
   padding: 0 0px;
   margin: auto;

}

 

And its like before, i cannot still figure how to decease the width without moving that "white middle" background.

 

in this case:

 

http://www.sk-servicios.com/images/body/layout_04.png

 

Thanks you!

[DedicatedPros]

.wrapper {
   background-image: url(images/body/layout_04.png) repeat-y;
   width: 914px;
   margin: auto;
   padding-left: 30px;
}  

[snacky]

okey, now the background imagen doesnt shown, any ideas?

[DedicatedPros]

Ah sorry I did not notice your image was on the main domain, while the system is on a subdomain

 

That code did not help anyway, try this:

 

.wrapper {
   background-image: url(http://www.sk-servicios.com/images/body/layout_04.png) repeat-y;
   width: 895px;
   margin: auto;
}

 

Though not using relative URLs could cause issues when using SSL, let's worry about that later

Edited August 31, 2009 by DedicatedPros

[snacky]

No my friend, i did the change too..! also not working..

[snacky]

i figured

 

background-image: url(http://www.sk-servicios.com/images/body/layout_04.png); repeat-y;

 

but now the background showns, but no width modification have been done succeed.

 

THank you for help me

[sparky]

closest I could get it without spending too much time on it sorry.

Replace your entire style.css with this

#company_title{background-color:#00162C;color:#FFF;float:left;font-size:24px;line-height:20px;margin:0;padding:0;text-align:left;}
#content_container{background:#FFF url(images/content_container_bg.gif) repeat-y;border:3.5px solid #258;border-top:0px;color:#666;margin:20px auto 0;padding:0;text-align:left;width:901px;}
#content_left{background-color:#FFF;float:left;margin:0;padding:15px;text-align:left;width:620px;}
#side_menu{background-color:#EFF5FF;border-left:1px solid #CFE2FF;float:right;margin:0;padding:15px;text-align:left;width:219px;}
#side_menu ul{list-style:none;margin:0 0 10px;padding:0;}
#side_menu ul li{line-height:25px;margin:0;padding:0;}
#top{height:20px;margin:0 auto;padding:0;text-align:left;width:914px;}
#top_container{height:0px;margin:0;padding:0;text-align:center;}
#top_menu{background:#F5F5F5 url(images/top_menu_bg.gif) repeat-x;height:30px;line-height:30px;margin:0;padding:0;text-align:left;}
#top_menu ul{list-style:none;margin:0;padding:0;}
#top_menu ul li{float:left;margin:0;padding:0;}
#top_menu ul li a,#top_menu ul li a:visited{color:#666;display:block;height:30px;line-height:30px;padding:0;text-align:center;text-decoration:none;width:100px;}
#top_menu ul li a.down,#top_menu ul li a.down:visited,#top_menu ul li a.down:hover{background-color:#FFF;border-right:1px solid #EBEBEB;color:#333;font-weight:700;width:99px;}
#top_menu ul li a:hover{background-color:#EBEBEB;color:#333;}
#welcome_box{background-image: url(http://www.sk-servicios.com/images/body/layout_04.png);float:center;line-height:20px;margin:0;padding:0;text-align:center;}
#welcome_box a,#welcome_box a:visited{color:#accbff;text-decoration:none;}
#welcome_box a:hover{text-decoration:underline;}
.absmiddle{vertical-align:middle;}
.breadcrumb{background-color:red;margin:0 0 10px;padding:10px;}
.clear{clear:both;}
.green{color:#006F0F;}
.header{color:#1a4d80;font-size:14px;font-weight:700;}
.red{color:#BF0000;}
.small{font-size:11px;}
.warning{background-color:#FFFFDF;border:1px solid #FDFF3F;margin:0 0 10px;padding:10px;}
.contentbox{padding:10px;margin:0 0 10px;text-align:center;}
.errorbox{background-color:#FFBFBF;padding:10px;margin:0 0 10px;text-align:center;color:#7F0000;}
.clientareatableactive{background-color:#DFFFE0}
.clientareatablepending{background-color:#EFEFEF}
.clientareatablesuspended{background-color:#FFF6CF}
.clientareatableterminated{background-color:#FFCFCF}
.clientticketreplyheader{background-color:#EBEBEB;color:#333;border-top:1px solid #CCC;border-right:1px solid #CCC;border-bottom:1px solid #EBEBEB;
-left:1px solid #CCC;}
.clientticketreply{background-color:#F5F5F5;margin:0 0 10px;padding:10px;border-right:1px solid #CCC;border-bottom:1px solid #CCC;border-left:1px solid #CCC;}
.adminticketreplyheader{background-color:#CFE6FF;color:#333;border-top:1px solid #CAE6FF;border-right:1px solid #CAE6FF;border-bottom:1px solid #CAE6FF;border-left:1px solid #CAE6FF}
.adminticketreply{background-color:#EEF6FF;padding:10px;margin:0 0 10px;border-right:1px solid #CAE6FF;border-bottom:1px solid #CAE6FF;border-left:1px solid #CAE6FF;}
.networkissueaffected{background-color:#EFEFEF;padding:10px;margin: 0 0 10px;}
.textgreen{color:#158F00;}
.textred{color:#9F0000;}
a,a:visited{color:#333;text-decoration:underline;}
a:hover{color:#666;text-decoration:none;}
body{background-color:#369;background-image:url(http://www.sk-servicios.com/images/bg_01.png);background-repeat:repeat-x;margin:0;padding:0;}
body,td,th{color:#666;font-family:Tahoma, sans-serif;font-size:12px;}
form{margin:0;padding:0;}
h1{border-bottom:1px solid #EBEBEB;color:#1a4d80;font-size:24px;font-weight:400;margin:0 0 12px;padding:0 0 3px;}
h2{border-bottom:1px solid #F5F5F5;color:#333;font-size:18px;font-weight:400;margin:0 0 5px;padding:10px 0 3px;}
h3{color:#666;font-size:16px;font-weight:700;margin:0;padding:10px 0 5px;}
hr{background-color:#EBEBEB;border:0;border-top:1px solid #EBEBEB;height:0;margin:10px 0;overflow:hidden;}
input,select,textarea{color:#666;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-size:12px;margin:0;padding:2px;}
p{margin:0;padding:3px 0 8px;}
table.data{margin:0 0 10px;padding:0;}
table.data td{background-color:#FFF;border-bottom:1px solid #EBEBEB;}
table.data th{background-color:#888;border-bottom:1px solid #333;color:#FFF;font-weight:400;}
table.data tr.clientareatableactive td{background-color:#DFFFE0 !important;}
table.data tr.clientareatablepending td{background-color:#EFEFEF !important;}
table.data tr.clientareatablesuspended td{background-color:#FFF6CF !important;}
table.data tr.clientareatableterminated td{background-color:#FFCFCF !important;}
table.frame{margin:0 0 10px;padding:0;border:1px solid #EBEBEB;border-bottom:0;}
table.frame table td{background-color:#FFF;border-bottom:1px solid #EBEBEB;}
table.frame table td.fieldarea{background-color:#F5F5F5;color:#333;text-align:right;border-right:1px solid #EBEBEB;}

[snacky]

Okay, looks now.

 

At the left side of the box, it appears the background, BUT isnt display correctly, and i cannot get it work, and at the right side, the image simply doesnt shown in any way.

 

Thank you for the help.!