3665 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

Hey everyone

I’ve searched a bit of this topic on Google, but all i get is about IE8 compatibility. I have a different issue. I have some styles inside a style element (head) and that code works in absolutely every browser except IE8. It’s really strange because the css code doesn’t have any error in it but it seems like it doesn’t get parsed or something.

The issue: I think that there are some problems with the formatting or the fact that the declarations are too long. If i put a simple declaration (body red background) it will work. But if i put my long lines they don’t.

The question: I cannot demonstrate the above, but it’s the only explanation i can think of. Has anyone encountered this before? Is it a real issue with IE8?

The site: http://testwp.tmpenco.nl/wordpress/ (blue in ALL vs orange in IE8)

The code:

<style id="colors" type="text/css">

            /* CUSTOM COLORS */

        i.i-medium,
            input[type="submit"]:hover,
            .no-touch .buttons a:hover,
            .no-touch .modern .post:not(.opened) > a:hover .pTitle:before,
            .no-touch .classic .pTitle:hover h2:before,
            .no-touch #comments-title:hover:after,
            .no-touch .rbAccordion.large h4:hover:before,
            .no-touch .rbPosts.classic header:hover a:before,
            .rbPricingTable .featured header,
            .no-touch .sectionTitle h3:hover i,
            .no-touch .rbTextIcon.large > a:hover > i,
            .no-touch .rbSocial.thumbnails ul li:hover,
            .no-touch .tagcloud > a:hover,
            .no-touch #footer1 input[type="submit"]:hover,
            .no-touch #footer1 .tagcloud > a:hover,
            .minimal-2 .tabs span,
            .no-touch .dark_menu #menu li ul li:hover > a, .no-touch #menu li > ul li:hover > a,
            .no-touch .complex .side .nav a:hover,
            .mejs-controls .mejs-time-rail .mejs-time-current,
            .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,
            .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current,
            .no-touch #searchform .holder:hover .icon-search,
            .no-touch .rbButton.dark:hover, .rbButton.light, .no-touch input[type="submit"]:hover,
            .product .button.add_to_cart, .cart-contents:hover:before, .widget_price_filter .price_slider_amount .button:hover, .woocommerce .buttons a:hover, .woocommerce-pagination li a:hover, .product_list_widget .imgCover, .single-product .cart .button:hover, .product-quantity .button:hover, .single-product .cart input:hover, .product-quantity input:hover, .shop_table .product-remove a:hover, .checkout-button.button, .woocommerce button.button:hover, ul.products li .button:hover {
                background-color:#0eaee6;
            }

    .no-touch a:hover, .no-touch #menu a:hover,
            .no-touch #pageTitle a:hover,
            .no-touch.csstransitions .tone #items a:hover h3, .tone #items a.iehover h3,
            .no-touch .modern .post:not(.opened) > a:hover .pTitle,
            .no-touch .morePosts:not(.nomore):hover span,
            .no-touch .morePosts:not(.nomore):hover span:before,
            .no-touch .classic .pTitle h2:hover,
            .no-touch .classic .meta a:hover,
            .no-touch #comments-title:hover,
            .no-touch #comments-title:hover:before,
            .no-touch .comment-reply-link:hover:before,
            .await,
            #comment-status p,
            .no-touch .rbAccordion.small > section h4:hover, .no-touch .rbAccordion.small > section h4:hover:before,
            .no-touch .rbAccordion.large h4:hover,
            .no-touch .rbContactInfo ul li a:hover:before,
            .no-touch .rbContactInfo ul li a:hover,
            .errorMessage,
            .no-touch .rbCustomPosts a:hover h4,
            .no-touch .rbCustomPosts a:hover .comments i:before,
            .no-touch .rbPosts.classic header:hover h3,
            .no-touch .sectionTitle h3:hover,
            .no-touch .rbTextIcon > a:hover > h4,
            .no-touch .rbTextIcon.minimal > a:hover > i,
            .no-touch .list1:hover, .no-touch .list2:hover, .no-touch .list3:hover, .no-touch .list4:hover,
            .no-touch .rbTwitter li a:hover, .no-touch .rbTwitter .time:hover, .no-touch .rbTwitter > a:hover span,
            .no-touch .rbSocial.list li:hover:before, .no-touch .rbSocial.list li:hover a,
            .no-touch .rbSocial.icons li:hover:before,
            .no-touch .rbTabs .titles li a:hover,
            .no-touch .widget.email a:hover i, .no-touch .widget.phone a:hover i,
            .no-touch .widget_meta ul li a:hover:before, .no-touch .widget_meta ul li a:hover,
            .no-touch .widget_pages ul li a:hover, .no-touch .widget_categories ul li a:hover, .no-touch .widget_archive ul li a:hover, .no-touch .widget_recent_entries ul li a:hover, .no-touch .widget_recent_comments ul li a:hover, .no-touch .widget_rss ul li a:hover, #breadcrumb a:hover, #breadcrumb .icon-home:hover, .no-touch #menu > ul > li:hover > a, .no-touch .rbButton.light:hover, .woocommerce-pagination .next:hover, .woocommerce-pagination .prev:hover, p.out-of-stock {
                color:#0eaee6;
            }

            .ttwo #items .caption,
            .no-touch .anything.folio .arrow a:hover span,
            .minimal-1 .mainControls .m-timer,
            .no-touch .minimal-1 .mainControls .thumbNav li a:hover,
            .no-touch .minimal-1 .mainControls .arrow a:hover span,
            .no-touch .mejs-overlay:hover .mejs-overlay-button, .ch .hover, 
            .no-touch .fancybox-nav span:hover, .no-touch .fancybox-close:hover, .ch .hover, .onsale, .tp-bannertimer {
                background-color:#0eaee6;
                background-color:rgba(14,174,230,0.9);
            }

            .no-touch #menu > ul > li:hover > a,
            .no-touch.csstransitions .tone #items a:hover .caption, .tone #items a.iehover .caption,
            .no-touch .morePosts:not(.nomore):hover,
            .no-touch .morePosts:not(.nomore):hover span,
            .no-touch #comments-title:hover:after,
            .contactErrorBorder,
            .no-touch .sectionTitle h3:hover, .no-touch .rbTextIcon.large:hover, .rbTabs .titles li.opened a, .widget_nav_menu .current-menu-item, .ui-slider-horizontal .ui-slider-handle:hover {
                border-color:#0eaee6;
            }

            @media all and (max-width: 940px) {

                .no-touch #menu .responsive:hover {
                    background:#0eaee6;
                }
                #menu li a:hover {
                    color:#0eaee6 !important;
                }

            }            

            /* CUSTOM CSS */

            /\* there are no custom styes \*/
        </style>
