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?
Related
we have a kind of "note-function" on our portal and when I try to print this site, it's size is fine on Chrome and Internet-Explorer, but will be too small on Firefox. When i set the scale to 90% in Firefox, it looks like the Chrome/IE Version.
I tried to manipulate the body with scale() per media print, but than it looks strange...
Is there a way to manipulate the Firefox printing-option scale per css/js? Or does anyone else had this problem before? :/
I am pretty sure our customer won't listen when I tell him "Yeah just let the users change their printing options" :D
Here some Screenshots to explain what i mean:
How it should look, and looks in Chrome and IE without problems
I would try overriding your CSS when using firefox like this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#-moz-document url-prefix() {
h1 {
color: red;
}
}
</style>
</head>
<body>
<h1>This should be red in FF</h1>
</body>
</html>
See Here Targeting only Firefox with CSS
Hope it helps :)
I am new to HTML and learning it from w3schools. I am looking at object tag and trying to display a pdf in a browser. I am unable to understand why the height attribute doesn't work in below code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>try here</title>
</head>
<body>
<object data="redBus_Ticket_25718916.pdf" type="application/pdf" height="100%" width="100%">sample</object>
</body>
</html>
I am expecting the entire page to be a PDF document. but what I see is,
Can some one tell me reason for such behavior ?
Interestingly when I remove the definition, it works as expected. Don't know how they are related.Please help me in understanding the behavior.
In CSS or wherever, also set heights for html and body,
html, body{
height: 100%;
min-height: 100%;
}
I think the problem is that your content is small, so the document itself doesn't take much space, and hence 100% of document doesn't show in the entire page.
Without setting min height and height for html and body,
JSFIDDLE 1
After setting min-height and height for html, body,
JSFIDDLE 2
<script>
$('object').attr({'width':$( window ).width()})
$('object').attr({'height':$( window ).height()});
</script>
<object data="index.html" type="text/html"><p>This is the fallback code!</p></object>
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'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.
I have identified a strange problem in Internet Explorer and Chrome: I have a simple HTML table with no layout CSS, 2 columns, no styles, and width set to 100%. When I attempt to print this table in Internet Explorer (all versions) and Chrome, the first cell on the 2nd page and later is dropped.
Snippet of the HTML:
<html>
<head></head>
<body>
<table width='100%' cellspacing='0'>
<tr><td align='left'>Date</td><td align='left'>Order No.</td></tr>
<tr><td align='left'>5/24/2011</td><td align='left'>287426</td></tr>
<!-- SNIP :: Many more rows -->
</table>
</body>
</html>
The entire table can be found at:
https://gist.github.com/1000367
The output in the Print Preview on Internet Explorer, for page 2 looks like:
I have added the colored lines and circle to highlight that the left cell is missing.
Any ideas?
I've tried adjusting cellpadding and margins on the outside of the table, with no luck. As suggested, I have also added the following css rules with no effect:
BODY { margin: 0px; padding: 0px; }
IE has issues printing when the doctype isn't set correctly. Try adding a doctype at top of the page. In my test adding <!DOCTYPE html> to the top of your sample fixed the issue.
Just a thought, but you may want to investigate a different css file for print media. This is a common practice, but I am not sure exactly off the top of my head what to suggest for your specific issue. Its been a couple of years since I had to do markup for printing in detail.
I use Blueprint CSS for my sites now and it has a separate css file for print. http://www.blueprintcss.org/ Could be you just need a print specific resent like blueprint offers.
I have a feeling it is because of the 100%. It might be better to set a fixed size link 400px for the table.
I have the same issue. The web page I am trying to fix is not HTML 5, and has the following DOCTYPE...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
... but even changing to HTML 5 ...
<!DOCTYPE HTML>
... did not help. I found that a META tag was also causing this problem...
<META content="IE=5.0000" http-equiv="X-UA-Compatible">
... when I removed this meta tag even with the HTML 4 DOCTYPE it displayed correctly.