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 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post

    Alignment problems in IE8.

    I just created a website to demonstrate the school projects for our son: http://www.bhawkgames.com

    The site looks fine on our Windows 7 machine using FF 21 and IE10.

    When I display the site on our XP machine using FF20 and IE8, the framework overlay of the background image does not align. Here are the 50% images of the screens on XP:





    It probably has to do with the way the framework division is defined in the HTML and CSS files: here is the index page and the CSS file for the images shown above:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <!-- saved from url=(0014)about:internet -->
    <HTML LANG="en-US">
      
      <HEAD>
        <TITLE>Variable HTML: Rewriting the Book on Website Design</TITLE>
    <!--#extract virtual="styles.inc"-->
    
        <link media='screen' href='wd0.css' type='text/css' title="wd0" rel='alternate stylesheet' />    
        <link media='screen' href='wd1.css' type='text/css' title="wd1" rel='stylesheet' />    
        <link media='screen' href='wd2.css' type='text/css' title="wd2" rel='alternate stylesheet' />    
        
        <link media='screen' href='fs0.css' type='text/css' title="fs0" rel='alternate stylesheet' />    
        <link media='screen' href='fs1.css' type='text/css' title="fs1" rel='stylesheet' />    
        <link media='screen' href='fs2.css' type='text/css' title="fs2" rel='alternate stylesheet' />    
        <link media='screen' href='fs3.css' type='text/css' title="fs3" rel='alternate stylesheet' />    
    
        
        <link media="print" href="print.css" type="text/css" rel="stylesheet" />
    
        <script language="JavaScript" src="VariableControl.js" type="text/javascript"></script>
        <script language="JavaScript" src="VariableHTML.js" type="text/javascript"></script>
        <!--<script language="JavaScript" src="jsTrace.js" type="text/javascript"></script>-->
    <!--#extract end -->
        <script type="text/javascript"> showData = true; </script>
      </head>
    <!--#extract virtual="banner.inc"-->
      <body class=HM onload="VariableHTML();">
        <script type="text/javascript">
          VariableHTML();
        </script>
    		<div id="framework">
    			<div id=fwhead>
    				<div id=logo><img src="BHawkGamesLogoBG.jpg"></div>
    			</div>
    			<div id=fwnav>
    			<div class=pg1><img src=HomeButtonActive.gif height=90px width=180px></div>
    			<div class=pg2><a href="amc.htm"><img src=blank.gif height=90px width=180px></a></div>
    			<div class=pg3><a href="itc.htm"><img src=blank.gif height=90px width=180px></a></div>
    			<div class=pg4><a href="vs.htm"><img src=blank.gif height=90px width=180px></a></div>
    			<div class=pg5><a href="sa.htm"><img src=blank.gif height=90px width=180px></a></div>
    			<div class=pg6><a href="got.htm"><img src=blank.gif height=90px width=180px></a></div>
    			</div>
    			<div id=fwsize>
    
    				<div class=sztiny>
    					<img src=blank.gif height=145px width=180px border=2><br>
    							<font color=Yellow>Your browser window is too small to play any of
    							our games.  Small games are played at 800 by 600 and large games
    							are played at 1200 by 900.  Try hitting F11 to make your browser
    							full screen!</font>
    				</div>
    				<div class=szsmall>
    							<img src=blank.gif height=20px width=180px border=2><br>
    							<font color=Yellow><h2>The Games of Brian Hawkins</h2>
    							<p>This site was designed to allow you to experience games in both
    								a limited sized 800 by 600 format and also a full detail 1200 by
    								900 format.</p>
    							<p>Your browser window is <i class=widthOfPage>00</i>
    								pixels wide and <i class=depthOfPage>00</i> pixels deep.</p>
    							<p>Adjust your window size to fit the game detail you want.  If
    								necessary, use the F11 key to make your browser full size.</p></font>
    				</div>
    				<div class=szlarge>
    							<img src=blank.gif height=20px width=180px border=2><br>
    							<font color=Yellow><h1>The Games of Brian Hawkins</h1></font>
    							<p>This site was designed to allow you to experience games in both
    								a limited sized 800 by 600 format and also a full detail 1200 by
    								900 format.</p>
    							<p>Your browser window is <i class=widthOfPage>00</i>
    								pixels wide and <i class=depthOfPage>00</i> pixels deep.</p>
    							<p>Adjust your window size to fit the game detail you want.  If
    								necessary, use the F11 key to make your browser full size.</p></font>
    
    				</div>
    
    			</div>
    	</body>
    </html>
    Code:
    /* Import max1700.css */
    
    .sztiny { display:none; }
    .szlarge{ display:none; }
    .szsmall{ font-size: 20px;}
    
    body, html	{
    	margin:0;padding:0;   border:0;
    }
    
    h1, h2, p {text-align: center;}
    
    body.HM { background-color: #000000;    background-image: url(smallHome.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    body.AC { background-color: #000000;    background-image: url(smallAC.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    body.IC { background-color: #000000;    background-image: url(smallIC.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    body.VS { background-color: #000000;    background-image: url(smallVS.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    body.SA { background-color: #000000;    background-image: url(smallSA.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    body.GT { background-color: #000000;    background-image: url(smallGT.jpg);
    	background-repeat: no-repeat;			background-attachment: fixed;
    	background-position: top center; }
    
    
    #framework {
    	width: 800px;
    	min-height: 600px;
    	margin: 0 auto 0 auto; border:0; padding:0;
    	clear: both;
    	position: relative;
    }
    
    #fwhead     {
    	width: 600px;
    	min-height: 150px;
    	margin: 0; border:0; padding:0;
    	background-image: url(BHawkGamesLogoBG.jpg);
    	background-repeat: repeat-x;
    	float: right;
    }
    #logo {
    	width: 600px;
    	min-height: 150px;
    	margin: auto 0 auto 0; border:0; padding:0;
    	background-image: url(BHawkGamesLogo.jpg);
    	background-position:right;
    	background-repeat: no-repeat;
    }
    
    #fwnav       {
    	width: 200px;
    	min-height: 600px;
    	margin: 0; border:0; padding:0;
    	background-color: #49713C;
    	float: left;   display: table-cell;
    	vertical-align: middle;
    }
    
    	.pg1 {
    			display:block;	width:180px;	height:90px;
    			background:url('HomeButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg1:hover{
    			background:url('HomeButtonHover.gif');
    	}
    
    
    	.pg2 {
    			display:block;	width:180px;	height:90px;
    			background:url('AMCButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg2:hover{
    			background:url('AMCButtonHover.gif');
    	}
    
    	.pg2p {
    			display:inline-block;	width:180px;	height:90px;
    			background:url('AMCplay.gif');
    	}
    	.pg2p:hover{
    			background:url('AMCplayHover.gif');
    	}
    
    
    	.pg3 {
    			display:block;	width:180px;	height:90px;
    			background:url('ITCButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg3:hover{
    			background:url('ITCButtonHover.gif');
    	}
    
    	.pg3p {
    			display:inline-block;	width:180px;	height:90px;
    			background:url('AMCplay.gif');
    	}
    	.pg3p:hover{
    			background:url('AMCplayHover.gif');
    	}
    
    
    	.pg4 {
    			display:block;	width:180px;	height:90px;
    			background:url('VSButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg4:hover{
    			background:url('VSButtonHover.gif');
    	}
    
    	.pg4p {
    			display:inline-block;	width:180px;	height:90px;
    			background:url('AMCplay.gif');
    	}
    	.pg4p:hover{
    			background:url('AMCplayHover.gif');
    	}
    
    
    	.pg5 {
    			display:block;	width:180px;	height:90px;
    			background:url('SAButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg5:hover{
    			background:url('SAButtonHover.gif');
    	}
    
    	.pg5p {
    			display:inline-block;	width:180px;	height:90px;
    			background:url('AMCplay.gif');
    	}
    	.pg5p:hover{
    			background:url('AMCplayHover.gif');
    	}
    
    
    	.pg6 {
    			display:block;	width:180px;	height:90px;
    			background:url('GoTButtonNormal.gif');
    			margin-top: 8px;			margin-left: 10px;
    	}
    	.pg6:hover{
    			background:url('GoTButtonHover.gif');
    	}
    
    	.pg6p {
    			display:inline-block;	width:180px;	height:90px;
    			background:url('AMCplay.gif');
    	}
    	.pg6p:hover{
    			background:url('AMCplayHover.gif');
    	}
    
    	img { border-style:none;}
    
    
    #fwsize {
    	display: inline-block;
    	max-width: 570px;
    	min-width: 570px;
    	min-height: 420px;
    	margin: 15; border:0; padding:0;
    	float: right;
    }
    Any help on what is causing this would be appreciated.

  • #2
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    183
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,

    Your doctype is incomplete; what makes IE runing in Quirks mode. Complete it as followed:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    or use the simpler html5
    Code:
    <!DOCTYPE html>
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    Thanks candy girl, I'll give that a try tonight when i get home from this 9 to 5 thing i have to do every day!

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    Follow up: Candy Girl that does seem to be the right answer, but I have some custom JavaScript that determines the page size and use a different CSS file based on if the page will fit a 1200 by 900 game, an 800 by 600 game, or if the page is too small for any game display.

    Im fairly certain that your fix will work, but the fix also changes the DOM (Document Object Model), for the better! I have to re-work my JavaScript code to read the new DOM setting for page size.

    Andrew S. Tanenbaum said it best in Computer Networks, 2nd ed., p. 254 published in 1988, The nice thing about standards is that you have so many to choose from.


  •  

    Posting Permissions

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