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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2011
    Location
    Detroit
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer Newbie STUCK on compatibility problem

    I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.

    In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth).

    The obvious question: HOW DO I FIX IT?!!?

    Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33

    My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box).

    But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs.

    I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question.

    If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it.
    Last edited by grittykitty; 07-06-2011 at 12:11 AM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by grittykitty View Post
    .......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs.
    The most frequent cause is probably invalid html and/or css.

    If you put your web page's url through the w3c validator it currently spits out 25 errors and 5 warnings.

    You document is using html5 which is not yet officially released by the w3c and browser support for html5 currently varies between the browser manufacturers. The w3c validator for html5 is also not yet complete.

    Bottom line: if you want to minimise the risk of browser incompatability my suggestion is to write validated XHTML or HTML4 and CSS2 code until HTML5 is officially released.

  • #3
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    836
    Thanks
    172
    Thanked 90 Times in 90 Posts
    Hi

    error line 1 in

    menu/script.js


    Should only have javascript ---- yours seems to be full with HTML etc

    in fact it looks the same as your Index page

    LT
    Last edited by low tech; 07-06-2011 at 12:27 AM.

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by grittykitty View Post
    I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped.
    Maybe use this text rotation (with fade in/out) demo as a guide.

    The testimonials start rotating automatically 1 second after the page finished loading.

    You can add as many testimonials as you like to the html without having to touch the javascript.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
                #ssContainer div {
                    display: none;
                    filter:alpha(opacity=100);
                    opacity: 1;
                }
            </style>
            <script type="text/javascript">
                var curDiv = 0;
                var fadeTimer;
                var speed = 50;
                var opacStep = 0.5;
                var dirn = -1;
                var curOpac = 10;
                function fade(){
                    if(fadeTimer){clearInterval(fadeTimer);}
                    fadeTimer = setInterval(setOpacity,speed);
                }
                function setOpacity() {
                    curOpac = curOpac + (opacStep * dirn);
                    if(curOpac < 0){
                        swapDiv();
                        curOpac = 0;
                        dirn = 1;
                        fade();
                        return;
                    }
                    if(curOpac > 10){
                        curOpac = 10;
                        clearInterval(fadeTimer);
                        dirn = -1;
                        setTimeout(fade,1500);
                        return;
                    }
                    setOpacityCSS();
                }
                function swapDiv(){
                    for(i=0; i < oSsDivs.length; i++){
                        oSsDivs[i].style.display = 'none';
                    }
                    curDiv = (++curDiv > oSsDivs.length-1)? 0 : curDiv;
                    setOpacityCSS();
                    oSsDivs[curDiv].style.display = 'block';
                }
                function setOpacityCSS(){
                    if(typeof(oSsDivs[curDiv].style.opacity) == 'string'){
                        oSsDivs[curDiv].style.opacity = curOpac/10;
                    } else {
                        oSsDivs[curDiv].style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                window.onload=function(){
                    oSsDivs = document.getElementById('ssContainer').getElementsByTagName('div');
                    oSsDivs[curDiv].style.display = 'block';
                    setTimeout(fade,1000);
                }
            </script>
        </head>
        <body>
            <div id="ssContainer">
                <div>Testimonial 1</div>
                <div>Testimonial 2</div>
                <div>Testimonial 3</div>
                <div>Testimonial 4</div>
                <div>Testimonial 5</div>
            </div>
        </body>
    </html>

  • #5
    New Coder
    Join Date
    Jul 2011
    Location
    Detroit
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    low_tech, thanks for the heads up. Turns out that menu/script.js pointed to......... ??? (read: nothing, a 404 page). Looks like it was for an extended menu script I started a while back but lost the motivation to fix. ...heh.

    I did what I could to clear up the validation issues. There are two outstanding as I can't seem to figure out a way to remove the iframe border via CSS. Does anyone know if there is a way to remove iframe borders without specifying a border:0 in the target document (both targets point to other websites, one being Facebook).

    bullant, thanks for the help. I'll be trying that here shortly and reporting back as soon as I can.

  • #6
    New Coder
    Join Date
    Jul 2011
    Location
    Detroit
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    bullant, THANK YOU x(a million).

    Works great and was super easy. I really, really appreciate it.

    Hope you mates don't mind me asking a million questions... Is there a way to improve the text quality on IE8? It seems that the anti-aliasing on both text and images is removed when running through the script.

    Also, does this multitude of issues still apply in IE9? I am considering installing it but may hold off so I can ensure that issues are corrected for IE8 users (I'm assuming that the majority of users in the US are using IE8).
    Last edited by grittykitty; 07-06-2011 at 08:26 PM. Reason: When posting a reply...bullant's username is displayed as Sicilano??

  • #7
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Quote Originally Posted by grittykitty View Post
    bullant, THANK YOU x(a million).

    Works great and was super easy. I really, really appreciate it.

    Hope you mates don't mind me asking a million questions... Is there a way to improve the text quality on IE8? It seems that the anti-aliasing on both text and images is removed when running through the script.

    Also, does this multitude of issues still apply in IE9? I am considering installing it but may hold off so I can ensure that issues are corrected for IE8 users (I'm assuming that the majority of users in the US are using IE8).
    you're welcome

    Would really need to see your actual code in order to try to work out your image quality issue.

    Regarding "...this multitude of issues...", if you mean using html5 then probably yes but to a lesser extent because I believe IE9 is more html5 compliant than IE8.

    But as I mentioned earlier, html5 is not officially released by the w3c yet and browser support for it varies. Also, there is a good chance that the final released html5 will at least in parts be different to what it is today.

    Unless you must use html5 specific elements, my suggestion still is to use the Strict Doctype of either html or xhtml.

  • #8
    New Coder
    Join Date
    Jul 2011
    Location
    Detroit
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Well...the issue with setting things to strict or another doctype is that the validation practically crashes.

    When switching through the various HTML/XHTML types, I get 70-85 errors. Definitely enough to take me gasp a few times.

    Now, as far as the actual quality of the transition:

    Lansing Computer Repair - The right sidebar, underneath the "Testimonials" header.

    It's perfectly usable and since it's working just fine across all browsers, I'm willing to keep it as-is for now. I've been looking for something like this for quite some time now.

  • #9
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Well...the issue with setting things to strict or another doctype is that the validation practically crashes.

    When switching through the various HTML/XHTML types, I get 70-85 errors. Definitely enough to take me gasp a few times
    In your first post you said

    Quote Originally Posted by grittykitty View Post
    This cross browser INcompatability is giving me grey hairs.
    Unfortunately if you have invalid html, the probability of having browser incompatibility issues is increased significantly.

    If you change your doctype, like I suggested, you would also need to adjust the html to conform to that doctype.

    When your code passes the w3c validator, the chances of browser incompatibility are reduced significantly.
    Last edited by bullant; 07-07-2011 at 03:33 AM.


  •  

    Posting Permissions

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