...

View Full Version : Strange left-shift problem only in IE6



Paithar
11-01-2006, 05:10 PM
Ok I have a strange problem that appears only in IE6. Here is the link to the page...

http://www.oasisgamingusa.com/testlayout/index_layout8.php

Here is the stylesheet...

/* Stylesheet for Oasis Gaming USA website */
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
font-size : 100%; /*Enable font resizing in IE*/
background-color: #f7f7f7;
color : #000000;
font-family : Verdana, Arial, sans-serif;
height: 100%;
}
body {
overflow: scroll;
}
html>body {
font-size: 9pt;
}
h1 {
font-size: 1.3em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
display: block;
}
p {
margin : 5px 10px 10px 10px;
padding : 5px;
display : block;
}
a:link, a:active, a:visited {
margin: 0;
padding: 0;
color: #15483a;
text-decoration: none;
}
a:hover {
text-decoration: underline;
font-weight: bold;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#menu li {
float: left;
position: relative;
border-left: 1px solid #d2bc2d;
}
#menu li ul {
display: none;
position: absolute;
top: 14px;
left: -1px;
}
#menu li:hover ul, li.over ul {
display: block;
background-color: #15483a;
}
#menu li ul li {
border-left: 1px solid #d2bc2d;
border-right: 1px solid #d2bc2d;
border-bottom: 1px solid #d2bc2d;
}
#menu a, #menu a:active, #menu a:visited {
width: 9em;
padding : 0 .5em;
color: #d2bc2d;
text-decoration : none;
font-weight: bold;
font-size: 1em;
display: block;
text-align: center;
}
#menu a:hover {
text-decoration : none;
background-color: #d2bc2d;
color: #15483a;
}
#page {
margin: 0 auto;
padding: 0;
width: 100%;
height: auto;
background: #f7f7f7 url(../images/bkgnd1.gif) center repeat-y;
position: relative;
}
#outer {
width: 800px;
margin: 0 auto;
}
#header {
margin: 0 auto;
padding: 0;
width: 100%;
height: 115px;
}
.right {
margin: 0 5px;
padding: 0;
float: right;
position: relative;
}
.left {
margin: 0 10px;
padding: 0;
float: left;
position: relative;
}
#menu {
margin: 0 auto;
padding: 3px 0;
height: 15px;
background-color: #15483a;
position: relative;
z-index: 1;
width: 800px;
}
#content {
margin: 0;
padding: 0;
width: 640px;
min-height: 100%;
float: left;
border-right: 1px dotted #000000;
background-color: #ffffff;
}
#content2 {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
background-color: #ffffff;
}
.article {
margin: 0 0 10px 0;
padding: 0;
position: relative;
display: block;
width: 100%;
}
.articleTitle {
margin: 10px;
padding: 0px 20px;
font-weight: bold;
text-align: left;
color: #15483a;
overflow: hidden;
letter-spacing: .5em;
text-transform: uppercase;
}
p.articlecontent {
margin: 10px;
padding: 0 20px;
font-size: 1em;
text-align: left;
line-height: 1.5em;
}
hr.titleline {
margin: 20px 30px;
padding: 0;
width: 740px;
}
hr.smalltitleline {
margin: 10px 30px;
padding: 0;
width: 330px;
}
img#cabinet {
margin: 0 5px;
padding: 0;
float: left;
position: relative;
}
#leftcol {
margin: 0;
padding: 0;
float: left;
width: 395px;
position: relative;
border-right: 1px dotted #000000;
}
#rightcol {
margin: 0;
padding: 0;
float: right;
width: 395px;
position: relative;
}
#rightside {
margin: 10px 0;
padding: 0;
width: 150px;
height: 100%;
float: right;
}
#divNewsCont {
position: relative;
width: 100%;
height: 80px;
visibility: hidden;
overflow: hidden;
background-color: #ffffff;
}
#divNews {
position: relative;
}
.contactform {
margin: 0 auto;
padding: 10px;
}
.rlabel {
color: red;
font-weight: bold;
}
.flabel {
font-weight: bold;
}
.field {
margin: 0;
padding: 0;
background-color: #e2dfd0;
}
#info {
position: relative;
width: 100%;
background-color: #ffffff;
}
#address {
margin: 0;
padding: 5px;
font-weight: bold;
font-size: 7.5pt;
}
#pnumbers {
margin: 0;
padding: 5px;
font-size: 7.5pt;
}
#footer {
width: 100%;
height: 26px;
margin: 10px 0 0 0;
padding: 0;
clear: both;
font-size: .8em;
background-color: #15483a;
/* background: #f7f7f7 url(../images/shadow3.jpg) center no-repeat; */
color: #d2bc2d;
position: relative;
bottom: 0;
left: 0;
}
.copyright {
margin: 0 0 0 5px;
padding: 0;
position: relative;
top: 5px;
}
ul#footnav {
margin: -5px 0 0 0;
padding: 0;
list-style: disc;
float: right;
}
ul#footnav li {
float: left;
position: relative;
width: 8em;
}
ul#footnav a, ul#footnav a:active, ul#footnav a:visited {
width: 8.5em;
padding : 0 0 0 .5em;
color: #d2bc2d;
}
ul#footnav a:hover {
text-decoration : none;
}
#ffscrollbarfix {
position: absolute;
top: 0;
bottom: -0.1px;
width: 1em;
z-index: -1;
}

The problem is that whenever you mouse over any link, be it menu item or a link in the content someplace, the whole layout shifts to the left. What's also kind of weird is that it stays shifted to the left and therefore if you keep mousing over links, it will eventually shift all the way to the left side of the browser window.

Once again, this only happens in IE6. I have Firefox 2.0, IE7 and Opera 9 installed on my pc and it's completely fine in all of those. Also, another coworker has an earlier version of firefox and he says it's fine in that one as well.

Anyone have any idea what's causing this little problem?

BonRouge
11-01-2006, 05:17 PM
body {
overflow:auto;
}

Paithar
11-01-2006, 05:29 PM
I tried overflow:auto in the body attribute of my stylesheet but it didn't appear to have any effect. I then decided to try overflow: hidden and that didn't fix the problem either.

Any other suggestions?

_Aerospace_Eng_
11-01-2006, 07:32 PM
Remove this

<!--[if lte IE 6]>
<style type="text/css">
/* #outer {
padding-left: 800px;
float: left;
}
#inner {
margin-left: -800px;
} */
#container {
position: relative;
width: 100%;
}
/* #content {
width: 640px;
height: 100%;
} */
/* #rightside {
width: 150px;
height: 100%;
} */
</style>
<![endif]-->
And remove your outer and inner divs. Then give a width of 800px to #page.

Paithar
11-01-2006, 08:03 PM
_Aerospace_Eng_, taking out those extra div's helped some but it was still shifting to the left. However, taking out those div's (which were actually left over from a previous layout I was trying) allowed me to see that in IE7 and IE6 there was an extra scroll bar displaying once again. I had this problem earlier and thought that I had fixed it. I went back into my code and looked and sure enough there was an attribute for the body tag in my style sheet that said overflow: scroll;. Once I took that out everything was fine once again.

Thanks for helping me on this. I really appreciate it.

I learn more and more every day it seems.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum