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)
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
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.
I've setup a simple webpage, and there is a weird gap at the top which I don't know how to fix. Other sites I've developed haven't had this issue at all..?
Here's my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>sitename</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="wrapper">
lorem ipsum
</div>
</body>
</html>
And the CSS:
body {
background-color:#323232;
}
#wrapper {
width:960px;
margin:0pt auto;
background-color:#272727;
}
And here's a pic of the weird gap:
Is this just my version of FireFox acting up temporarily or am I doing something obviously wrong?
I think by default browsers do tend to add margin or padding to either the <html> or <body> element, I can never remember which.
Edit: as per other answers and comments (e.g. Rahool’s), looks like it’s margin on <body>.
So this should sort out your issue:
body {
margin: 0;
}
For every page, each web browser uses a set of default styles before any other css styles are applied.
Mozilla default style sheet
Internet Explorer User Agent Style Sheets
You will need to reset the styles applied by these default css.
Firefox applies default 8px margin to body element. To reset it,
body {
margin: 0;
}
Because the body tag default margin, and you need to reset it, such as:
body {
margin: 0;
}
Try adding
*{
margin: 0px;
padding: 0px;
}
Is margin treated differently in IE and Mozilla ? Because when I tried Mozilla 3.6 displaying margin correctly but IE 8 stretching it too far.
Here is my code
<div id="searchCriteria">
<table width="100%" border="1" bordercolor="#64A4F5">
</table>
</div>
<div id="searchResult">
</div>
Here is my css
#searchCriteria{
height:24%;
width:100%;
float: right;
display: block;
font-family:
verdana,arial;
font-size: 12px;
}
#searchResult{
height:70%;
width:100%;
float:right;
display:block;
margin-top:15px;
margin-bottom:5px;
}
Margin between searchCriteria and searchResult div is getting stretched in IE but working fine in Mozilla.
(It looks like in IE some space is coming between table element and searchCriteria div)
I tested your code In FF 3.6.13, IE7-8. I observed the issue only in quirks mode in IE, which probably means that you're either not using a Doctype declration or using IE in quirks mode. If you're using XHTML use:
<!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">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
</head>
<body>
<p>… Your HTML content here …</p>
</body>
</html>
If you're using HTML5 use:
<!DOCTYPE html>
See this for a list of other Doctype declarations to use.
height:24%;
Any certain reason to use percent values?
Anyway, I think it's probably Quirks Mode. Try adding <!DOCTYPE html> at beginning of document to see if it'll help.
Are you using a stylesheet reset? It's possible browser-inherited margins are conflicting with your design.
Eg.
div, table, td, th, tr, {
margin : 0;
padding : 0;
border : 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Here's a link to a more extensive CSS reset
It also may be helpful to use the developer tools (F12 in IE, and the Firebug extension in Firefox) to troubleshoot the discrepancy in your design--if you gather specific information (eg. there's 4px unaccounted for,) you will have a better change at spotting the problem.
P.S. Be extra careful when working with percentages--something like padding will compound the percentage values, resulting in overages. I'm actually not sure if your border : 1 compounds with 100% (resulting in 100% + 1px,) but just a helpful reminder.
Add a second margin-top declaration to your searchResult div like so :
margin-top:10px\9;
This will target only IE8 and below. Change the amount of pixel until it looks good to you.
Added height=100% to <table> and it works.
Thank you all for your suggestions :)
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