SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow How do I make this HTML Code work in IE?

    Hello everyone,

    Here's my code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>SGA</title>
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="ipsum.js" type="text/javascript"></script>
    </head>
    <body style="background-color:#6699FF; text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif;" onload="browser();">
    
    <span id="browser" style="font-size:16px; border:1px solid #333333; width:70%; margin:0 auto; background-color:#33CC99; display:none;"></span>
    
    <div id="games" style="position:relative;display:none;margin:0 auto;">
    
    Flash content here...
    
    <br />
    
    <div style="background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
    background-repeat:no-repeat; margin:0 auto;" onclick="moveUp('games', 'sgamain');">
    <span style="position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">&gt;</span>
    <span style="position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">Back</span>
    </div>
    
    </div>
    
    <div id="more" style="position:relative;display:none;margin:0 auto;">
    
    &nbsp;
    
    <table style="margin:0 auto; margin-top:100px;" cellpadding="5" cellspacing="0">
    <tr>
    <td>buttons, spreading into different rows, until this button</td></tr><tr>
    <td>
    <div style="background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
    background-repeat:no-repeat; margin:0 auto;" onclick="moveUp('more', 'sgamain');">
    <span style="position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">&gt;</span>
    <span style="position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">Back</span>
    </div>
    </td>
    </tr>
    </table>
    
    </div>
    
    <div id="sgamain" style="position:relative;top:0px;margin:0 auto;">
    
    	&nbsp;
    	
    	Lorem ipsum dolor sit amet.
    	
    	<table style="margin:0 auto;" cellpadding="5" cellspacing="0">
    	<tr><!--more buttons--><td>
    	<div style="background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table; text-align:left;
    background-repeat:no-repeat;" onclick="moveUp('sgamain', 'games');">
    	<span style="position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">&gt;</span>
    	<span style="position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">Lorem Ipsum</span>
    	</div>
    	</td><td>
    <div style="background-image:url(btn/up.png); width:184px; height:51px; cursor:pointer; display:inline-table;
    text-align:left; background-repeat:no-repeat; margin:0 auto;" onclick="moveUp('sgamain', 'more')">
    <span style="position:relative; top:14px; left:160px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">&gt;</span>
    <span style="position:relative; top:14px; left:-5px; font-family:Rockwell; font-size:18px; color:#0066CC;" unselectable="on">Dolor Sit Amet</span>
    </div>
    </td><!--more buttons--></tr>
    	</table>
    
    </div>
    
    <div style="position:absolute; top:650px; width:100%; margin-left:0px; left:0px;">
    <div style="position:relative; margin:0 auto; text-align:center;">
    
    Lorem ipsum dolor sit amet ...
    
    <br /><br />
    </div>
    </div>
    </body>
    </html>
    And the script that goes with it:

    Code:
    function moveUp(id1, id2){
    
    	var obj1 = document.getElementById(id1);
    	var obj2 = document.getElementById(id2);
    	
    	var pixelsPerInterval = -25;
    	
    	var curTop = obj1.offsetTop;
    	var newTop = curTop + pixelsPerInterval;
    	var finalTop = (obj1.offsetHeight * -1) + (pixelsPerInterval * 2);
    	
    	obj1.style.top = newTop+"px";
    	
    	if(newTop > finalTop){	
    		setTimeout("moveUp('"+id1+"', '"+id2+"');", 50);
    	}else{
    		obj1.style.display = "none";
    		obj2.style.display = "block";
    		obj2.style.top = ((obj2.offsetHeight * -1) + (pixelsPerInterval * 2))+"px";
    		moveDown(id2);
    	}
    
    }
    
    function moveDown(id1){
    
    	var obj1 = document.getElementById(id1);
    	
    	var pixelsPerInterval = 25;
    	
    	var curTop = obj1.offsetTop;
    	var newTop = curTop + pixelsPerInterval;
    	var finalTop = 0;
    	
    	obj1.style.top = newTop+"px";
    	
    	if(newTop < finalTop){	
    		setTimeout("moveDown('"+id1+"');", 50);
    	}
    
    }
    function browser(){
    	if (navigator.appName == "Microsoft Internet Explorer"){
    		document.getElementById("browser").style.display = "block";
    		document.getElementById("browser").innerHTML = "You are using Internet Explorer.  This page is designed for Firefox, Safari, and other Gecko browsers.  Please switch to one of these browsers for ideal site operation.";
    	}
    }
    For reference, what one of my "buttons" that I refer to in my code looks like:

    HTML Code:
    <td>
    
    <div style="background-image:url(btn/up.png); width:184px; height:51px;
    cursor:pointer; display:inline-table; text-align:left; background-repeat:no-repeat;
    margin:0 auto;" onclick="document.location.href='dolorsitamet.html';">
    
    <span style="position:relative; top:14px; left:160px; font-family:Rockwell;
    font-size:18px; color:#0066CC;" unselectable="on">&gt;</span>
    
    <span style="position:relative; top:14px; left:-5px; font-family:Rockwell;
    font-size:18px; color:#0066CC;" unselectable="on">Dolor Sit Amet</span>
    
    </div>
    
    </td>
    If you want, you can copy the code into an html document with the script in <script> tags, and it should work (only in firefox, obviously)

    What the code does is that there are three "menus", which you can click buttons to get in between, and, using javascript, the current menu will slide up and out of the page and the new one will slide down. However, everything must be centered, so I have used a relatively positioned div with "margin:0 auto" within an absolutely positioned div.

    As you can see in my javascript code here, I currently have a message that is posted if someone is using Internet Explorer. That is because the buttons always seem to appear in the upper-left corner of the html instead of where they belong in the center, like firefox does. I would greatly appreciate anyone who could help me adapt this code to work with IE.

    Also, I would appreciate it if you wouldn't post anything that has to do with critiquing my code; I have my reasons for what I'm doing. All I would appreciate would be advice, mainly on centering the buttons in the page; that seems to be the only problem. Cheers!
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison

  2. #2
    SitePoint Addict jtrelfa's Avatar
    Join Date
    Oct 2004
    Location
    Troy, Mi
    Posts
    231
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I would appreciate it if you wouldn't post anything that has to do with critiquing my code; I have my reasons for what I'm doing
    You're asking for help with your code but you don't want anyone to critique it?

    I know you don't want to hear this...

    You're going to have a LOT easier time if you eliminate some of those inline styles and move them into a stylesheet - even if you just embed it within the page. After that, you can put the styles back inline if you want.


Bookmarks

Posting Permissions

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