Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 302
  • Last Modified:

WEBPAGE CONTENT ON RIGHT SIDE OVERLAPS WITH CENTER CONTENT ON ALL BROWSERS

I am looking over a webpage for a family member that I did not design. Attached is a screen shot of the content on the right side of the webpage shifting over the center content. It wasn't very bad on IE but it's really overlapped on all other browsers, specifically Firefox. I made a slight adjustment to the sites IE siteStyle CSS sheet and it fixed the minor shift for IE. I cannot do the same adjustment on the main siteStyle.css sheet cause it will also effect the rest of the website. The page on the screenshot is the only one that has this problem. I do not really know enough about CSS to fix this problem.
Capture.JPG
0
hcp27
Asked:
hcp27
  • 5
  • 3
  • 3
1 Solution
 
Ahmed MerghaniSoftware EngineerCommented:
Can you post the CSS file?
0
 
hcp27Author Commented:
@charset "utf-8";
/* CSS Document */

body{
      margin-top:0px;
      background-color:#999999;
      color:#000000;
      font-family:Helvetica, Arial, sans-serif;
      font-size:12px;
      margin:0px;
      padding:0px;
      height:100%:
}

h1{
      font-size:18px;
      margin-top:0px;
}

h2{
      font-size:14px;
      margin-top:0px;
}

p{
      font-size:12px;
      margin-bottom:0px;
      padding-bottom:0px;
}

a{
      color:#3361af;
      text-decoration:none;
}
a:hover{
      color:#003366;
}

a img{
      border:none;
}

#wrapper{
      margin-top:0px;
      min-width:1000px;
      max-width:1250px;
      position:absolute;
      left:50%;
      margin-left:-500px;
      min-height:600px;
      background-repeat:no-repeat;
      background-color:#FFF;
}

#staticBG{
      width:100%;
      height:100%;
      position:fixed;
}

#header{
      height:100px;
      margin-left:200px;
}

#header1{

}

#leftSidebar{
      float:left;      
      width:170px;
      margin-right:10px;
      margin-top:15px;
      padding:10px;
      /*border: thin solid #3361af;*/
}

#centerContent{
      width:598px;
      float:left;
}

#rightSidebar{
      position:absolute;
      right:0px;
      top:118px;
      width:170px;
      padding:10px;
      /*border: thin solid #3361af;*/
      text-align:right;

}

#rightSidebar div{
      background-color:#668CAB;
      padding:10px 0px;
      margin-top:10px;
      width:170px;
      text-align:center;
      
}

#headerlogo{
      margin-top:-100px;      
}

#rightSidebar a{
      color:#FFF;      
}

#rightSidebar a:hover{
      color:#FF0;      
}

.sidebar img{
      width:170px;
      margin-top:10px;
}


#nav{
      width:573px;
      padding:5px 10px 5px 10px;
      margin-top:15px;
      clear:both;
      font-size:12px;
      color:#FFF;
      background-color:#003366;
}

#nav a{
      color:#FFF;      
}

#nav a:hover{
      color:#999;      
}

#nav ul{
      padding:0px;
      margin:0px;
}

#nav ul li{
      display:inline;
      clear:none;
      padding:0px;
      margin:none;
      margin-right:70px;
}


.content{
      width:573px;
      padding:10px;
      margin-top:30px;
      clear:both;
      display:block;
/*border:thin #3361af solid;*/}

.mapBox{
      padding:10px 0px;
      border:thin #3361af solid;
}

#footer{
      font-size:10px;
      width:573px;
      margin-top:30px;
      padding:3px 10px;
      bottom:0px;
      clear:both;
      display:block;
      text-align:center;
      border-top: thick solid #003366;
}

#footerSpacer{
      height:50px;
      clear:both;
}


/**
 *Misc Coloring and modifications
 */
.selectedLink{
      color:#6699FF;
}

.inlineLink{
      color:#3361af;
      text-decoration:underline;
}
.inlineLink a{
      color:#3361af;
      text-decoration:underline;
}
.inlineLink a:hover{
      color:#003366;
      text-decoration:underline;
}

.quote{
      margin-top:10px;
      color:#000099;
      float:right;
      font-size:10px;
}

/**
 *Layout Formatting classes
 */

.clearDiv{
      clear:both;
      display:block;
}

.floatRight{
      float:right;
}

.floatLeft{
      float:left;
}

.horizontalUL{
      margin-left:0px;
      padding-left:0px;
}

.horizontalUL li{
      display:inline;
      list-style:none;
      margin-left:15px;
}


/**
 *Forms
 */
 
#contactForm{
      text-align:right;
      margin:0px 20px 10px 0px;
}

#contactForm input, select{
      margin-bottom:10px;
}


/**
 * PAGE SPECIFIC STYLES
 */

.langList{
      width: 30%;
      padding:10px;
      padding-left:0px;
      float:left;
}

.languageLetterSection{
      font-size:14px;
      color:#990000;      
      font-weight:bold;
}
0
 
Ahmed MerghaniSoftware EngineerCommented:
Try to change in "rightSidebar" and "rightSidebar div" left and right padding to 0;
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
LZ1Commented:
This is because you have the right sidebar positioned absolute.  Your #wrapper can't hold things that are positioned like that.  I would recommend using CSS faux columns found here:

http://www.code-sucks.com/css%20layouts/faux-css-layouts/
0
 
hcp27Author Commented:
Changing the padding to 0px helps it a lot but still overlaps a little.
0
 
hcp27Author Commented:
I adjusted the ridesidebar padding to -18px and it's positioned right where it needs to be. Now I need the wrapper to be a little bigger to extend the white background so the rightsidebar is placed on it. I placed a screenshot of it now.
Capture.JPG
0
 
LZ1Commented:
The absolute positioning can be avoided by using floats and the article above.  Have you tested this in multiple resolutions/browsers?
0
 
hcp27Author Commented:
At this time I cant use the faux option. I have tested this on firefox,chrome and safari and they all show the exact same problem. I was able to fix it in IE by removing the padding and changing it to 0px on the IE styeSheet. For all the other browsers, right sidebar was changed   to -18px on the main stylesheet. Now I need to know how to make the wrapper a little wider so everything fits again. I know this isn't the best fix but this is what is being requested by the site owner.
0
 
LZ1Commented:
Are you using a CSS reset at all? I don't think you are by the looks of it.  All of these issues/problems could be fixed just by using standards.  

On the #wrapper you have a min-width and a max-width.  Change those values accordingly until you get the result you need
0
 
hcp27Author Commented:
Thank you, i'll start with that and see how that works. I didn't make this site and have never looked at the sites sytlesheets and CSS until today.
0
 
Ahmed MerghaniSoftware EngineerCommented:
In the "centerContent" increase the width as you want. May be you will need to increase the width in "content" also.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

  • 5
  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now