Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post

    Strange left-shift problem only in IE6

    Ok I have a strange problem that appears only in IE6. Here is the link to the page...

    http://www.oasisgamingusa.com/testla...ex_layout8.php

    Here is the stylesheet...
    Code:
    /* 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?

  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    body {
    overflow:auto;
    }

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Remove this
    Code:
    	<!--[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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    New Coder
    Join Date
    Sep 2006
    Posts
    48
    Thanks
    0
    Thanked 1 Time in 1 Post
    _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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •