Paithar
11-01-2006, 04: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?
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?