SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Line in Scrolling tabs - Chrome

    Hello

    When i click in number 5 (for example) and click in arrow right appears this white line, why? (in FF work)



    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Extended jQuery UI Tabs - jsFiddle demo by mekwall</title>
      
      <script type='text/javascript' src='http://code.jquery.com/jquery-git.js'></script>
      <link rel="stylesheet" type="text/css" href="/css/normalize.css">
      
      
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
      
      
      <link rel="stylesheet" type="text/css" href="/css/result-light.css">
      
        
          <link rel="stylesheet" type="text/css" href="http://static-stage.maklarpaket.se/admin/css/jquery-ui-custom.css">
        
        
      
        
        
          <script type='text/javascript' src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
        
      
      <style type='text/css'>
        @import url(http://fonts.googleapis.com/css?family=Ubuntu:300);
    
    body, html {
        font-family: Calibri,Verdana,Arial,sans-serif;
        border: 0;
        margin: 0;
        padding: 0;
    }
    
    h1,
    h2,
    h3 {
        font-family: Ubuntu;
        line-height: 1.5;
        margin-bottom: .5em;
    }
    
    h1 {
        font-size: 2em;
    }
    
    h1.has-sub {
        margin-bottom: 0;
    }
    
    h2 {
        font-size: 1.3em;
    }
    
    ul {
        list-style: disc;
        margin-left: 1.5em;
        margin-top: .5em;
        margin-bottom: .5em;
        line-height: 1.4;
    }
    
    p {
        line-height: 1.4;
        margin-bottom: .5em;
    }
    
    header {
        background: rgb(76,76,76); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(76,76,76,1) 1%, rgba(63,63,63,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(76,76,76,1)), color-stop(100%,rgba(63,63,63,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* Opera11.10+ */
        background: -ms-linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* IE10+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#3f3f3f',GradientType=0 ); /* IE6-9 */
        background: linear-gradient(top, rgba(76,76,76,1) 1%,rgba(63,63,63,1) 100%); /* W3C */
        padding: .2em 1.2em;
        font-family: Ubuntu;
        font-size: 1.3em;
        color: #999;
        text-shadow: -1px -1px 0 #333;
        text-align: right;
        box-shadow: 0 0 50px 20px rgba(0,0,0,.1);
        border-bottom: 1px solid #fff;
    }
    
    header span {
        margin-left: .3em;
        font-size: .6em;
    }
    
    article {
        padding: 20px;
    }
    
    .columns {
        padding: 2em;
        -webkit-column-count: 3;
        -webkit-column-gap: 5em;
        -webkit-column-rule: 1px dashed #ccc;
        column-count: 2;
        column-rule: 1px dashed #ccc;
        border: 1px solid #ccc;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        border-radius: 10px;
        background-color: #f1f1f1;
    }
    
    .columns > h2 {
        -webkit-column-break-before: always;
    }
    
    #switcher {
        float:right;
    }
    
    .ui-widget {
        font-size: .8em !important;
    }
    
    .ui-tabs-nav {
        position:relative;
    }
    
    .ui-tabs .ui-tabs-nav-arrows {
        position:absolute;
        top:1px;
        right:1px;
        left:1px;
        margin:.1em;
        padding:0;
    }
    
    .ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-next {
        float:right;
    }
    
    .ui-tabs .ui-tabs-nav-arrows li {
        list-style:none;
        position:relative;
        cursor:pointer;
        z-index:1000;
        line-height:1;
        margin:0;
        padding:0;
    }
    
    .ui-tabs .ui-tabs-nav-arrows li a {
        display: block;
        padding: .7em .1em;
    }
    
    .ui-tabs .ui-tabs-nav-arrows .ui-tabs-arrow-previous {
        float:left;
    }
    
    .ui-tabs .ui-tabs-scroll-container {
        position:relative;
        height: 2.7em;
        overflow:hidden;
    }
    
    .ui-tabs .ui-tabs-nav-scrollable {
        position:absolute;
        left:0;
        right:0;
    }
    
    .ui-tabs .ui-tabs-nav-scrollable ul {
        position:relative;
        width:10000px;
    }
    #tabs {
    	width:500px;
    }
      </style>
      
    
    
    <script type='text/javascript'>//<![CDATA[ 
    (function($, undefined) {
        if (!$.xui) {
            $.xui = {};
        }
        var tabs = $.extend({}, $.ui.tabs.prototype),
            _super = {
                _create: tabs._create,
                _destroy: tabs._destroy,
                _update: tabs._update
            };
        $.xui.tabs = $.extend(tabs, {
            options: $.extend({}, tabs.options, {
                scrollable: false,
                changeOnScroll: false,
                closable: false,
                resizable: false,
                resizeHandles: "e,s,se"
            }),
            _create: function() {
                var self = this,
                    o = self.options;
                _super._create.apply(self);
                if (o.scrollable) {
                    self.element.addClass("ui-tabs-scrollable");
                    var scrollContainer = $('<div class="ui-tabs-scroll-container"></div>').prependTo(this.element);
                    self.header = $('<div class="ui-tabs-nav-scrollable ui-widget-header ui-corner-all"></div>').prependTo(scrollContainer);
                    var nav = self.element.find(".ui-tabs-nav:first").removeClass("ui-widget-header ui-corner-all").appendTo(this.header);
                    var arrowsNav = $('<ol class="ui-helper-reset ui-helper-clearfix ui-tabs-nav-arrows"></ol>').prependTo(self.element);
                    var navPrev = $('<li class="ui-tabs-arrow-previous ui-state-default ui-corner-bl ui-corner-tl" title="Previous"><a href="#"><span class="ui-icon ui-icon-carat-1-w">Previous tab</span></a></li>').prependTo(arrowsNav).hide(),
                        navNext = $('<li class="ui-tabs-arrow-next ui-state-default ui-corner-tr ui-corner-br" title="Next"><a href="#"><span class="ui-icon ui-icon-carat-1-e">Next tab</span></a></li>').appendTo(arrowsNav).hide();
                    var scrollTo = function(to, delay) {
                        var navWidth = 0,
                            arrowWidth = navPrev.outerWidth(),
                            marginLeft = -(parseInt(nav.css("marginLeft"), 10)),
                            hwidth = self.header.width(),
                            newMargin = 0;
                        
                        nav.find("li").each(function() {
                            navWidth += $(this).outerWidth(true);
                        });
                        
                        if (to instanceof $.Event) {
                            
                        } else {
                            newMargin = marginLeft+to;
                            if (newMargin > (navWidth-hwidth)) {
                                newMargin = (navWidth-hwidth);
                            } else if (newMargin < 0) {
                                newMargin = 0;
                            }
                            nav.stop(true).animate({
                                marginLeft: -(newMargin)
                            }, delay, function(){
                                $(window).trigger("resize.tabs");
                            });
                        }
                    }
                    var holdTimer = false;
                    navPrev.add(navNext).bind({
                        "click": function(e) {
                            var isNext = this === navNext[0];
                            e.preventDefault();
                            if (o.changeOnScroll) {
                                self.select(self.options.selected + (isNext ? 1 : -1));
                            } else {
                                if (!holdTimer)
                                    scrollTo(isNext ? 150 : -150, 250);
                            }
                        },
                        "mousedown": function(e){
                            if (!o.changeOnScroll) {
                                var isNext = this === navNext[0],
                                    duration = 10, pos = 15, timer;
                                if (holdTimer)
                                    clearTimeout(holdTimer);
                                holdTimer = setTimeout(timer = function(){
                                    scrollTo(isNext ? pos : -(pos), duration);
                                    holdTimer = setTimeout(arguments.callee, duration);
                                }, 150);
                            }
                        },
                        "mouseup mouseout": function(e){
                            if (!o.changeOnScroll) {
                                clearTimeout(holdTimer);
                                holdTimer = false;
                                nav.stop();
                            }
                        }
                    });
                    
                    self.header.bind('mousewheel', function(e, d, dX, dY) {
                        e.preventDefault();
                        if (d === -1) {
                            navNext.click();
                        } else if (d === 1) {
                            navPrev.click();
                        }
                    });
    
                    $(window).bind("resize.tabs", function(e) {
                        var navWidth = 0;
                        var arrowWidth = navPrev.outerWidth();
                        nav.find("li").each(function() {
                            navWidth += $(this).outerWidth(true);
                        });
                        
                        var marginLeft = -(parseInt(nav.css("marginLeft"), 10)),
                            hwidth = self.header.width();
                        
                        if (navWidth > (hwidth+marginLeft)) {
                            self.header.addClass("ui-tabs-arrow-r");
                            navNext.show("fade");
                            if (marginLeft > 0) {
                                self.header.addClass("ui-tabs-arrow-l");
                                navPrev.show("fade");
                            } else {
                                self.header.removeClass("ui-tabs-arrow-l");
                                navPrev.hide("fade");
                            }
                        } else {
                            self.header.removeClass("ui-tabs-arrows ui-tabs-arrow-l");
                            navNext.hide("fade");
                            if (marginLeft > 0) {
                                self.header.addClass("ui-tabs-arrow-l");
                                navPrev.show("fade");
                            } else {
                                self.header.removeClass("ui-tabs-arrow-l");
                                navPrev.hide("fade");
                            }
                        }
                    }).trigger("resize.tabs");
                    
                    arrowsNav.find("li").bind({
                        "mouseenter focus": function(e) {
                            $(this).addClass("ui-state-hover");
                        },
                        "mouseleave blur": function(e) {
                            $(this).removeClass("ui-state-hover");
                        }
                    });
    
                    this.anchors.bind("click.tabs", function(){
                        var li = $(this).parent(),
                            arrowWidth = navPrev.outerWidth(),
                            width = li.outerWidth(true),
                            hwidth = self.header.width(),
                            pos = li.position().left,
                            marginLeft = -(parseInt(nav.stop(true,true).css("marginLeft"),10)),
                            newMargin = -1;
    
                        if (li.index() === 0) {
                            newMargin = 0;
                        } else if ((pos+width) >= (hwidth+marginLeft)) {
                            newMargin = pos-hwidth+width;
                            if ((li.index()+1) < nav.find("li").length) {
                                newMargin += arrowWidth;
                            }
                        } else if (pos < marginLeft) {
                            newMargin = pos-arrowWidth;
                        }
                        
                        if (newMargin > -1) {
                            nav.animate({
                                marginLeft: -(newMargin)
                            }, 250, function(){
                                $(window).trigger("resize.tabs");
                            });
                        }
                    });
                }
                return self;
            },
            _update: function(){
                console.log(arguments);
                _super._update.apply(this);
            }
        });
        $.widget("xui.tabs", $.xui.tabs);
    })(jQuery);
    $(function() {
        $("#tabs").tabs({
            scrollable: true,
            changeOnScroll: false,
            closable: true
        });
        $("#switcher").themeswitcher();
    });
    //]]>  
    </script>
    <script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>
    
    </head>
    <body>
      
    <article>    
        <div id="switcher"></div>
        <br><br>
        <div id="tabs">
            <ul>
                <li><a href="#tabs-1">1</a></li>
                <li><a href="#tabs-2">2</a></li>
                <li><a href="#tabs-3">3</a></li>
                <li><a href="#tabs-4">4</a></li>
                <li><a href="#tabs-5">5</a></li>
                <li><a href="#tabs-6">6</a></li>
                <li><a href="#tabs-7">7</a></li>
                <li><a href="#tabs-8">8</a></li>
                <li><a href="#tabs-9">9</a></li>
                <li><a href="#tabs-10">10</a></li>
                <li><a href="#tabs-11">11</a></li>
                <li><a href="#tabs-12">12</a></li>
                <li><a href="#tabs-13">13</a></li>
                <li><a href="#tabs-14">14</a></li>
                <li><a href="#tabs-15">15</a></li>
                <li><a href="#tabs-16">16</a></li>
                <li><a href="#tabs-17">17</a></li>
                <li><a href="#tabs-18">18</a></li>
                <li><a href="#tabs-19">19</a></li>
                <li><a href="#tabs-20">20</a></li>
            </ul>
            <div id="tabs-1">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-2">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
            </div>
            <div id="tabs-3">
                <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
            </div>
            <div id="tabs-4">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-5">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
            </div>
            <div id="tabs-6">
                <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
            </div>
            <div id="tabs-7">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-8">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
            </div>
            <div id="tabs-9">
                <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
            </div>
            <div id="tabs-10">
                <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
            </div>
            <div id="tabs-11">
                <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
            </div>
            <div id="tabs-12">
                <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
            </div>
        </div>
    </article>
    <footer></footer>
    
      
    </body>
    
    
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,002
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I just ran your code and cannot reproduce your error.
    For me it's looking good in Chrome.

    I might add, that the following CSS files are failing to load, so maybe it has to do with that:

    Code:
    GET file:///C:/css/normalize.css  Unbenannt-3.html:8
    GET file:///C:/css/result-light.css  Unbenannt-3.html:11
    GET http://jqueryui.com/themeroller/themeswitchertool/ 410 (Gone) Unbenannt-3.html:11
    I also get the following JS errors, which might be worth looking into:

    Code:
    Refused to execute script from 'https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. Unbenannt-3.html:1
    Uncaught TypeError: Object [object Object] has no method 'themeswitcher' Unbenannt-3.html:369
    Uncaught TypeError: Cannot read property 'msie' of undefined jquery-ui.js:11187
    Could you post a link to a page where I can see this problem?

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2012
    Posts
    61
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved. Thanks! Problem with CSS.


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
  •