Forum Moderators: not2easy
I have a small problem with my CSS - quite simply the rendered page is always a single pixel larger than the viewing area.
This is obviously not a groundbreaking problem, but the perfectionist in me screams at the unnecessary scroll bar it creates.
Here is a simple test case reproducing the problem (I tried in Firefox and Konqueror):
<?xml version="1.0" encoding="UTF-8"?>
<!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"><head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
margin: 0;
}
.bar {
border: 1px solid #000000;
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<p>foo</p>
</div>
</body>
</html>
Any help would be much appreciated.
not sure why that would make a difference though.
but div's are block-level elements anyway, so it is aready assumed that they have a width of 100%. so there's no real need to include it.
It's the border. Remove the border and fill it with a BG color, it's fine. Apparently width is width and border is added, so it's 100% + 2 pixels (not one, try border-left only, still scrolls.)
You could just specify border top and bottom if you really need to specify 100%.
Your code is instructing the browser to make the .bar wider than the viewport:
You instruct the bar to have it's content (the inner most box) to be the width of the viewport. then you draw a border of 1px wide around it: so it'll be 2 pixels too wide for the viewport.
The trick is to remember that when you set width and height, you set the width and the height of the content, not of any of the boxes around it (padding, border and margin still go around it).
See the drawing in the standard:
[w3.org...]
The box model article was an interesting read, and got me thinking in some different ways of a solution - which I achieved.
For anyone who encounters this problem in the future, I solved it by adding a margin-right: 2px to the body clause.
Thanks again for the assistance!
