Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Why is my layout shifting a few pixels on certain pages?

Posted on 2009-02-18
3
Medium Priority
?
327 Views
Last Modified: 2012-05-06
I have a site in development here: http://www.kellercrescentdigital.com/lmh

For some reason, certain pages will shift to the left 2-3 pixels...enough to be noticeable.

For example, if you go to the ABOUT tab and select ABOUT US the site shifts to the left...select CEO MESSAGE and it shifts back.

It does this throughout the site. Some pages shift...others don't. How can I lock it in place?
input[type=text] {font-size: 11px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
 
input.submit {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:10px; background-color:#336699; color:#ffffff; font-weight:bold; border: 2px solid; border-color:#003333;}
 
input.submit:hover {text-transform:uppercase; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; font-size:10px; background-color:#488AA0; color:#ffffff; font-weight:bold; border: 2px solid; border-color:#333333;}
 
.flat {font-size: 11px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; padding-left: 5px;}
 
#baby_frame {
      position:relative;
      width: 500px;
      height: 600px;
      z-index: 10;
      border: 2px solid black;
}
#baby_frame .imageFrame {
      position:absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 30;
}
#baby_pic {
      position:absolute;
      top: 120px;
      left: 50px;
      z-index: 10;
}
#baby_name {
      position: absolute;
      top: 3px;
      left: 20px;
      width: 350px;
      z-index: 50;
}
.bdetail th {
    font-size: 12px;
    color: #000;
    text-align: right;
    font-weight: bold;
} 
.babydetails {
      position: absolute;
      top: 410px;
      left: 195px;
      width: 255px;
      z-index: 60;
}
.babyh3 {
      color: #000;
      font-size: 27px;
      /* margin-top: -5px;
      margin-bottom: 5px; */
}
.babyh4 {
    color: #000;
    font-size: 17px;
 
    /* margin: 1.33em 0 0;
    padding-top: 15px; */
}
img.dogear {
    position: relative;
    top: -13px;
    right: -13px;
    float: right;
}
 
table.baby {width:100%; border-collapse: collapse; border-spacing:0; border-color: #000000; border-width: 1px; border-style: solid;}
table.baby th {white-space: nowrap; text-transform: uppercase; text-align: center; background:#336699; padding:4px; font-size: 9px; font-weight: bold; color: #ffffff; border-color: #2F8A53; border-width: 1px; border-style: solid; padding: 4px;}
table.baby td {font-size: 90%; font-weight: normal; color: #000000; border-color: #2F8A53; border-width: 1px; border-style: solid; padding: 4px; }
 
div.contentbox {
    float: left;
    background: #F7F7F7;
    border: 1px dotted #ccc;
    padding: 12px;
    width: 712px;
    margin-top: 20px;
}
select {font-size: 11px; color: #336699; border: #336699 1px solid; font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; background: #ffffff; }
 
#searchbox {
 position: absolute;
 top: 6px;
 left: 260px;
}
input.searchme {
    font-size: 13px;
    height: 18px; 
    color: #336699; 
    border: #336699 1px solid; 
    font-family:Tahoma, Arial, Helvetica, Geneva, sans-serif; 
    background: #ffffff url(../images/searchme.gif) no-repeat left center; 
    padding-left: 25px;
    margin-top: 2px;
}
.gn_header_1 {
 color: #336699;
}
#latestnews {
  float: left;
  width: 200px;
  height: 225px;
}
#latestevents {
  float: right;
  width: 200px;
  height: 225px;
  padding: 5px;
  color: #336699;
  font-weight: bold;
}
.contentheading {
  color: #336699;
  font-size: 20px;
  font-weight: bold;
}
.componentheading {
  color: #336699;
  font-size: 20px;
  font-weight: bold;
}
img, div { 
      behavior: url(/lmh/templates/LogansPort_Memorial_Hospital/iepngfix.htc) 
}
 
h1 {
      color: #4a6171;
      font-size: 20px;
   }
#wrapper {
	width: 780px;
	margin: 0 auto; /* centering the page */
	text-align: left;
	}
#container {
      background: #fff;
      height: 100%;
      float: left;
      width: 100%;
}
#header {
      background: #fff;
	height: 34px;
	margin: 0 auto; /* centering the page */
	padding: 0; 
	}
#left {
      background: #fff;
	float: left;
	width: 200px;
      background: #fff url(../images/left_bg.png) repeat-x top;
      margin: 5px;
      padding: 10px;
      height: 100%;
	}
#content {
      background: #fff;
	float:left;
      padding: 20px;
      height: 100%;
      min-height: 400px;
	}
#footer {
     clear: both;
     background: url(../images/bg_footer.png) no-repeat top;
     color: #024886;
     font-size: 10px;
     height: 25px;
     width: 780px;
}
#footleft {
     width: 300px;
     float: left;
     padding: 10px;
}
#footright a {
     color: #024886;
     width: auto;
     float:right;
     padding: 10px;
     text-decoration: none;
}
 
#logo {
      display: block;
	background: url(../images/lmhlogo.png) no-repeat;
	height: 135px;
	width: 265px;
}
#icons {
      position: relative;
      display: block;
	background: url(../images/icon_bar_06.gif) repeat-x;
	height: 37px;
	width: 440px;
      float: right;
     
}
#splash {
      text-align: center;
      margin: 5px;
}
 
.tile {
	float: left;
	width: 106px;
      height: 225px;
      margin: 5px;
}

Open in new window

0
Comment
Question by:Donnie Walker
3 Comments
 
LVL 18

Accepted Solution

by:
Hube02 earned 2000 total points
ID: 23674903
The reason is simply because the about us page is longer than the home page and this causes the right hand (up/down) scroll bar to appear. This changes the window width and the page moves to the left to maintain its center.
0
 
LVL 9

Expert Comment

by:knonie
ID: 23674932
In browsers like Firefox and Chrome, that doesn't show a scrollbar on right side if page has less height, when you visit a page that requires a scrollbar, you notice the page shift...

If you search this site, you'll find detailed response to this question.

It's just normal behavior, and there's nothing to do with your html or CSS.

:-)
0
 

Author Closing Comment

by:Donnie Walker
ID: 31548472
thanks
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses
Course of the Month14 days, 13 hours left to enroll

577 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