102 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
+1 more
withemes says

In IE8:

Message: Syntax error Line: 591 Char: 1 Code: 0 URI: http://testwp.tmpenco.nl/wordpress/

I think there’s an issue here with your html tags. Check your html tags at brand logos.

3665 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

In IE8:

Message: Syntax error Line: 591 Char: 1 Code: 0 URI: http://testwp.tmpenco.nl/wordpress/

I think there’s an issue here with your html tags. Check your html tags at brand logos.

This shouldn’t have anything to do with css.. It’s a simple p weirdo left over by the wpautop function..

102 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
+1 more
withemes says

Incorrect HTML is a very common cause of CSS problems. Try to validate HTML first.

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says
Maybe this is causing the error:
/\* there are no custom styes \*/
Shouldn’t it be like this:
/* there are no custom styes */
3665 posts Ruben Bristian
  • Sells items exclusively on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $500,000+ on Envato Market
  • Has been part of the Envato Community for over 6 years
+10 more
KrownThemes says

Maybe this is causing the error:
/\* there are no custom styes \*/
Shouldn’t it be like this:
/* there are no custom styes */

No.. If i put just a bit of css at the top it works. It doesn’t work is the code is lenghty as it is.. Sorry withemes, but i assure you that this issue has nothing to do with html validation.

1506 posts
  • Has referred 1+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Made it to the Authors' Hall of Fame
+2 more
OriginalEXE says

Hmm maybe all those linebreaks are confusing the poor old IE 8. I don’t believe it’s the length that matters as we use quite lenghty lines in our themes.

Try stripping all unnecessary spaces and line brakes on css output.

191 posts straight to the art designs
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $250,000+ on Envato Market
  • Has collected 100+ items on Envato Market
  • Has referred 200+ members
+9 more
arrowthemes says
:not is not supported in IE8 http://www.w3schools.com/cssref/sel_not.asp
102 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 1 year
+1 more
withemes says


Maybe this is causing the error:
/\* there are no custom styes \*/
Shouldn’t it be like this:
/* there are no custom styes */
No.. If i put just a bit of css at the top it works. It doesn’t work is the code is lenghty as it is.. Sorry withemes, but i assure you that this issue has nothing to do with html validation.

Ok, this case HTML causes no prob. :)

I found that you have .no-touch #menu > ul > li:hover > a { color: orange (for short) } in your style.css, but in your inline style, it’s only .no-touch a:hover, .no-touch #menu a:hover { color: blue } (weaker than in your style.css)

When I change to .no-touch a:hover, .no-touch #menu a:hover { color: blue !important }, then the blue color works on IE. So I think the issue may be caused by css hierarchy in IE.

1479 posts The right tools with none of the gimmicks
  • Has referred 50+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+6 more
PixelBin says

:not is not supported in IE8 http://www.w3schools.com/cssref/sel_not.asp

This. And because :not is not supported, it’s ignoring that whole block of code.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by