I have created one jsp page that page is working fine across the all browser.when i rendered that page in IE8 browser it's working fine.But problem is when i select
Browser Mode-IE8 Compatibility View than corresponding
Document Mode- IE7 Standards will be selected automatically.
then my jsp page giving a lot alignment issue.But when i select again
Document Mode- IE8 Standards than my page working fine..
How i can control this thing Is there any way to setting because i can change again again the document mode..i want Document Mode will fix IE8 Standard..
Please provide the solution how i can handle this issue...
Try changing the DOCTYPE to:
<DOCTYPE html>
And then try adding this meta tag into the <head> of your document:
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
This meta tag should force IE into standards mode, you can find more information about it here.
You should end up with something that looks like:
<DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta http-equiv="x-ua-compatible" content="IE=Edge"/>
</head>
<body>
<p>Content</p>
</body>
</html>
Related
Not sure if I'm doing something wrong here or whether this indeed is a Chrome rendering bug.
Here is my very small example:
.hover-test span {
opacity: 0;
transition-property: opacity;
transition-duration: 1000ms;
}
.hover-test:hover span {
opacity: 1;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<button class="hover-test">hover me<span>hidden</span></button>
</body>
</html>
It works in all browsers I checked like expected.
It does work in Chrome as well, when I put the CSS in a style tag directly in the HTML file.
It does NOT work in Chrome (91.0.4472.101), when I put the CSS in a separate file and include it with a link tag.
With "not working" I mean, that on page load the span is shown and then faded out, without the mouse cursor being near the button.
Is this a Chrome bug, or am I doing something wrong here?
How can I achieve the desired behaviour in Chrome, which is: span is hidden on page load and only shown/hidden on hover?
It looks like it is a Chrome bug,as written here: https://www.hawkbydesign.com/weird-google-chrome-css-transition-on-load-bug/
Well, after making some further updates and refreshing the page, I noticed that the transition was firing on page load. What I mean by this is instead of being hidden on page load, as they should be, the elements were visible and would transition to their hidden state.
this is exactly the problem reported.
More:
The bug happens whenever you don’t have any script tags on the page, apparently. For whatever reason, this causes css transitions to trigger upon page load. While I was also digging, it appears that this happens sometimes with the form tag as well. What a weird bug!
The solution is to include a script tag in your page. Whenever I found the solution, they said to include a space in the script tag, but I found that it works fine even without the space.
I actually added jQuery on the page using the CDN link and the bug seems gone.
You appear to be bumping up against a timing problem.
Try this code with your styles file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TEST opacity</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link href="style.css" rel="stylesheet">
<style>
</style>
</head>
<body>
<script>
function insert() {
document.body.innerHTML = '<button class="hover-test">hover me<span>hidden</span></button>';
}
window.onload = insert;
</script>
</body>
</html>
This waits for loading before putting the button in the document and on Chrome (and Edge) on Windows10 at least all is well.
Chrome/Edge seem to differ from say Firefox in whether loading is synchronous or not - or maybe it's just a lot faster writing the document.
I am testing out the bootstrap modal function using the bootstrap official documentation. I have copied the exact code from their website. Things I have tested:
Checking in the browser if js,jquery and css files src location is correct
Made a brand new file and only imported things that are needed for modal to work to make sure my own .css or js files are not interfering with this.
Tested this on chrome, ie and firefox inc. private browsing - Still same. It just displays the button link and when you click on it it doesn't popup anything.
Checking the console for any error logs. No errors.
I am kind of mind-blown what could cause this? Is there possible that some kind of server-side (using xampp v3.2.2 and running on port :8080) could cause this not to work?
- Since stackoverflow required some sort of code in here I included the head
Here is my full code: http://jsfiddle.net/bLajz5ud/
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="css/bootstrap.css">
<title></title>
</head>
make sure that you have an active internet connection. Jquery is included using a CDN URL
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
if you don't have active internet connection, no jquery code would run
My tutorial site works fine on google chrome but when i try to open it with any kind of internet explorer i can not see some part of visul items.
All information of my design exist in css file. However being gray of right part can be observed but on the other hand i can't see navigation bar.
I put my some codes. It is high possible to have any link between these code and this situation.
At the beginning:
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<html>
<title>Tutorials</title>
...
<link href="styles/mainStyle.css" rel="stylesheet" type="text/css">
For more you can check: http://www.soccerforecast.com/Tutorials/SFUnderCons/currentForecasts.php
I don't have 10 reputation so i can't put direct image to this site so link is: http://postimage.org/image/y94bk7afb/
I don't usualy control my site with different kind of browser, now i recommend to do this everyday. Now i don't have any idea which code make this situation. :)
Yout HTML is a little messed up.
Fix these things and it might help:
Place your HTML tag before the HEAD tag but after the DOCTYPE tag.
Place a closing HTML tag at the very end of your document.
In the TABLE you have towards the end of your page you have an extra closing TR tag.
The comment before your DOCTYPE will possibly cause problems too.
Try running your site through a validator to check for errors like these.
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/
It's because you have a comment before your doctype declaration.
This is forcing the page into quirks mode if you remove that comment you should be ok.
<!-- InstanceBegin template="/Templates/tempPage00.dwt" codeOutsideHTMLIsLocked="false" -->
<!doctype html>
<head>
Edit... The head and html tags are the wrong way round also.
I have a website, where IIS sends the following in the header (which is correct for the overall site):
X-UA-Compatible: IE=Edge
However, on a specific page, I have at the very top of my <head> section the following:
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<![endif]-->
This is being interpreted correctly by IE8, as it shows up at the top of the when I view the page source. However, it never changes my Document Mode from "IE8 Standards" to "IE7 Standards." The Browser Mode is in IE8 Compatibility View by default(it's an intranet site), but even in normal IE8 mode, it still has the same Document Mode issues.
I thought that having the meta tag on the page overrides whatever was sent in the initial header from the server. Is there anything else I could be doing to change the document mode for this one page?
EDIT: I can force IE7 document mode if I place the following in my Page_Load of my aspx page Response.AddHeader("X-UA-Compatible", "IE=7"); so I now have this header show up after the IE=Edge header, so only this second one is interpreted. This doesn't actually solve my issue though, because the meta tag above has the advantage of not being used in IE9 or IE10, and some of the niceties of the page disappear when forcing to IE7 document mode. I just specifically need this to work for IE8 and older.
Also, if I remove the conditional CSS, it appears to get the document mode correct. So is it possible that conditional CSS executes after the page loads, and if so, how do I fix it to make IE7 document mode only show up for IE8 and earlier browsers?
Are you sure you have the order correct? I just tried this page that I found HERE and my browser defaults to "IE7 standards".
<html>
<head>
<!--[if lt IE 9]>
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<![endif]-->
<title>My webpage</title>
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
My webpage code is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body style="background-color: Black;" >
</body>
</html>
When I run the page on my development Pc (Visual Studio 2010), I get this result:
Notice that the page is rendered in compability mode.
When I run the exact same page from IIS7, I get this result:
Now the compability view is gone, but I now have a vertical scrollbar and a white frame (1-2 pixels) around the entire page (see the yellow arrows - it might be hard to see here).
Here's my questions:
Why is compability view different when running in development than on my IIS7 production server?
With the HTML code above, why is there a vertical scrollbar and a small frame around the page? ... and how do I get rid of it? I want an entire black page.
Thank you in advance!
Mojo
The use of <!DOCTYPE html> normally prevents compatibility mode, but for local files (localhost:...), IE tends to use compatibility mode despite it. To override this, use
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
(which may have various other effects too), or test your pages on a server.
put this linebefore the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">