internet explorer is the bane of my existance...

[Dan]

a lot of content just does not exist in ie.

floats and margins and clearing is so complicated it's making my head spin.

maybe someone could help me out here. site works for other browsers just fine.

daily2k.com/draft

Any help would be awesomely appreciated.

 

[Dan]

ok so my javascript is ruining my page layout for IE.

<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every x.xxx seconds
//setTimeout("slideit()",3000)
}
function forceslide(){
	clearTimeout("slideit()")
	slideit()
}
slideit()
</script>

any ideas??? without that script my page renders fine, but that script somehow loses my divs and footer... i don't get it.

 

[Dan]

aparently I needed to keep the script in the body AFTER all divs. It can't be right there next to the div that it pertains to or IE will throw a fit... what gives Microsoft?!?

 

[UndeadDragon]

aparently I needed to keep the script in the body AFTER all divs. It can't be right there next to the div that it pertains to or IE will throw a fit... what gives Microsoft?!?

I'm not sure why that is needed, but I have seen that in the past. Which Internet Explorer is it that you are having the most problem with? I know IE6 can be a real pain nowadays as it does not not follow any modern standards (I don't think it particularly did in the days it was released, either).

 

[Dan]

IE9... -_-

I wouldn't mind getting feedback on the website as I work on it. Any web developer tips would be appreciated too!

 

[Artificial]

If the script was above the image, the image did not yet exist when the script was run. If it was below it, it might not have been put into the document.images collection (I'm not sure the spesifications are quite clear about when it should be put there and even if they are IE probably doesn't care).

There are some things in the JavaScript you posted that I'd suggest changing.

1. eval("image"+step+".src")

   eval is quite useless. I have never seen a use case where it would be actually required, and it actually prevents the JS runtime from doing lots of optimizations that could be done.
   
   The way you're using it is a typical use case for arrays:
   

   var images = ['image1.png', 'image2.gif', 'image3.jpg'];
   var step = 0;
   ...
     document.images.slide.src = images[step];
     if (step < 2) {
       ...

2. if (!document.images)
   return
   document.images.slide.src = ...

   Instead of using document.images, you could use document.getElementById:
   

   document.getElementById('slide').src = images[step];

3. setTimeout("slideit()", 3000)

   Passing a string to setTimeout is pretty much the same as using eval. Instead, you should give it a function:
   

   setTimeout(slideit, 3000);

   Functions in JavaScript can be passed around, which is why that works. For example this would work as well:
   

   setTimeout(function () {
       alert('Hello, world!');
     }, 3000);

4. clearTimeout("slideit()")

   clearTimeout doesn't take a string, it takes a timer id returned by a call to setTimeout.
   

   var step = 0;
   var timer;
   ...
     timer = setTimeout(slideit, 3000);
   ...
     clearTimeout(timer);

5. And if you wanna get quite fancy (though not fancier than what is required for applications larger than this), you can avoid declaring global variables by wrapping it all inside a self-invoking function:
   

   (function () {
     var images = ['image1.png', 'image2.gif', 'image3.jpg'];
     ...
     slideit();
   }());

   Now the variables and functions defined are only visible inside the wrapping function instead of polluting the global namespace (the chances for some other script needing to use the name "step", for example, are pretty high).

All pieces put together: http://pastebin.com/CYivZjGd. But try putting them together yourself before checking the link.

 

[Dan]

I love you.

I was going to change them to an array once I figured out how to elegantly...

XD

how would you go about an array of divs by id or something so that you could specify a div to apply styles to slide buttons on click..

function dullbutton(a)
	{document.getElementById=eval('button'+a).style.background="#9AB5A1"}
  function brightbutton(a)
	{document.getElementById=eval('button'+a).style.background="#CF6"}

is what I have now... but again I'm just using a sloppy eval.

I already made forceSlide() have an argument (a) and now it will change the image appropriately when you click each slide button... but now I need to apply styling to those button divs.

would this work?

var buttons = [getElementById('button1'),getElementById('button2'),getElementById('button3')]

and then...

document.buttons[step].style.background="##9AB5A1"

 

[Dan]

This seemed to do the trick:

var images = ['images/genimage3.jpg', 'images/genimage2.jpg', 'images/genimage1.jpg'];
  var buttonid = ["button1","button2","button3",]
  var step = 0;
  var prevstep = 2;
  var timer;

  function slide() {
    document.getElementById('slide').src = images[step];
	document.getElementById(buttonid[prevstep]).style.background="#9AB5A1"
	document.getElementById(buttonid[step]).style.background="#CF6"
	prevstep=step;
    if (step < 2)
      step += 1;
    else
      step = 0;
	
    timer = setTimeout(slide, 3000);
  }

  function forceSlide(a) {
	step=a;
    clearTimeout(timer);
    slide();
  }

really seems funny to have to deal with strings at all. I keep wanting to just put the id in more concrete terms without the use of strings. thoughts?