Solved

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

Posted on 2010-09-03
4
423 Views
Last Modified: 2012-05-10
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
Comment
Question by:rapidpictures
  • 2
4 Comments
 
LVL 7

Expert Comment

by:Animasu
ID: 33596468
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
 
LVL 3

Expert Comment

by:vimalraja
ID: 33596617
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
 

Accepted Solution

by:
rapidpictures earned 0 total points
ID: 33596719
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
 
LVL 7

Expert Comment

by:Animasu
ID: 33596748
Awesome, Glad you fixed it.

- Animasu
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Today, still in the boom of Apple, PC's and products, nearly 50% of the computer users use Windows as graphical operating systems. If you are among those users who love windows, but are grappling to keep the system's hard drive optimized, then you s…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now