Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 296
  • 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 MerghaniCommented:
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 MerghaniCommented:
Try to change in "rightSidebar" and "rightSidebar div" left and right padding to 0;
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 MerghaniCommented:
In the "centerContent" increase the width as you want. May be you will need to increase the width in "content" also.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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