IE 10 ignoring CCS and changing div to table

[classic12]

I have simplified the web site to one page with a container and a table.

This is located at http://www.ukwindowanddoorstore.co.uk/test5

My css is :

    div.gradienttable {


    background-color: red;
    background-image: -moz-linear-gradient(blue, orange);
    background-image: -o-linear-gradient(blue, orange);
    background-image: -ms-linear-gradient(blue, orange);
    background-image: -webkit-linear-gradient(blue, orange);
    background-image: linear-gradient(blue, orange);



    }

    div.gradient {


    background-color: red;
    background-image: -moz-linear-gradient(red, orange);
    background-image: -o-linear-gradient(red, orange);
    background-image: -ms-linear-gradient(red, orange);
    background-image: -webkit-linear-gradient(red, orange);
    background-image: linear-gradient(red, orange);



    }

I am testing on a windows 7 PC with IE 11 and it shows okay.

When I emulate IE 10 the gradients don’t show and the HTML changes from:

IE 11

    <div class="WiziCore_UI_PanelContainerWidget ac-widget-item gradient ac-widget-overflow-border-radius" id="wmrp5s9b1q5rzkvhmmjpbtnarwx0ibalkow8" style="margin: 0px; border-radius: 0px; border: 1px gray; border-image: none; width: 78%; overflow: hidden; clear: left; float: none; display: block; position: relative; z-index: 1; -ms-overflow-x: hidden; -ms-overflow-y: auto; min-height: 216px; max-height: 250px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0);" data-ac-wname="PCRight"> <div class="WiziCore_UI_LabelWidget ac-widget-item" id="wo8p98t-9mowb7mjt6a1qwgrmxe22-fyfdub" style="font: 13px/normal Arial; width: 70px; clear: left; margin-left: 0px; float: none; display: block; position: relative; z-index: 2; min-height: 15px; min-width: 70px; box-sizing: border-box; font-size-adjust: none; font-stretch: normal;" data-ac-wname="label1"><a style="text-decoration: none;"><div style="width: 100%; height: 100%; text-align: left; color: rgb(66, 66, 66); overflow: hidden; -ms-text-overflow: ellipsis; min-height: 15px;">PC Right</div></a> </div></div>

IE 10

    <table class="ie-table WiziCore_UI_PanelContainerWidget" id="wpjpbyvccg31xnlq6u8lf61-2e5g25v-8fkk" style="margin: 0px; border-radius: 0px; border: 1px gray; width: 78%; overflow: hidden; clear: left; float: none; display: table; position: relative; z-index: 1; table-layout: fixed; min-height: 216px; max-height: 250px; box-sizing: border-box; background-color: rgba(0, 0, 0, 0);" border="0" cellspacing="0" cellpadding="0" data-ac-wname="PCRight"><tbody><tr><td class="va-top ac-widget-item gradient ac-widget-overflow-border-radius" style="-ms-overflow-x: hidden; -ms-overflow-y: auto;"><table class="ie-table WiziCore_UI_LabelWidget" id="wspd7llesukng3moqgrmzuhodpfgjmkmpj03" style="width: 70px; clear: left; margin-left: 0px; float: none; display: table; position: relative; z-index: 2; table-layout: fixed; min-height: 15px; min-width: 70px; box-sizing: border-box;" border="0" cellspacing="0" cellpadding="0" data-ac-wname="label1"><tbody><tr><td class="va-top ac-widget-item" style="font: 13px/normal Arial; font-size-adjust: none; font-stretch: normal;"><a style="text-decoration: none;"><div style="width: 100%; height: 100%; text-align: left; color: rgb(66, 66, 66); overflow: hidden; -ms-text-overflow: ellipsis; min-height: 15px;">PC Right</div></a></td></tr></tbody></table></td></tr></tbody></table>

I have no idea why the it changes from div to table.
So my question is how do I structure the CSS to apply correctly in IE 10.

Thanks in advance.

[Paulie_D]

Browsers don’t change elements into other elements.

Are you by anychance using an online website builder?

I suspect there is a javascript feature detection going on that is re-structuring / re-writing the page before it’s rendered.

[classic12]

Yes I am using http://www.applicationcraft.com.

So is there a workaround I can use ?

I’ve been playing around for hours and getting nowhere.

Cheers

SteveW

[Paulie_D]

Not one I’m aware of.

My guess is that the actual HTML is written at run-time for whatever broswer is actually being used.

The only thing I can think of is not to specify the element+class in your CSS.

So not this:

 div.gradienttable {
your styles here
}

but rather this:

 .gradienttable {
your styles here
}

Other than that..speak to the “Application Craft” support.

[Author]

Posts