Im working on a native C++ Win32/MFC application using Visual C++ 2005 Pro on Win7.
I have a modeless dialog which contains a web browser ActiveX control. More specifically, the control being used is the one with the below CLSID (according to HKCRCLSID..., this is the "Microsoft Web Browser" control provided by ieframe.dll).
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; static CLSID <span style="color:Blue; const clsid
= { 0x8856f961, 0x340a, 0x11d0, { 0xa9, 0x6b, 0x0, 0xc0, 0x4f, 0xd7, 0x5, 0xa2 } };
[/code]
Im creating an .html file locally and then calling Navigate2 with the "file://" URL which points to that file.
When the HTML is rendered in this window, there are some problems. I have a table where Id like space between the rows but no space between the columns. So I experimented with the CSS while viewing the file in IE until I got it working.
The problem is, although it looks great if you just open the .html file in IE8, it does not render correctly when viewing it with the web browser activex control on the same machine.
Ive provided the HTML file below for reference. Any idea why the rendering in the web browser control wouldnt match the rendering on the same machine using IE8 directly?
One guess I had was that the web browser control is defaulting to an older IE and that there must be some way for me to tell the control to instead use a newer IE version (i.e. the installed one) for interpreting the HTML. Could this be the problem?
If so any ideas how to fix it?
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; <!<span style="color:#A31515; DOCTYPE <span style="color:Red; html <span style="color:Red; PUBLIC <span style="color:Blue; "-//W3C//DTD XHTML 1.0 Transitional//EN" <span style="color:Blue; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; html<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; head<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; style <span style="color:Red; type<span style="color:Blue; =<span style="color:Blue; "text/css"<span style="color:Blue; >
* {
font-family: Calibri, sans-serif;
font-size: 16pt;
}
body {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #FFFFFF;
}
table {
border-collapse: separate;
border-spacing: 0px 5px;
}
td {
border-top-style: solid;
border-bottom-style: solid;
border-color: #4F81BD;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
td.statusCol {
border-left-style: solid;
border-right-style: solid;
}
td.progressCol {
border-right-style: solid;
}
div.displayText {
font-style: bold;
}
div.commentText {
font-size: 12pt;
}
<span style="color:Blue; </<span style="color:#A31515; style<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; head<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; body<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; table<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tbody<span style="color:Blue; >
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status00<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText01<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText02<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status10<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText11<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText12<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status20<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText21<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText22<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >0%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status30<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText31<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText32<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Blue; </<span style="color:#A31515; tbody<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; table<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; body<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; html<span style="color:Blue; >
[/code]
View the full article
I have a modeless dialog which contains a web browser ActiveX control. More specifically, the control being used is the one with the below CLSID (according to HKCRCLSID..., this is the "Microsoft Web Browser" control provided by ieframe.dll).
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; static CLSID <span style="color:Blue; const clsid
= { 0x8856f961, 0x340a, 0x11d0, { 0xa9, 0x6b, 0x0, 0xc0, 0x4f, 0xd7, 0x5, 0xa2 } };
[/code]
Im creating an .html file locally and then calling Navigate2 with the "file://" URL which points to that file.
When the HTML is rendered in this window, there are some problems. I have a table where Id like space between the rows but no space between the columns. So I experimented with the CSS while viewing the file in IE until I got it working.
The problem is, although it looks great if you just open the .html file in IE8, it does not render correctly when viewing it with the web browser activex control on the same machine.
Ive provided the HTML file below for reference. Any idea why the rendering in the web browser control wouldnt match the rendering on the same machine using IE8 directly?
One guess I had was that the web browser control is defaulting to an older IE and that there must be some way for me to tell the control to instead use a newer IE version (i.e. the installed one) for interpreting the HTML. Could this be the problem?
If so any ideas how to fix it?
<div style="color:Black;background-color:White; <pre>
<span style="color:Blue; <!<span style="color:#A31515; DOCTYPE <span style="color:Red; html <span style="color:Red; PUBLIC <span style="color:Blue; "-//W3C//DTD XHTML 1.0 Transitional//EN" <span style="color:Blue; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; html<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; head<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; style <span style="color:Red; type<span style="color:Blue; =<span style="color:Blue; "text/css"<span style="color:Blue; >
* {
font-family: Calibri, sans-serif;
font-size: 16pt;
}
body {
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
background-color: #FFFFFF;
}
table {
border-collapse: separate;
border-spacing: 0px 5px;
}
td {
border-top-style: solid;
border-bottom-style: solid;
border-color: #4F81BD;
padding-left: 10px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
td.statusCol {
border-left-style: solid;
border-right-style: solid;
}
td.progressCol {
border-right-style: solid;
}
div.displayText {
font-style: bold;
}
div.commentText {
font-size: 12pt;
}
<span style="color:Blue; </<span style="color:#A31515; style<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; head<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; body<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; table<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tbody<span style="color:Blue; >
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status00<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText01<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText02<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status10<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText11<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText12<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status20<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText21<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText22<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >0%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "statusCol"<span style="color:Blue; >Status30<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "displayText"<span style="color:Blue; >DisplayText31<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; <<span style="color:#A31515; div <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "commentText"<span style="color:Blue; >CommentText32<span style="color:Blue; </<span style="color:#A31515; div<span style="color:Blue; ><span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; <<span style="color:#A31515; td <span style="color:Red; class<span style="color:Blue; =<span style="color:Blue; "progressCol"<span style="color:Blue; >100%<span style="color:Blue; </<span style="color:#A31515; td<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; tr<span style="color:Blue; >
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Green; <!-- *********************************************************************** -->
<span style="color:Blue; </<span style="color:#A31515; tbody<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; table<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; body<span style="color:Blue; >
<span style="color:Blue; </<span style="color:#A31515; html<span style="color:Blue; >
[/code]
View the full article