I have a very simple XPage with a table and some input fields.
The application uses the bootstrapv3.0.0 theme and the OpenNtf bootstrap4Xpages plugin released on 2014-01-28.
I think I'm using correct markup according to bootstrap-3 documentation.
The page renders just fine in Chrome, but it's a mess in IE 11.
In IE the table seems to get cut at a fixed width of approx. 100px and the characteristic blue border on selected “bootstrapped” input fields does not show up as it should
Buttons styled with btn-warning display as expected, also in IE. This tells me that at least some of the styles is applied correctly in IE as well
Anyone else who have run into this problem?
Any tips on a possible solution (dropping support for IE is not an option)?
Are you running IE11 in compatibility mode? Try turning off compatibility mode and see if the site loads.
By default intranet sites load in compatibility mode, which I think really means your web site is going to look awful if it was made in the last 15 years mode.
Per Henrik Lausten has an xSnippet that can display a warning to your users if they are running like so. http://openntf.org/XSnippets.nsf/snippet.xsp?id=display-warning-message-if-internet-explorer-uses-compatibility-view-mode
Add x-ua-compatible header in your html header to disable IE so-called compatibility mode:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
More info in this question:
What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?
I was having formatting issues and got fixed by adding
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
I recommed you use these lines before </head>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
I know they are only for IE 8 IE 9 but still :)
I never encounter any problem with IE 11 can you provide any link if possible
Related
I'm using scrapy to crawl an e-commerce website I'm experienced with simpler websites where scrapy alone or with splash/selenium handle most cases.
I have a new situation where I have no experience to deal with. From my investigations it could be like a captcha but without any request to the user.
I've made tests to solve it with scrapy alone, scrapy and selenium with no success.
With my scrapy request I receive the following response
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Challenge Validation</title>
<link rel="stylesheet" type="text/css" href="/_sec/cp_challenge/sec-2-9.css">
<script type="text/javascript">function cp_clge_done(){location.reload(true);}</script>
<script src="/_sec/cp_challenge/sec-cpt-int-2-9.js" async defer></script>
<script type="text/javascript">sessionStorage.setItem('data-duration', 5);</script>
</head>
<body>
<div class="sec-container">
<div id="sec-text-container"><iframe id="sec-text-if" class="custmsg" src="https://beta.elcorteingles.es/sgfm/statics/eci_non_food/contents/cc/cca.html"></iframe></div>
<div id="sec-if-container">
<iframe id="sec-cpt-if" class="crypto" data-key="" data-duration=5 src="/_sec/cp_challenge/ak-challenge-2-9.htm"></iframe>
</div>
</div>
</body>
</html>
With the chrome inspector i see also noticed two GET requests (non-java) that might be related:
check -> returns HTML ( ... <title>RP iframe</title> ...)
check-session?origin=https%3A%2F%2Fwww.elcorteingles.es -> returns HTML (...<title>OP iframe</title>...)
Using scrapy shell with view(response) it looks like a captcha situation, waiting for something. Page example could be:
scrapy shell "https://www.elcorteingles.es/supermercado/0110120903000022-coosur-aceite-de-oliva-intenso-1-botella-1-l/"
The title 'challenge validation' suggests it. I have no idea how to handle with this case. From research, I've seen solutions involving scrapy middleware but for cases where input was asked from the user. I found no example similar to this case. Any guidance on how to proceed is appreciated.
the reason of this question is because I am having troubles with a route address in MVC 4 application, what is happening here is that I have an action link in this way in a view:
<li>#Html.ActionLink("Description", "Action", "Controller")</li>
And when I run the app in the HTML in the web browser appear the link generated correct
<li>description</li>
but when I click on the link in the web address bar the destination route appears as follows:
http://localhost:port/#/Controller
Is inserting a "#" char in between, is doing this for all of the links in my different views, it do the same when I deploy the App in a web server too no only in my local and this makes that the destination page don't appear correct, I don't know the reason of this, I have been searching but without success, hope you can help me, thanks in advance.
I found the reason for that behavior, it was because I have the script load for jquery mobile on the head section in the _Layout_cshtml file like this
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
#Scripts.Render("~/bundles/jquery")
#Styles.Render("~/Content/mobilecss", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquerymobile")
</head>
What I do was change the location of jquerymobile script to the end of the _Layout.cshtml
#Scripts.Render("~/bundles/jquerymobile")
#RenderSection("scripts", required: false)
</body>
With this change the web route was created correctly, I hope this helps to somebody.
Is there any way to capture all the redirects on the page performed in JS? For instance, let's take a look at this web page making redirect using window.location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Redirect JS</title>
</head>
<body>
<script>
window.location = "http://www.example.com";
</script>
</body>
</html>
or meta tag
<meta http-equiv="refresh" content="0; url=http://example.com/">
I would like to render web page and get all urls where user has been redirected. Is it possible? How to do that in selenium?
In Python: http://selenium-python.readthedocs.org/en/latest/api.html : webdriver has property current_url. After you driver.get() the page, I would assume current_url is the redirected URL. Is it not?
Your requirement "in Selenium" will make this impossible. Selenium interacts with a browser as a human would - a human should generally not know or care about all the redirects. If you are willing to abandon Selenium for this purpose, then there are libraries such as HttpBuilder (in the Java world) and many others (for other languages) that allow you to manipulate and watch HTTP traffic, which is what you are after here.
I am using Bootstrap 3.
When I add <meta http-equiv="X-UA-Compatible" content="IE=edge">, the site shows error in the W3C validator.
From my answer to a similar question:
In (X)HTML5, you may only use http-equiv values that are
defined in the HTML5 spec, or
registered in the WHATWG wiki page "PragmaExtensions".
The value X-UA-Compatible is not defined in the spec, but it’s proposed in the wiki. "Proposed" means:
The following proposed extensions do not yet conform to all the registration requirements in the HTML spec and are therefore not yet allowed in valid documents.
So currently it’s not valid to use this value in (X)HTML5.
You can do:
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<![endif]-->
The validator is extremely pedantic. It's best to just ignore this particular validation warning, given its significant pragmatic benefit and complete lack of downsides. It's not an error of any kind in any of the major browsers.
As I understand it you can tell the IE8 (and I assume later versions) how to best render your page.
This is useful because the page may have been designed for IE7, quirks mode or to target IE8 standards mode. As I have it, the default behaviour for IE8 when it encounters a page is to render in IE8 standards mode (not sure how it interprets the DOCTYPE though). With this default the user could change the rendering mode by clicking on the "Compatibility View" button next to the refresh button.
This is nice to give the user some control, but bad when you know your site only renders well with IE7 or whatever. In that case you don't want to enable the user to make the wrong choice and that's where the ability for a website to tell the >= IE8 browser how to render the page is very useful.
You simply have to provide the X-UA-Compatible meta tag the within the head tag. There are loads of references on the web how to do this and what values can be used. Remember to make it the first one.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
OK, so it's nothing new so far - however it just doesn't work for my ASP.NET project? I've tried it on a couple of other projects I have and the same problem.
Is there perhaps a scenario where because I'm using developer tools like Visual Studio, etc. that IE has been configured to always show the "Compatibility View" button for debugging purposes? Grasping at straws here I know.
I found out why this is happening.
It seems that ASP.NET's theming is interfering. When looking at the rendred output there is a dynamically inserted tag for the stylesheet (one for each) from the theme.
The ASP.NET theming engine inserts these items above the X-UA-Compatible meta tag, thus breaking IE's expectation of having it as the first tag in the head element.
So an ASP.NET site that has theming and the following in the source:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="X-UA-Compatible" content="IE=7" />
will get rendered out as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="ctl00_Head1">
<link href="App_Themes/White/Default.css" type="text/css" rel="stylesheet" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
This seems to be a bit of a bug. I'll create a MS Connect issue for it.
There's an interesting workaround for this here . I'll include the gist to make it easier:
The "styleSheetTheme" setting always places its CSS file in the header
at the top before anything else. To move the "X-UA-Compatible" before
it, you would have to do the following:
Make the meta tag accessible from the server code by giving it an ID and add the "runat" attribute:
...
Add the following pre-render event handler to your page (or master page):
protected void Page_PreRender(object sender, EventArgs e)
{
Control MyFirstCtrl = Page.Header.FindControl("FirstCtrlID");
Page.Header.Controls.Remove(MyFirstCtrl);
Page.Header.Controls.AddAt(0, MyFirstCtrl);
}
You can move things around in the header this way for anything that
you explicitly define in there.