locked
Dynamic HTML elements and css styles in WBC RRS feed

  • Question

  • Hi,

    I have a page that is being builded dynamically in JS. When the page is renderd in IE9 Standards mode, the rendering is OK. When i open it in WBC the page is rendered differently. The CSS styles are being applied but there is a difference in the identation.

    I forced the WBC to work in IE9 standards mode by: 1. Added the <meta http-equiv="X-UA-Compatible" content="IE=9" /> tag 2. Added my process name to the registry in FEATURE_BROWSER_EMULATION with 9999 value. So this is not the problem.

    the WBC rendering (notice the identation):

    I will post the CSS in the next post (too long)

    Thanks for any answer.

    • Moved by Rob Pan Wednesday, August 3, 2011 9:09 AM (From:Internet Explorer Extension Development)
    Tuesday, July 26, 2011 12:43 PM

Answers

  • Hi,

     

    According to your description, it seems that your thread is about IE web development. So I suggest you can send your issue to the correct forum for better support. Thanks for your understanding.

     

    Best Regards,

    Rob


    Rob Pan [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, August 3, 2011 9:09 AM
  • This was moved out of the IE Extension forum.

    As Rob suggested, you can ask this in the IE Web dev forum.

    Or I can move it into that forum or another specific MSDN forum if you'd like.

    This is regarding your code:

    .dyna-header { background-color:#DCE5F2; color:#000000; border-color:#7591ac; border-style:solid; border-width:1px; font-weight:bold; min-height:25px; max-height:25px; height:25px;text-align:center; }
     
    .dyna-cell { background-color:white; color:#000000; border-color:#7591ac; border-style:solid; border-width:1px; }
     
    .dyna-cell-container { border-color:#7591ac; border-style:solid; border-width:0px; border-bottom-width:1px; min-height:20px; max-height:20px; height:20px; margin:0px; position:relative; }
     
    .dyna-param-container { border-right-width:0px; }
     
    .dyna-value-container { border-left-width:0px; min-width:200px; }
     
    .dyna-splitter { border-color:#7591ac; min-width:1px; min-height:1px; border-style:solid; border-width:1px; margin:0px; }
     
    .dyna-hintbox { min-width:200px; min-height:50px; margin-bottom:0px; float:; }
     
    .dyna-collapser { background-color:#ECF5FF; color:#7591ac; border:1px solid #7591ac; -moz-border-radius:2px; height:11px; max-height:11px; width:11px; margin-top:4px; margin-bottom:4px; margin-left:2px; margin-right:2px; float:left; }
    .dyna-dummy-collapser { border:none; background:none; height:11px; max-height:11px; width:11px; margin-top:4px; margin-bottom:4px; margin-left:2px; margin-right:2px; float:left; }
     
    .dyna-collapser-collapse { background-image: url(../images/collapse.png); background-repeat:no-repeat; background-position:50% 50%; }
     
    .dyna-collapser-expand { background-image: url(../images/expand.png); background-repeat:no-repeat; background-position:50% 50%; }
     
     /*background-repeat:no-repeat; background-position:50% 50%;*/ 
     
    .dyna-editor { text-align:left; border:none; min-height:16px; max-height:16px; height:16px; margin-right:0px; min-width:50px; width:150px;  }
    .dyna-editor-inline { min-width:15px; max-width:15px; width:15px; margin-right:4px; margin-left:0px; float:left; }
    .dyna-editor[disabled=true] { background-color:white; }
    .dyna-editor-inline[disabled=true] { background-color:white; }
    .dyna-editor html|*.numberbox-input { text-align: left; }
     
    #RTSDynaRoot
    {
        position:relative;
    }
    #RTSDynaRootparam
    {
        float:left;
        width:70%;
    }
     
    #RTSDynaRootvalue
    {
        float:left;
        width:30%;
    }
     
    .label-test
    {
        float:left;
    }
    
    

     


    Ed Price a.k.a User Ed, Microsoft Experience Program Manager (Blog, Twitter, Wiki)
    Tuesday, December 27, 2011 7:50 AM

All replies

  • Here is the CSS (sorry for the color):


     
    .dyna-header { background-color:#DCE5F2color:#000000border-color:#7591acborder-style:solidborder-width:1pxfont-weight:boldmin-height:25pxmax-height:25pxheight:25px;text-align:center; }
     
    .dyna-cell { background-color:whitecolor:#000000border-color:#7591acborder-style:solidborder-width:1px; }
     
    .dyna-cell-container { border-color:#7591acborder-style:solidborder-width:0pxborder-bottom-width:1pxmin-height:20pxmax-height:20pxheight:20pxmargin:0pxposition:relative; }
     
    .dyna-param-container { border-right-width:0px; }
     
    .dyna-value-container { border-left-width:0pxmin-width:200px; }
     
    .dyna-splitter { border-color:#7591acmin-width:1pxmin-height:1pxborder-style:solidborder-width:1pxmargin:0px; }
     
    .dyna-hintbox { min-width:200pxmin-height:50pxmargin-bottom:0pxfloat:; }
     
    .dyna-collapser { background-color:#ECF5FFcolor:#7591acborder:1px solid #7591ac-moz-border-radius:2pxheight:11pxmax-height:11pxwidth:11pxmargin-top:4pxmargin-bottom:4pxmargin-left:2pxmargin-right:2pxfloat:left; }
    .dyna-dummy-collapser { border:nonebackground:noneheight:11pxmax-height:11pxwidth:11pxmargin-top:4pxmargin-bottom:4pxmargin-left:2pxmargin-right:2pxfloat:left; }
     
    .dyna-collapser-collapse { background-imageurl(../images/collapse.png)background-repeat:no-repeatbackground-position:50% 50%; }
     
    .dyna-collapser-expand { background-imageurl(../images/expand.png)background-repeat:no-repeatbackground-position:50% 50%; }
     
     /*background-repeat:no-repeat; background-position:50% 50%;*/ 
     
    .dyna-editor { text-align:leftborder:nonemin-height:16pxmax-height:16pxheight:16pxmargin-right:0pxmin-width:50pxwidth:150px;  }
    .dyna-editor-inline { min-width:15pxmax-width:15pxwidth:15pxmargin-right:4pxmargin-left:0pxfloat:left; }
    .dyna-editor[disabled=true] { background-color:white; }
    .dyna-editor-inline[disabled=true] { background-color:white; }
    .dyna-editor html|*.numberbox-input { text-alignleft; }
     
    #RTSDynaRoot
    {
        position:relative;
    }
    #RTSDynaRootparam
    {
        float:left;
        width:70%;
    }
     
    #RTSDynaRootvalue
    {
        float:left;
        width:30%;
    }
     
    .label-test
    {
        float:left;
    }
    
    Tuesday, July 26, 2011 12:46 PM
  • Hi,

     

    According to your description, it seems that your thread is about IE web development. So I suggest you can send your issue to the correct forum for better support. Thanks for your understanding.

     

    Best Regards,

    Rob


    Rob Pan [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Wednesday, August 3, 2011 9:09 AM
  • This was moved out of the IE Extension forum.

    As Rob suggested, you can ask this in the IE Web dev forum.

    Or I can move it into that forum or another specific MSDN forum if you'd like.

    This is regarding your code:

    .dyna-header { background-color:#DCE5F2; color:#000000; border-color:#7591ac; border-style:solid; border-width:1px; font-weight:bold; min-height:25px; max-height:25px; height:25px;text-align:center; }
     
    .dyna-cell { background-color:white; color:#000000; border-color:#7591ac; border-style:solid; border-width:1px; }
     
    .dyna-cell-container { border-color:#7591ac; border-style:solid; border-width:0px; border-bottom-width:1px; min-height:20px; max-height:20px; height:20px; margin:0px; position:relative; }
     
    .dyna-param-container { border-right-width:0px; }
     
    .dyna-value-container { border-left-width:0px; min-width:200px; }
     
    .dyna-splitter { border-color:#7591ac; min-width:1px; min-height:1px; border-style:solid; border-width:1px; margin:0px; }
     
    .dyna-hintbox { min-width:200px; min-height:50px; margin-bottom:0px; float:; }
     
    .dyna-collapser { background-color:#ECF5FF; color:#7591ac; border:1px solid #7591ac; -moz-border-radius:2px; height:11px; max-height:11px; width:11px; margin-top:4px; margin-bottom:4px; margin-left:2px; margin-right:2px; float:left; }
    .dyna-dummy-collapser { border:none; background:none; height:11px; max-height:11px; width:11px; margin-top:4px; margin-bottom:4px; margin-left:2px; margin-right:2px; float:left; }
     
    .dyna-collapser-collapse { background-image: url(../images/collapse.png); background-repeat:no-repeat; background-position:50% 50%; }
     
    .dyna-collapser-expand { background-image: url(../images/expand.png); background-repeat:no-repeat; background-position:50% 50%; }
     
     /*background-repeat:no-repeat; background-position:50% 50%;*/ 
     
    .dyna-editor { text-align:left; border:none; min-height:16px; max-height:16px; height:16px; margin-right:0px; min-width:50px; width:150px;  }
    .dyna-editor-inline { min-width:15px; max-width:15px; width:15px; margin-right:4px; margin-left:0px; float:left; }
    .dyna-editor[disabled=true] { background-color:white; }
    .dyna-editor-inline[disabled=true] { background-color:white; }
    .dyna-editor html|*.numberbox-input { text-align: left; }
     
    #RTSDynaRoot
    {
        position:relative;
    }
    #RTSDynaRootparam
    {
        float:left;
        width:70%;
    }
     
    #RTSDynaRootvalue
    {
        float:left;
        width:30%;
    }
     
    .label-test
    {
        float:left;
    }
    
    

     


    Ed Price a.k.a User Ed, Microsoft Experience Program Manager (Blog, Twitter, Wiki)
    Tuesday, December 27, 2011 7:50 AM