We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.
However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.
I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work. The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine. It also works as expected in Safari + Chrome.
Any ideas?
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style>
/* Styles from existing style sheet */
html, body {
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
overflow-x:hidden;
}
/* Overrides */
html, body{
width:auto !important;
height:auto !important;
overflow-x:auto !important;
}
</style>
</head>
<body>
<iframe src="http://starbucks.com"></iframe>
</body>
</html>
Tried overflow-x: visible; instead? Also I don't believe the !importants are necessary.
Related
This code works:
<html>
<head>
<style>#a { height: 100%; }</style>
</head>
<body>
<form>
<textarea id="a"></textarea>
</form>
</body>
</html>
and produces a 100% height textarea.
If we add <!DOCTYPE html> on top, it doesn't work anymore (the height isn't 100% anymore).
Why? According to here, it seems that adding this DOCTYPE is making it HTML5. Why would HTML5 break the height: 100%;?
When you use of <!DOCTYPE html>,you are in standard mode and html and body have height equal his inside content,so you must use this code:
html, body, form, #a {
height:100%;
}
but when you don't use of DOCTYPE you are in quirks mode and , html and body have default height equal 100%,only use this code:
#a {
height:100%;
}
UPDATE
Margin for html and body needed to be 0 to fill page completely.
END UPDATE
*UPDATE*
I have fixed using the below suggestion of adding the height property to the html and body tags. Now there is a slight scroll down required to view the entire page. Ideas on why this is happening?
END UPDATE
I am using CSS to make a div fill the screen as needed. I've got width and height set to 100%, but the div doesn't fill the height of the screen. Is this a known issue with IE7 or am I possibly just missing something? Code below.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"></div>
</body>
</html>
CSS
#divy
{
width:100%;
height:100%;
background-color:Blue;
}
The issues is the container must have height of 100% for it's child element to assume 100%...
In this case the container is <html> -> <body> so a quick fix would be
html, body {
margin: 0;
padding: 0;
}
html, body, #divy {
width:100%;
height:100%;
}
The element fills the height of the body element, which can be smaller than the browser window.
Set the height of the html and body elements, so that they fill the window:
html, body { height: 100%; }
Whenever you are defining a 100% height, it's ancestors or all subsequest ancestor, must have 100% as their height as well.
So, give 100% height, to the body, as well as html.
html, body { height: 100%; }
You can manage this issue with jQuery:
jQuery('.yourDiv').height(jQuery('body').height());
I have an iframe for which I would like to enable a horizontal scroll bar, but disable the vertical scroll bar.
I have the iframe styled as such: overflow-y:hidden; overflow-x:auto;
This works just fine in FireFox, but not Chrome. Is there any sort of workaround to get this to work in Chrome?
Update:
I have transitioned into using a table cell with overflow, rather than an iframe. I don't know if this will make it easier or harder to work around that vertical scroll.
The answer is actually here:
Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar
Good luck!!
This works well in any browser
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Untitled 1</title>
</head>
<style type="text/css">
#test iframe {
width: 100%;
height: 100%;
border: none; }
#test {
width: 100%;
height: 3530px;
padding: 0;
overflow: hidden; }
</style>
<body style="margin:0;">
<div id="test">
<iframe src="http://stackoverflow.com/" scrolling="no">
</iframe>
</div>
</body>
</html>
If you cant find anything else:
Put the height of the iframe to =>103%
See here:
http://forums.aspfree.com/web-layout-43/horizontal-scrollbar-iframe-removing-23237-2.html
It is workaround that might just work...
You tell me!
Good luck
Add parent div element to iframe like this:
<div style='overflow: hidden; width: 600px; height: 400px;'>
<iframe src='http://www.website.com/index.html' style='overflow-y: hidden;' width='580' height='400' frameborder='0' seamless='seamless'></iframe>
</div>
It will hide vertical scroll bar but user could still use 'page up', 'page down' and arrow keys options for vertical scrolling.
I have a design which needs two background images and must work in IE. So I decided to place 1 image on the html tag and the other on the body tag. So my page looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<p>Lorem...</p>
</body>
</html>
Then a very basic css like so
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; margin:0; padding:0; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; }
The only browser to render this correctly is IE7. Opera, Chrome, FF all place a ~20px margin at the top. I can remove this margin by adding some hackity css like so:
html { background:url(../img/bg.jpg) top center no-repeat #0094d4; position:relative; }
body { background:url(../img/bgRep.png) repeat-x; margin:0; padding:0; top:0; position:absolute; width:100%; }
However why does it not work to begin with, why do I need the extras? Is it a bug or a bug by design?
EDIT: It does appear to be a bug. When I remove the <p> tags then it acts correctly however with them it does not.
Instead of using a margin for the <p>, use padding instead.
And as someone mentioned above, it is caused by collapsing margins.
I have the following code which, as expected, shows a grey rectangle in both Firefox and IE. As soon as I add a DOCTYPE (HTML 4.01 Transitional) in front, it shows only a blank page. The online validator says the document is OK. What is wrong? Should I care about DOCTYPE?
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750;
height:548;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
You need to specify the units for your width and height. I assume you're going for pixels so:
#gallery
{
width: 750px;
height: 548px;
background-color: #f0f0f0;
}
You haven't specified the units of measure for the height and width attributes in your CSS. Without a DOCTYPE the browser will attempt to render the page as best it can (QUIRKS mode), in your case I think it probably guessed the correct units. By adding the DOCTYPE you have told the browser to follow a very specific set of instructions when rendering the page - no guessing that you wanted pixels instead of percents.
Your CSS was buggy.
width:750px; /* PX!! */
height:548px; /* PX!! */
Then add the doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<style type="text/css">
#gallery
{
width:750px;
height:548px;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="gallery">
</div>
</body>
</html>
The definition of height and width should be in pixels, em's or percentages, e.g:
width: 750px;
height: 548px;