Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2012-03-16
11
266 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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

808 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