3251 posts Nice Guy
  • Forum Superstar
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
+6 more
RubenBristian 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>
100 posts
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 1-2 years
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Exclusive Author
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.

3251 posts Nice Guy
  • Forum Superstar
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
+6 more
RubenBristian 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..

100 posts
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 1-2 years
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Exclusive Author
withemes says

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

1402 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
OriginalEXE says
Maybe this is causing the error:
/\* there are no custom styes \*/
Shouldn’t it be like this:
/* there are no custom styes */
3251 posts Nice Guy
  • Forum Superstar
  • Most Wanted Bounty Winner
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Has been a member for 6-7 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Won a Competition
  • Bought between 100 and 499 items
  • Exclusive Author
+6 more
RubenBristian 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.

1402 posts
  • Has been a member for 2-3 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 10 and 49 items
  • Referred between 1 and 9 users
  • Croatia
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.

174 posts straight to the art designs
  • Elite Author
  • Sold between 250 000 and 1 000 000 dollars
  • Referred between 200 and 499 users
  • Bought between 100 and 499 items
  • Has been a member for 3-4 years
  • Exclusive Author
  • Author had a Free File of the Month
  • Microlancer Beta Tester
+4 more
arrowthemes says
:not is not supported in IE8 http://www.w3schools.com/cssref/sel_not.asp
100 posts
  • Sold between 50 000 and 100 000 dollars
  • Has been a member for 1-2 years
  • Referred between 10 and 49 users
  • Bought between 10 and 49 items
  • Exclusive Author
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.

1475 posts The right tools with none of the gimmicks
  • Sold between 50 000 and 100 000 dollars
  • Elite Author
  • Has been a member for 4-5 years
  • Referred between 50 and 99 users
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • United States
+1 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.

by
by
by
by
by
by