Solved

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

Posted on 2012-03-16
11
262 Views
Last Modified: 2012-03-16
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
Comment
Question by:hcp27
  • 5
  • 3
  • 3
11 Comments
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 37730085
Can you post the CSS file?
0
 

Author Comment

by:hcp27
ID: 37730197
@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
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 37730321
Try to change in "rightSidebar" and "rightSidebar div" left and right padding to 0;
0
 
LVL 30

Expert Comment

by:LZ1
ID: 37730334
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
 

Author Comment

by:hcp27
ID: 37730565
Changing the padding to 0px helps it a lot but still overlaps a little.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:hcp27
ID: 37730614
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37730624
The absolute positioning can be avoided by using floats and the article above.  Have you tested this in multiple resolutions/browsers?
0
 

Author Comment

by:hcp27
ID: 37730672
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
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 37730684
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
 

Author Comment

by:hcp27
ID: 37730693
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
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 37730710
In the "centerContent" increase the width as you want. May be you will need to increase the width in "content" also.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now