This is my 'brevity' HTML
<html>
<head>
<style type="text/css">
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% 36.1em;
overflow-x:hidden;
}
</style>
</head>
<body class="custom one_sidebar">
<div class="header_area"></div>
<div class="content_area"></div>
</body>
</html>
The problem is that the background image location does not work in IE7. It does in IE8 and just about every other browser. Would like some help in figuring out why.
that is because you mix up percent & em in the position.
For IE7 you have to use 2 times the same, percent/px or em:
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat 50% value%;
overflow-x:hidden;
}
or
body.custom.one_sidebar {
background:#f5f5f5 url('img/bg/bg-content.png') no-repeat value_em 36.1em;
overflow-x:hidden;
}
First, be sure you have a Doctype selected, as without one, it will trigger Quirks mode and IE will not render some shorthand background properties correctly (or at all).
Try adding display: block, and a proper width and height to the sidebar CSS. IE has known issues with rendering some properties when the element isn't strictly defined as a block element.
Related
I'm really new to coding so please be gentle and keep your answers simple!
I'm trying to add a button that will scroll the page horizontally by the full-screen width, however, my code is scrolling about 20px short.
Does anyone know why? And the fix?
Many thanks - code below.
<!DOCTYPE html>
<html>
<head>
<style>
body {
width: 400%;
}
button {
position: fixed;
}
</style>
</head>
<body>
<button
class="btn2", onclick="scrollWin((window.outerWidth), 0)">ᐅ</button><br><br>
<script>
function scrollWin(x, y) {window.scrollBy(x, y);
}
</script>
</body>
</html>
This is caused by the default margin set to the body tag. To set this margin back to 0,
body {
margin: 0 !important;
}
As it states in W3 in schools, the default margin set to the tag is 9 pixels, making it 18 pixels both wider and longer than desired, and thus complying with your statement,
my code is scrolling about 20px short.
Also, to prevent the browser from occasionally ignoring your manual margin setup, an !important is required.
Results: Click Here
After pulling all my hair out it has come down to this minimal html page that seems to be rendering wrongly on iOS:
<!doctype html>
<html>
<head>
<style type="text/css">
#fold
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
}
</style>
</head>
<body>
<div id="fold">
</div>
<div id="features">
</div>
</body>
</html>
When viewing in iOS (or for that matter in the iOS simulator) you can see a while line between the two blue divs.
This white line disappears if you zoom in. And of course it's not visible in any other desktop browser I've tried, either.
So, am I going nuts or is anybody else getting this? Any idea how to work around it?
It could be construed as a bug (I think it is) - but it has to do with the way iOS handles background images.
The quick answer - add a negative margin to one of your elements. See this JSFiddle.
The relevant portion is this:
#features
{
background:url(https://s3.amazonaws.com/gigantt_pub_imgs/2012/07/1342078193.png) top left;
min-height:350px;
margin-top: -2px;
}
You can target this using media queries.
I made a web page with the following code and viewed it in Google Chrome.
<html>
<head>
<style type="text/css">
html {padding:30px; background-color:blue;}
body {margin:0px; background-color:red;}
</style>
</head>
<body>
hello world
</body>
</html>
The result is what I expected, a red box with a 30 pixel blue border that fills the entire web browser window. However, when I view it in Firefox, the red box is only the height of one line-height. In IE8, there is no blue border.
How do I make Firefox and IE8 display the same thing as what I see in Google Chrome?
Additional notes I tried adding different doctype tags to the page, but that only made it appear like Firefox, that is, the 1 line-height of red.
For this I think you have to resort to absolute or relative positioning; otherwise, your height/margin combo will push the bottom blue line off the screen. This works cross browser for this simple case. Hopefully it works for your more complicated use case.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body { background:blue; }
.first{
position:absolute; /* fixed also works */
background:red;
top:30px;
left:30px;
right:30px;
bottom:30px;
}
</style>
</head>
<body>
<div class="first">hello world</div>
</body>
</html>
if i understand you correctly, set your html & body width to 100% , height 100%
http://jsfiddle.net/Diezel23/Lv6Vw/#base
You could add an additional div:
<html>
<head>
<style>
body {
padding: 30px;
margin: 0px;
}
div {
width: 100%;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div>
ABC
</div>
</body>
</html>
Why does this create a veritcal scrollbar in IE6, IE7 and IE8? How to avoid it?
(I had a real applet in there, but I discovered that this heavily mutilated one gave the same result and helps simplify the test case)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Why vertical scrollbar in IE?</title>
<style>
HTML, BODY {
height: 100%;
}
BODY {
padding:0;
margin:0;
}
/* And yes I can use this, but I'd rather not
BODY {
overflow-y: hidden;
}
*/
</style>
</head>
<body>
<APPLET WIDTH = "100%" HEIGHT = "100%"></APPLET>
</body>
</html>
Above also available as http://www.morch.com/download/ieVerticalScrollbars.html
applet {
display: block;
}
To prevent rendering the applet as an inline-element, which enforces line-height rendering.
Add position: absolute; to the applet's style.
Try bringing the height down to 99% or 98%. Or try throwing in some more thorough reset CSS. Don't ever use overflow-y on a body element. Terrible usability.
Thing 1 -- CSS/overflow
Here are the CSS settings you can work with (if they help): http://www.w3schools.com/Css/pr_pos_overflow.asp
Thing 2 -- CSS-erize the scrollbar itself (i.e., turn it completely white, or whatever works for your page.: http://www.draac.com/css/csstricks.html (scroll down a ways)
I want my page's BODY not to be scrollable but a DIV inside the BODY should be scrollable.
I have this in my css file:
body {
overflow:hidden
}
.mainSection {
overflow:scroll
}
but it doesn't work and the DIV doesn't become scrollabel (it just shows two disabled scroll bars for the DIV)!
.mainSection needs to have a height. Otherwise the browser can not know what it should consider overflow.
Are you sure the style for your mainSection class is being applied? You can use a tool like Web Developer or Firebug (for Firefox) to make sure that the style is being correctly applied. Also if you just have one mainSection, you might want to use an id instead of a class. the tag in html would then be <div id="mainSection"> instead of <div class="mainSection"> and the css becomes #mainSection { ... } instead of .mainsection { ... }
Here is the whole thing well explained
http://www.w3schools.com/css/pr_pos_overflow.asp
You can experiment.
I had the same problem before, but I could manage to solve it just with overflow: auto;. Try it and it will work.
Updated
The full html code looks like this
<html>
<head>
<title>Test page</title>
<style type="text/css">
#scrollable_div{
overflow: auto;
width: 100px;
height: 100px;
border: solid thin black;
}
</style>
</head>
<body>
<div id="scrollable_div">my div text</div>
</body>
Works perfectly in any browsers. I tested myself in Chrome, IE, Safari, Mozilla, and Opera