Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS IE 10 ignoring CCS and changing div to table

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #205781
    classic12
    Participant

    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.

    #205782
    Paulie_D
    Member

    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.

    #205783
    classic12
    Participant

    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

    #205786
    Paulie_D
    Member

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.