I have a toolbar in IE that shows a html page in an embedded IWebBrowser2 control.
It works with pretty much any html,css and javascript except that the microsoft-specific filters (such as the gradient filter) don't work in IE8 on WinXP.
The odd thing is that if I load the same html into the main browser window, the gradient filter works. But if I load it into the IWebBrowser2 that's embedded in the toolbar, it doesn't.
Do you have any ideas what the reason might be?
The relevant css looks like this:
{
background-color: inherit;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f6fd', endColorstr='#e4effd',GradientType=0 );
height: 28px;
padding-top:3px;
border-bottom: 1px solid #a0a0a0;
}
I've tried various compatibility settings as described here: How do I turn off Compatibility View on the IE WebBrowserControl in a WinForms app?
but it makes no difference.
I appreciate any brilliant ideas you might have!
Thank you!
Related
I have a big DataGrid (70 columns, 500 rows). The problem I've encountered is that when I apply some css to render the cells of the grid in a specific manner, the performance of scrolling suffers. I override the default css of DataGrid
and added the below css rules that cause the problem
.dataGridHeader, .dataGridHeader div, .dataGridHeader div, .dataGridCell div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
}
What I want to do with the above is clear. I just want the cell to remain unchanged even when the text is bigger and just show ... for the text that is not visible.
The problem is a significant delay when scrolling when using Chrome. I've also tried IE and Firefox, and the results were fine. No delay at all.
Can I do something to boost the performance of Chrome?
My question is about css. I know that the grid is big and paging can be used, to reduce some load. This is for a test case and I need only answers that have to do with css.
I'm using GWT 2.5.1 and Chrome 43.0.2357.81
If someone wants to reproduce just download the example the official site
and add enough columns and rows to stress it a little bit. Override the default css and add the above.
I've implemented an Iframe Like box, but the vertical scroll bar does not show. (The generated code set scrolling to no, but I've now changed it to yes, but still it does not work).
The code is as follows:
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FChristopher-Carter-Veterinary-Surgery%2F332086710515idth=300&height=590&colorscheme=light&show_faces=true&border_color&stream=true&header=true" scrolling="Yes" frameborder="0" style="border:none; overflow:hidden; width:300px; height:590px;" allowtransparency="true"></iframe>
The problem occurs with I/E but not with Safari, Firefox, Netscape or Chrome. It seems as if this is a Windows XP / IE8 issue, but if anybody knows differently, I'd be pleased to hear from them.
You have overridden the scrollbars in the style clause;
overflow: hidden;
However, it has the opposite effect, IE will correctly render as-is, but firefox etc will not render the scrollbars. Fix that with;
overflow-y: scroll;
Having style overflow:hidden; seems to me like a contradiction to scrolling=Yes.
At the risk of stating the obvious:
Have you tried:
overflow:scroll
I am using Css3 effects to make my menu look fancier , no issues with that however , I dont know for some strange reasons , when I click on the menu items , they dont redirect to desired pages ie my href="abc.aspx" wont work in Firefox , Opera , but works well in Chrome.Here is the Css3 code which I use
#Menu a:active,
#Menu a.active:before,#Menu a:hover:before
{
Content: ' ';
position:absolute;
z-index:-1;
width:0px;
height:0px;
left:50%;
top:50%;
border-radius:50%;
box-shadow:0 0 35px 30px #ADD7E7;
}
My menu looks something
However when I remove that Css3 styling , the href works.Can anybody help me out with this as to why this happens.
Any suggestions are welcome.
Thanks
The problem may stem from styling #Menu a:active together with the pseudo elements. Try separating them or even just remove #Menu a:active from the definition altogether. Then you can set your z-index back to -1 as it will only be being applied to the pseudo element.
I've set up a jsfiddle here.
It is most likely because of this line in your css:
z-index:-1;
The default layer is 0 of the document but since on hover you are setting it to -1, you won't be able to click on it.
The z-index:-1 places the element behind the body. As such, it can't be clicked because the body is obscuring it.
This is however a little ambiguous if you haven't defined a background colour for the body, as transparent background colours may not catch clicks.
Avoid negative z-indices. They can go pretty much as high as you want in the positive numbers, more reliably then negative.
Does anyone know if it is possible to create a thinner scrollbar for my windows gadget.
I am already using these attributes to change the scrollbar colors:
scrollbar-face-color: #EEEEEE;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #CCCCCC;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-shadow-color: #AAAAAA;
scrollbar-arrow-color: #000000;
scrollbar-track-color: #EEEEEE;
I was hoping that since the gadget seems to be using the IE rendering engine in quirks mode, there is some option to specify the gadget width?
I guess, if this is not possible, I could use some sort of jQuery plugin that imitates a scrollbar and allows for more customization...
Thanks!
I do not believe it is possible to actively change the width without developing your own control. The scrollbar width is a system wide setting, not an application dependent one. You can identify how wide it is though with: System.Windows.Forms.SystemInformation.VerticalScrollBarWidth;
Change Scrollbar information:
http://community.infragistics.com/forums/p/9516/37132.aspx
Identify Scrollbar Information:
How do I know the current width of system scrollbar?
I am having a problem with Safari v5 on mac. When my Google Map Api is loaded into the page it hides some of my other divs (which are absolutely positioned). The page renders correctly until the map loads. If i have a page without a map the problem does not happen.
example: www.morecambe-lodge.co.uk
it also seems to interfere with the loading of jquery ui. Is there a better way to lazy load google maps or a solution. i have tried document ready and window.onload methods but it still persists with the problem.
I have tested in firefox, ie, chrome and safari v4 and this problem is not replicated only seems to happen in safari v5.
Any advice would be greeatly apreciated, Thanks.
The z-index has nothing to do with this bug.
After I read through the following article:
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
I was able to fix my issue by doing two things. The first was modifying every entry in my CSS that had "text-indent" to have a value of 9999px or under. I use text-indent for all my icon buttons, whether it comes from jQuery UI css or from my css. Having it set over 9999px created issues for me.
The second problem, after the text-indent was fixed, was having blurry fonts. The following helped solve this issue:
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
Both of these are mentioned in the article, but I found that the text indent needed to be smaller than what was suggested.
this work for me :
* {
-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;
}
The bug posted at Google (http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190) mentions changing "text-indent: -999999px;" to "text-indent: -99999px;" on elements. Dropping one 9 fixed the problem for me.
The z-index fixes made no noticeable changes. The webkit-transform fixes rendered the page correctly but left the map unusable. It wasn't possible to drag.
yeah looks like the same problem. i have also posted the question on google. hopefully will get to the bottom of it.
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3190
A clue: it seems to be caused by the stacking of elements with -webkit-transform: translateZ(0px); Once you disable/remove them, backgrounds reappear.