Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 451
  • Last Modified:

What's wrong with my code? DIV shits to the right when viewed in Internet Explorer 8 compatibility view.

Hi,

I'm using a DIV called 'container' as a holder so that pages always display centred in any browser.
I'm trying to include a nested DIV with a useful vertical scrolling marquee replacement script.
I'm happy that the script works under ie 8, firefox, opera and chrome. However in internet explorer 8 compatibility view, and presumably ie7 and ie6, the nested DIV shifts to the centre of the page.

It's supposed to be on the left.

I'm guessing this has something to do with the way I'm centreing my page?

Can anyone help fix this so it displays correctly (on the left) in older browsers and in ie8.

Thanks.

Code included - if you test it in ie8, switch between compatibility view to see what I mean.

<!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=utf-8" />
<title></title>

<STYLE type="text/css">

       html, BODY { background: black;
       text-align:center;
       padding:0;
       margin:0;
       height: 100%;
}
    </STYLE>
<style type="text/css">


#container
{
	position:relative;
	padding:0;
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: center;
	min-height: 100%;
	background: white;
} 

</STYLE>

<style type="text/css">
#marquee_replacement{
 border:1px solid #000;
 width:200px;
 height:150px;
 overflow:hidden;
}
#marquee_replacement p.spacer{
 height:150px;
}
</style>


<script type="text/javascript">
// <!--
var speed = 1; // change scroll speed with this value
/**
 * Initialize the marquee, and start the marquee by calling the marquee function.
 */
function init(){
  var el = document.getElementById("marquee_replacement");
  el.style.overflow = 'hidden';
  scrollFromBottom();
}
 
var go = 0;
var timeout = '';
/**
 * This is where the scroll action happens.
 * Recursive method until stopped.
 */
function scrollFromBottom(){
  clearTimeout(timeout);
  var el = document.getElementById("marquee_replacement");
  if(el.scrollTop >= el.scrollHeight-150){
    el.scrollTop = 0;
  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    timeout = setTimeout("scrollFromBottom()",50);
  };
}
 
/**
 * Set the stop variable to be true (will stop the marquee at the next pass).
 */
function stop(){
  go = 1;
}
 
/**
 * Set the stop variable to be false and call the marquee function.
 */
function startit(){
  go = 0;
  scrollFromBottom();
}
// -->
</script>




</head>



<BODY onload="startit()">

    
<div id="container">

<div id="marquee_replacement" onmouseout="startit();" onmouseover="stop();">
<p class="spacer"></p>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p class="spacer"></p>
</div>




</div>

</body>
</html>

Open in new window

0
rapidpictures
Asked:
rapidpictures
  • 2
1 Solution
 
AnimasuCommented:
Try centring it like this:

#container
{
      position:absolute;
      padding:0;
      left:-25em;
      margin-left: 50%;
      width: 50em;
      text-align: center;
      min-height: 100%;
      background: white;
}

It also works with position:relative i think...
Also each CSS element dosn't have to be in its own container. i.e: <style type="text/css"> </style>


Hope this helps

- Animasu
0
 
vimalrajaCommented:
Try changing "text-align:center" of the #container to "text:align:left;"...
#container
{
	position:relative;
	padding:0;
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: left;
	min-height: 100%;
	background: white;
}

Open in new window

0
 
rapidpicturesAuthor Commented:
Sorry that still shifts to the right.
I have fixed it using another div (called 'holdall') to nest the marquee script within (set absolute position).
<!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=utf-8" />
<title></title>

<STYLE type="text/css">

       html, BODY { background: black;
       text-align:center;
       padding:0;
       margin:0;
       height: 100%;
       overflow:auto;
}
    </STYLE>
<style type="text/css">


#container
{
	position:relative;
	padding:0;
	margin-left: auto;
	margin-right: auto;
	width: 50em;
	text-align: center;
	min-height: 100%;
	background: white;
} 

#holdall
{
	position:absolute;
	left: 0px;
	top: 0px;
}

</STYLE>

<style type="text/css">
#marquee_replacement{
 border:0px;
 width:200px;
 height:150px;
 overflow:hidden;
}
#marquee_replacement p.spacer{
 height:150px;
}
</style>


<script type="text/javascript">
// <!--
var speed = 1; // change scroll speed with this value
/**
 * Initialize the marquee, and start the marquee by calling the marquee function.
 */
function init(){
  var el = document.getElementById("marquee_replacement");
  el.style.overflow = 'hidden';
  scrollFromBottom();
}
 
var go = 0;
var timeout = '';
/**
 * This is where the scroll action happens.
 * Recursive method until stopped.
 */
function scrollFromBottom(){
  clearTimeout(timeout);
  var el = document.getElementById("marquee_replacement");
  if(el.scrollTop >= el.scrollHeight-150){
    el.scrollTop = 0;
  };
  el.scrollTop = el.scrollTop + speed;
  if(go == 0){
    timeout = setTimeout("scrollFromBottom()",50);
  };
}
 
/**
 * Set the stop variable to be true (will stop the marquee at the next pass).
 */
function stop(){
  go = 1;
}
 
/**
 * Set the stop variable to be false and call the marquee function.
 */
function startit(){
  go = 0;
  scrollFromBottom();
}
// -->
</script>




</head>



<BODY onload="startit()">

    
<div id="container">

<div id="holdall">

<div id="marquee_replacement" onmouseout="startit();" onmouseover="stop();">
<p class="spacer"></p>
<p>line 1</p>
<p>line 2</p>
<p>line 3</p>
<p>line 4</p>
<p class="spacer"></p>
</div>

</div>


</div>

</body>
</html>

Open in new window

0
 
AnimasuCommented:
Awesome, Glad you fixed it.

- Animasu
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now