My company has purchased a third-party package with a built-in customer facing web portal, and I'm being tasked with integrating it into our site. Unfortunately, the web portal does not look great, and we have absolutely no control over how it looks (other than asking the vendor for changes - $$). In order to make it look somewhat like the rest of our site, I've stuck it in an iFrame (I'm not thrilled about this either) to put our logo and top navigation on it.
Please note, I am not attempting to manipulate the iframed page in any way.
Firefox handles this just fine, but in IE7 and IE8, not all of the CSS is being applied properly when the application's pages are displayed in the iFrame. Specifically, it should be applying a font-family of Arial to all TDs, but some text inside TDs are not being displayed as Arial.
Any ideas as to what is going on? This only happens when the pages are viewed inside the iFrame. Outside the iFrame, the CSS is applied as it should be. I'm guessing we're going to have to get our vendor to make some changes, but I'd love to know why the iFrame is impacting the page like this.
Thanks!
Have you opened the site you want to integrate as standalone in IE? Maybe it has nothing to do with the iframe, but with the ie itself. That would mean, that the system your company bought, doesn't provide browser-compability because of lack of CSS-IE-Fixes.
These are some debugging steps you can try:
Install the Firebug extension for Firefox. Right-click on an item that looks different and select "Inspect Element". The "Style" tab on the right will show you where styles are coming from.
Save the main document into disk (File->Save as->Web page (complete). Start stripping stuff from it until you get a small test-case you can post here. (Alternativelly, you can spider the site into disk with WinHTTrack.)
Related
I would like to hide the url display that appears in the browser when you hover over a link. I've read the other articles posted on this subject, but as I've tested the options, my functionality "breaks." I have some links that open in the same page, some open a new tab, and other prompt lightbox, pinterest and twitter widgets, and none of the solutions thus far seem to be a "one-size fits all" fix.
I've found a solution (I think), but development is not my forte, and I have no idea how to implement this. Is this something that someone can give me a step by step on how to make this change?
https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2settings.isstatusbarenabled?view=webview2-dotnet-1.0.674-prerelease
I understand your concern regarding your business.
The link you have shared is for WebView2.
Microsoft WebView2 is a developer control for embedding web content in applications. It allows developers to leverage the best of what the Microsoft Edge Chromium platform can offer and build seamless experiences for their users that incorporate web-based content.
It cannot help you hide the URLs on hover for the images on your site while visiting it through different browsers.
As informed by the other community member, it is a security feature in the browsers so users could know which site they are going to visit if they click the link. It is not recommended to modify it to hide it for security reasons.
further, you don't know that the customers visit your site using which browser. Every browser works differently and it is not possible to remove/ hide or disable that information from the browser side.
There are some code examples I found that use some JS code to achieve your requirement. You need to modify your site code. If you are not a developer then it could be difficult for you and you may break your site. So it is recommended to take help from your site developers.
Below are the helpful links.
How To Hide url display in bottom left on mouseover?
How to hide link information at the bottom left/right of the browser on hover
how can url be hidden in hyperlink when mouse hover
Is it possible to hide link address on hover?
The best thing would be to remove the unwanted information from the image links.
I'm assuming my request here isn't possible, but I'll ask anyway, just in case!
I am interested in trying to read the complete html of a sportsbook web site page displayed in a chrome browser, so that I can access the details and odds of each competitor in an event.
The thing is, most of the content is created dynamically. So if I right click and select "View page source" this only gives me the core html and none of the "detail". However, if I right click and select "Inspect" then I can access all the details I want, because this is the fully rendered version of the page.
So, using vb.net, is there any way that I can access the fully rendered page? This will obviously need to be done frequently and I need to interact with the page itself so I can't just use the basic inspect tool within chrome.
I do have a work around - taking screen shots and pixel scraping - but if I can inspect all of the page's elements, that will definitely be better especially as I will be able to read competitors whose display is off the bottom of the screen.
Any ideas? Thanks in advance!
Hi all,
I have been working on this website here through the Weebly editor. I studied Web Development 10 years ago and have only been getting back into it for this job, hence the use of Weebly, hoping to make things easier for myself and for my employer to take over the site when everything is working well. I have been having a problem with links not performing correctly in Chrome and Edge, working fine in Firefox and Safari. I have been looking for the past 3 days now and tried a whole bunch of things without success.
I have built pages more like the main menus being one page and the submenus links to anchors within that page.
With the way Weebly works, I didn't see a way of adding an "id" attribute to any "Title" or "Text" element you use to struture your content. So I started with the fallowing sample code, interjected where needed:
<a name="anchor-name"></a>
I was just placing an "embed HTML" element a little above where I wanted the link to land to compensate for the menu always being at the top. This simple solution works fine with Firefox and Safari. But for some reason, with Microsoft Edge does not take me to the anchor, just stays at the top of page; using Chrome, it doesn't work properly when opening the link from an outside source, link from email or doing a right click and "open link in new tab", it jumps further than intented but works fine once you're on the site and go through the different sub-menus. Very puzzling...
In my research, I came across people with similar problems, never really the same. But I tried this more elegant way, creating a CSS class with the negative top to compensate for menu and changing display to "inline-block", some saying it corrected there problem with IE. No luck for me, Firefox still working fine though.
.nav-anchor{
display: inline-block;
position: relative;
top: -150px;
visibility: hidden;
}
I came also across someone saying to check for errors with the W3.org validator, see result here. The first error is :
Error: X-UA-Compatible HTTP header must have the value IE=edge, was
IE=edge,chrome=1.
I couldn't figure out how or where to change that, I looked through the Weebly editor > Theme editor in all the files and didn't see it anywhere. So not sure if I can add it someplace, or if the Weebly just includes that part for you. Any idea if that's is on the path of solving my problem?
I haven't taken the time to go through all the errors, can the errors make the links not perform correctly?
The answer here (thank you Jeffrey Kastner) did help some what with Chrome, Right-click > "Open in new tab" on a submenu link now sometimes takes me to the right spot, sometimes jumps too far down. I tried over and over with the same link, seemed random. I haven't got feedback from client using IE.
Thank you in advance for any help
(edit:greetings and thank you note disappeared on first post for some reason)
The short answer for your question is you'll want to add meta tags with those in your site's theme within the various types of header template files.
In the majority of themes I have seen used on sites at Weebly, the following "Header Type" files are in the theme editor, and you would need to add the following to each of those as children to the head tag:
header.html
no-header.html
splash.html
(of course, your list may be different depending upon the theme you're using on your site).
The meta-tag HTML code you need to include as a child to your head tag would be:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
The chrome=1 part is usually no longer required since the Chrome-frame was discontinued in 2014, but many people still include it as part. What is happening is you're instructing Internet Explorer to operate in "standards" (the latest rendering engine). The full answer to what this tag does with this setting is available in more comprehensible detail in this stackoverflow question.
I'm not sure if this will completely resolve the issue of your links not operating as expected, since there are many things which can intercept or interrupt the event bubbling process which occurs such as: javascript, frameworks, CSS issues, and many more things. If you were to provide some more concrete information and code examples with errors about what you're seeing, I might be able to help further.
Also, you may want to search in the Weebly Help Center and Knowledgebase, consider asking this question in the Weebly Developer Community or for a more personal engagement, by creating a Weebly Support Case.
The page at www.patbanks.com is supposed to have a pretty image for the background. It shows on Safari, but not on Chrome or Firefox. (Didn't try IE.)
This is a Google Sites so I am not allowed to use CSS; please forgive the awful table-based code. Also unable to put the background in the BODY tag. So the image is in a TABLE tag. This is the only known way to get a background image.
(Answers that I researched were either about subtly different situations where CSS can be used properly, or about malformed URLs. I already verified that the image itself is accessible from that bizarre upload URL.) I am probably doing something offensive to the TABLE tag, or the Google-injected wrapper is doing something to thwart me. Except, the page works just fine when viewed by of all things, Safari...)
I solved the problem by changing the location of the image.
The real URL for the site is https://sites.google.com/a/{user/internal site name}/home. The published ("mapped") URL is just http://www.patbanks.com.
Originally, I uploaded it in the Attachments menu, and used the corresponding image URL. That points to some upload server (the terminal subdomain in the URL is like my Google Sites site name). That URL does not work for some browsers; it is ignored. I don't quite understand why, but it is definitely the case that it is referencing something "off site". Perhaps it is an XSS-prevention feature in the browser (since it worked anyway in some browsers, and not others).
The solution was to edit the page and use the Upload Image command. This creates the image with a very different URL than the Attachments does. (Then I used the HTML editor to remove the resulting unwanted IMG tag, and copied the URL to the TABLE background attribute.)
The page now displays with the background, in all browsers.
Google Sites used to have an "Entire Page Background" command, which I imagine used a CSS style in a DIV or on the BODY element. That's how I wrote the page before I tried to port it to Google Sites, but Google removed this functionality. There is still lots of documentation and third-party help pages that refer to that feature. That no workie no more. And Google Sites doesn't support CSS generally, because it interferes with their CMS. It automatically rewrites/redacts whatever HTML you input on your page.
Someday I'll understand exactly what was going wrong, but hopefully the workaround I've described here will be useful for people.
I'm having a Chrome only issue when adding anchor tags for internal links inside an HTML widget. This may sound quite unimportant but it's quite annoying for myself and many users.
When a page is loaded, if the links are middle-clicked or Ctrl-clicked the 1st time, they only open in a new tab/window like they should, but the 2nd time they act as though they were left clicked and use the same tab/window. For some reason this problem doesn't happen when I use Hyperlink or Anchor widgets. It also isn't an issue in Firefox or IE8.
I've verified that the final HTML of the Hyperlinks and my manually scripted tags are exactly the same. I applied the same styles to the HTML widget to do this. I even tried creating a Hyperlink and calling toString() to generate the HTML, but the bug still occurs.
Does anybody know why this could be happening or have any ideas of how to remedy it? This is a situation where I can't use Widgets so I need to create the tag HTML manually. I'm not a GWT expert, but I don't understand how the compiled code be handling the Hyperlink and Anchor widgets differently than the ones inside the HTML widgets. Any incite into this could be helpful.
I'd be interested in knowing if anybody else could reproduce this as well. I'm running Chrome 23.0.1271.97 and GWT-2.5.0. I know this happens in older versions of Chrome and GWT because it's been a problem for a while, at least since GWT-2.4.
Uninteresting nuances:
If there are two different links inside the same HTML, they bug will happen independently. Meaning that you can middle-click each one, and they will both work correctly, just not the 2nd time. Refreshing the page also resets them so the bug won't happen on the next middle-click. I also found that if the same link is twice contained in the HTML widget, they actually wont work independently. Meaning middle-clicking one will cause the other to incorrectly handle it's 1st middle click.
Just finished debugging this. It is not a GWT issue but a Chrome issue.
I created a bug report: http://code.google.com/p/chromium/issues/detail?id=177502
You can reproduce using this simple HTML page:<!DOCTYPE html>
LOCAL