I've made a theme for the blogging platform Tumblr, and it works fine on all browsers except IE.
IE won't fix the position of a div on the bottom of the screen, and squishes everything to the left instead of most of them being fixed to the right.
The address is 009panelstheme.tumblr.com
Here's a screenshot in IE: http://i56.tinypic.com/2b30jk.png
Same thing in Chrome: http://i55.tinypic.com/2d8172o.png
I've tried the whole Doctype thing, and I found someone who said to add this line:
<!--[if IE]>
<style type="text/css">
#media screen {
* html {overflow-y: hidden;}
* html body {height: 100%; overflow: auto;}
}
</style>
<![endif]-->
But nothing I do works.
Any suggestions would be wonderful. Thank you so much.
Your attempt at adding a doctype failed. Using IE's Developer Tools (press F12), you can clearly see it's rendering in Quirks Mode. Changing it to Standards Mode in the Developer Tools makes it work.
When I look at the source, I see this:
<meta http-equiv="x-dns-prefetch-control" content="off"/><!DOCTYPE HTML>
<html lang="en">
...
The doctype needs to be the very first thing on the page!
Where does that meta tag come from? Can you move it into the head?
Speaking of which, further down the page I see this:
<header>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
header isn't what you should be using there. It's head. header is something else entirely.
Related
I built an HTML page to display it as an iframe and on desktop everything works fine. Now I would like to make it responsive and transform the layout of the content via media queries. I don't know what is going on but the HTML element keeps a width of 960px.
I used Atom and it gave me a HTML structure that I used for a simple test.
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<title>Viewport Test</title>
<style media="screen">
body {
text-align: center;
}
</style>
</head>
<body>
<span>TEST</span>
</body>
</html>
I use the dev tools of Chrome to test the responsive layout and I set the width of the window to 360px but the HTML document keeps at 960px.
I cant understand what's going on here.
Please help me and thank you.
I don't know if this is related anywhere to your question. Refer this once if it helps.
Discussed issue here.
thx #sao for spending your time to editing my post at first.
But does realy noone had any thoughts in this Case?
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;
}
This is driving me crazy. Firefox text is 1px lower than in chrome and ie. It's not a margin or padding issue on html or body, tried that. Doesn't seem to be a rounding issue either. Here is an image:
First "Hello" is Firefox 13, Second "Hello" is IE9 and "Hello World" is Chrome.
Here is the code (pretty simple):
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine and chrome frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pixel Bug?</title>
<style type="text/css">
html{
font-size: 100%;
}
body{
font-size: 1em;
line-height: 1.5;
background: white url('images/grid16.png') -4px -6px;
}
p{
margin: 1.5em 0;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>Hello World 2!</p>
</body>
</html>
Is it just a bug? What is going on here? I don't want a FireFox only work around, I just want to understand why this is happening.
EDIT:
Upon further research it seems to be a rendering bug, but it still confuses me. For example, the height of the text should be 24px. Which shouldn't really cause rounding errors that would cause this. Yet, if I change the line-height to 23px explicitly it lines up. I have no idea why.
EDIT2: Possible reason? https://bugzilla.mozilla.org/show_bug.cgi?id=442139
EDIT3: Lines up using a 20px font and 40px line height. Makes me think this is just so rendering bug. It's sucks cause 16/24 is pretty standard :/
See my earlier answer here::
CSS white-space and list-style-image do not stack in Firefox 11+
You are not using reset.css thus creating problems
Here you can find many links for the reset.css
Reason for using reset.css is because it will make all user-agent(browser) css to a base settings, so that they don't look different in different browsers.
Edit::
As the OP used the reset.css . I can't reproduce the issue. So the other reasons might be
Font rendering issue of different broser engine. No particuar fix Read more
Issue with hardware. Joel talks about it in his blog.
Also, I agree with what #steveax said.
Edit 2::
If you want to go in depth about it .
Raise a bug
Try tuning your browser yourself
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?"
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