I have a web project that just breaks when I run it on Internet Explorer. Here it is, working as I want it to, on jsfiddle.
On IE, the display_area goes up and mixes with the toolbar up top. Also, the posts mixes into the side_display_area instead of them being confined to main_display_area, as is on the jsfiddle.
The problem I had was because IE, by default, uses 'Quirky' mode for its CSS rendering for the sake of compatibility with older code that was written ad hoc for IE. Although IE currently has different standard compliant modes(I can't attest to how compliant, however), it still defaults to this compatibility mode.
The solution is to override, or explicitly set, the rendering mode of IE via the X-UA-Compatible header. You can do this through html tags with:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
</head>
more info
I think this may help http://css-tricks.com/the-css-overflow-property/
Consider adding some div to you horizontal menu and put some height on that
div.hmenu {
margin-left:auto;
margin-right:auto;
height: 20px;
min-width:1000px;
max-width:90%;
overflow:auto;
}
Related
I need some help. While I was working on a project in Chrome, I wanted to test it in Firefox and was puzzled as to why it looked so different.
Can anyone explain to me why the green div containing the image doesn't adjust its width relative to the child? Is it a bug? Is it a feature? Is it a bugfeature?
Research
It works, as I expect in Chrome, where it looks like this:
But in Firefox, there is a lot of weird white space (this is the same image as the first):
Also, here is a screenshot of the following browsers (starting from the left) Firefox, Opera and Internet Explorer 11:
As you can see, it works like I expect in Opera, but not in FF and IE11. It doesn't work in Edge either.
My findings
It looks to me like Firefox forgets to recalculate the parent's width after the image has been resized.
Here is a screenshot without height constraints (100% of the parents 200px height):
If I readd the height constraint, it looks like this:
As you can see, the width is the same. Note that the green div's width is 510px. That is the the same as the image (500px) + the padding (5px + 5px).
The code
I tried to add a jsFiddle, for your convenience, but curiously, I were not able to reproduce the error there (it worked as it was supposed to).
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.wrapper {
height: 200px;
}
.div1 {
float: left;
background-color: green;
}
.div1 img {
height: 100%;
padding: 5px;
}
.div2 {
background-color: blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="div1">
<img src="http://placehold.it/500x500">
</div>
<div class="div2">
<h1>Heading</h1>
</div>
</div>
</body>
</html>
I'll answer my own question in hope of helping someone else
TLDR:
I was missing the HTML5 doctype declaration, which looks like this: <!DOCTYPE html>.
Longer version:
While writing this question, it suddenly struck me that it could be caused by the lack of a doctype declaration. A quick test confirmed my suspicion. All I was missing was the <!DOCTYPE html> declaration!
It's safe to say that I'll update my snippet to include a doctype. I used Visual Studio's doc snippet and never gave it another thought. Note that the html snippet already includes a doctype. (In VS: If you type html or doc and hit tab in an HTML document, a quick HTML template will appear)
Why
Without a doctype declaration, the browser renders the page as best it can, in the so called quirks mode. In quirks mode the browser has to guess how the page is supposed to look with primary focus on backwards compabillity. Therefor the result naturally deviates from newer specifications.
The doctypes was invented to differentiate legacy sites from those using newer specs back when IE and Netscape was a thing. You can read more about it on MDN here:
Doctype
Quirks mode
Nice to know:
Make sure you put the DOCTYPE right at the beginning of your HTML document. Anything before the DOCTYPE, like a comment or an XML declaration will trigger quirks mode in Internet Explorer 9 and older.
-MDN
In HTML5, the only purpose of the DOCTYPE is to activate full standards mode.
-MDN
How to see which mode is being used
On Windows, click alt to bring up the good old toolbar, then go to Tools ➡ Page info
So I can get IE8 to use :after quite easily:
<!DOCTYPE html>
<html>
<style type="text/css">
a.styled:after
{
content:" HAHA! Business.";
color:red;
font-size:12pt;
}
</style>
<body>
Here's some text and stuff. Here's a link.
</body>
</html>
If I put that in a text document and open it in IE, it displays what it should: "Here's a link" is followed by "HAHA! Business," in red. When I try putting the exact same code into a SharePoint Content Editor web part, it works on every browser I've tried EXCEPT for Internet Explorer. With IE, nothing is displayed after the link when I use :after, but any other sort of styling works fine. What gives?
IE does not support :after prior to IE 8, and even with IE 8 it does not work without a doctype. You can check out this chart of css selectors and their support for more information as well.
Since you mentioned using IE8, I cannot find any reason why it should not work. There could possibly be some other content in your sharepoint web part that could be causing issues.
You may also be interested in how-do-you-work-around-ie-not-supporting-after or why-is-sharepoint-dispalying-my-html-and-css-content-improperly, two similar questions found here on stackoverflow.
I just finished designing a webpage for my photography. I used Chrome as my test browser.
But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).
Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.
<html>
<head>
<title>A test HTML</title>
<style type="text/css">
#currpage
{
position: absolute;
bottom: 18%;
right: 10%;
left: 35%;
top: 15%;
border:2px solid green;
z-index: 240;
}
</style>
</head>
<body>
<div id="currpage" style="visibility: visible; opacity: 1;">
This is just a test.
</div>
</body>
</html>
Have you tried... actually making a well-formed HTML file?
Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.
Add <!DOCTYPE HTML> to the start of the file.
EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)
Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.
At the very first line (even before the <html>-Tag write the following:
<!DOCTYPE html>
This is for a HTML5 document.
Edit: ....edit.... forget that point.
Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"
I developed a small site (100% css layout). I have tested it on IE, Firefox and it looks fine.
After I upload it on my hosting company web server layout is broken only on internet explorer. I mean css is loaded properly but some elements are not at their places. I checked several times the css files on my local pc and the webserver and they have same content.
For example
#main{
position: relative;
width: 960px;
margin: 0 auto;
}
The code above puts #main div at the center of the screen. On my pc it work fine on IE, Firefox etc. But on web server that div floats to left on IE
What could be wrong ?
Internet Explorer has a number of things it uses to determine document rendering mode. The document being local or on the Internet is one of them.
Add
<meta http-equiv="X-UA-Compatible" content="IE=edge">
And then check the documents are consistent (either broken in both or working in both). If so, that confirms what the problem is and you just need to fix the CSS to work with IE in its best standards mode.
Microsoft provide more details.
Also make sure you aren't using the Compatibility button on the toolbar to force compatibility with older, buggier versions of IE.
For earlier versions of IE, you needed to add an extra bit of CSS to get things centered, i.e.:
body {text-align: center};
Then you'd also need to add text-align:left; to the first child div so the text isn't centered:
#main{
position: relative;
width: 960px;
margin: 0 auto;
text-align: left;
}
If the browser is behaving as an earlier version I reckon this could be the issue, so try adding this to your code.
If you look at this website with IE8 there a scrollbar on the right... How can I get rid of it? Any ideas pr tools that could help me find the error?
http://www.photocabana.net/
Does not work with IE8 Compat Mode = Off
Works in IE8 Compat Mode = On
Works in Firefox
Works in Chrome
If you use overflow:hidden on the HTML element and the BODY that should get it working in IE7 also.
Another option for your site if it's IE7 compatible already is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
http://msdn.microsoft.com/en-us/library/aa374783(VS.85).aspx
This will buy you time until you can get everything right in IE8 native.
include this in your <head> element:
<style>
html, body {
overlow-y: hidden;
}
</style>
This is css that hide the scrollbar in the html and body tags.
http://www.w3schools.com/cssref/css3_pr_overflow-y.asp