I am trying to understand the basics of CSS layouting and have some problem with a page being too high when I add a border.
Here comes my code:
<!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">
<link rel="stylesheet" type="text/css" href="KKF_00005.css">
<title>KKF 5: Border coping</title>
</head>
<body>
<div class="links_aussen">
<div class="innen">Rechts</div>
</div>
<div class="mitte_aussen">
<div class="innen">Mitte</div>
</div>
<div class="rechts_aussen">
<div class="innen">Links</div>
</div>
</body>
</html>
I use the following stylesheet:
#CHARSET "ISO-8859-1";
* {
height: 100%;
margin: 0;
padding: 0;
}
html,body {
background-color: grey;
width: 100%;
}
.innen {
border: 1px solid black;
}
.links_aussen {
float: left;
background-color: green;
width: 33%;
height: 100%;
}
.mitte_aussen {
float: left;
background-color: yellow;
height: 100%;
width: 34%;
}
.rechts_aussen {
float: left;
background-color: red;
height: 100%;
width: 33%;
}
And here is jsFiddle
My problem is that this code gives me a nice 100% layout horizontally but creates a scrollbar being to high verticcally. I would like to have no scrollbars but also see the borders (so overflow: hidden; will not help me in this one I think) - tested in Chrome and Firefox.
So: How can I tell my little browser that it should remove 2 pixels from the height so that I can have borders and no scrollbars?
Thanks in advance for any ideas and answers
André
Here is a solution for you using box-sizing: border-box. It also removes the need for the .inner div.
http://jsfiddle.net/mqchen/xHFvG/
EDIT: If anyone is wondering why this works, look down at Joakim Johansson's post. Now, back at this post. The box-sizing property simply redefines how the browser calculates the size of elements. More about it here: https://developer.mozilla.org/en-US/docs/CSS/box-sizing
This is because the default box model is content-box, and works like this:
The heights you set changes the "Content" part. So if you have height set to 100%, and border set to 1%, that will add up to 101%.
This is solved in different ways depending on what you're trying to do.
For example you can set the box-sizing attribute: http://www.quirksmode.org/css/box.html to make the height attribute work in different ways.
Can't for the life of me figure out a good solution right now (since relying on box-sizing isn't that compatible), but here's a bad one, using absolute positioning: http://jsfiddle.net/XhfmR/
Your problem is borders:
Instead of
.innen {
border: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/
Use
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/tt13/997zC/1/
When you write just border it adds borders to all sides of div. In your case, bottom and top border takes extra 1px, you're getting result 2px taller in height. That's why you see scrollbar.
And always use jsfiddle for this kind of questions.
.innen {
border: 1px solid black;
}
is your problem. It creates the vertical scrollbar.
To solve this, use this code:
.innen {
border-left: 1px solid black;
border-right: 1px solid black;
}
http://jsfiddle.net/yrLtz/
Edit: Maybe the best solution is box-sizing: border-box as #mqchen suggested.
Related
I am trying to make an experience bar with 2 <div> area. the longer <div> outside for the frame and the shorter inside for the current experience.
when I use {height: 100%} for inside <div> to fill up space, there is a gap between border and background-color when I change the display size of the browser to some certain %.
I tried it in chrome and edge browser and they have the same problem. I can fix the gap by changing {height: 101%}. I just wonder why there's a gap for 100% in some certain display sizes.
* {
box-sizing: border-box;
}
#bar-frame {
background-color: grey;
border: solid 13px black;
height: 70px;
width: 300px;
border-radius: 5px;
}
#bar {
background-color: black;
height: 100%;
width: 20%;
}
<body>
<div id="bar-frame">
<div id="bar"></div>
</div>
</body>
I expect there's no gap in the bar, but there's a gap show up in some certain display sizes.
CODEPEN link: https://codepen.io/ququ929/pen/zQWrZQ
English is my second language, hope you can understand the problem, thank you.
picture to show the problem
picture 2
what I expect for all display size.
Add border: 1px solid grey in you #bar CSS will resolve your issue. Thanks
#bar {
background-color: black;
border: 1px solid grey;
height: 100%; width: 20%;
}
3px double border on the left or right side of a div, however in chrome it is leaving a 1px gap at the top of the border. I have tried looking extensively to see if this is a browser bug or for some kind of solution.
http://jsfiddle.net/QSm2Z/2/
If you view the code in firefox/ie you get continuous black bar, in chrome and on my phone/tablet I am getting a 1px gap at the top of each div which breaks the black bar
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
height: 100px;
width: 100px;
border-right: 3px double #c7c7c7;
border-left: 3px double #c7c7c7;
background-color: #06F;
padding: 0px;
margin: 0px;
border-bottom-style:
}
</style>
</head>
<body>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</body>
</html>
Observations
There appears to be a glitch in the corner-shaping algorithm that leaves a mitered edge in preparation of meeting a border on a perpendicular edge even though there is not one.
I doubt this is the intended behavior, even though the spec states that:
This specification does not define how borders of different styles
should be joined in the corner.
You can see evidence of the mitered join with a 2 pixel solid border (screenshot):
If you look very closely, you can see the manifestation of another potential problem: the edges of the top and side borders don't touch (screenshot):
Workaround
This is complex/inelegant by comparison, but one way to fix the problem is to hide both the top and bottom edge of the offending elements. You'll need to adjust the dimensions for your actual site.
Example: http://jsfiddle.net/QSm2Z/10/
.test{
position: relative;
height: 100px;
width: 152px;
overflow: hidden;
}
.test:after {
width: 100px;
height: 102px;
content: "";
top: -1px;
position: absolute;
background-color: #06F;
border-left: 26px double #000;
border-right: 26px double #000;
}
Looks like a browser bug - it doesn't happen with regular solid borders - check this out: http://jsfiddle.net/QSm2Z/8/
Maybe related to this bug: https://code.google.com/p/chromium/issues/detail?id=61702
Im just wondering if this is a browser rendering issue or incorrect css.
A nice way to scale a div in a defined aspect-ratio is, using a transparent image as a child element.
I have a small demo here. Under need this question.
But why doesn't it work nicely if I want a height of 100%.
I tested this in FF10, Safari 5.1.2, IE8 and IE9. (only ie8 seems to render correctly...)
Hope somebody can explain the problem and maybe come up with a solution.
Regards,
Rik
<!DOCTYPE html>
<html lang="uk">
<head>
<title>test</title>
<style>
html
, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: green;
}
/* AUTO WIDTH - doesnt render correct when scaling the browser window to a smaller size */
.holder1 {
position: relative;
display: inline-block;
height: 100%;
width: auto;
background: yellow;
border-right: 1px solid red;
}
.holder1 .ratio {
display: block;
height: 100%;
width: auto;
}
/* AUTO HEIGHT - works fine */
.holder2 {
position: relative;
display: inline-block;
height: auto;
width: 100%;
background: yellow;
border-right: 1px solid red;
}
.holder2 .ratio {
display: block;
height: auto;
width: 100%;
}
</style>
</head>
<body>
<span class="holder1">
<img src="/images/empty_image.png" class="ratio" alt="Ratio image">
</span>
</body>
</html>
After view your question, I have some idea and suggest for your code:
1.Different between width:auto and width:100%, when you set auto for width, you leave the browser handle this width, with every different browser, they will handle width:auto follow their own rules. With width:100%, you force the browser must expand to have full width.That is what I think.
But for sure your div can expand 100% on every cross browsers, add css min-width:100%, it will do as you wish correctly.
2.About your CSS, I need you take a look at position:relative, this line of code have no sense, in this situation,
position:relative = position:static
when you use position:relative, you must describe where is the position you wish your element relative to, add top or left to do it.
Hope it can help you!
My problem is that ratio of width/height (for div with id="wrapper", different is huge) isn't the same on Chrome, Mozilla and IE (IE looks like refuse attribute for heigt at all). Any help, I need two divs fixed size, one beside other .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
div#wrapper {
width: 1000px;
width:700px;
margin-left:auto;
margin-right:auto;
overflow: hidden;
}
div#left {
width: 80%;
height: 80%;
min-height: 80%;
float: left;
background-color: #DFDFDF;
border-left-width:2px;
border-left-style:solid;
border-left-color:#606060;
border-bottom-width:2px;
border-bottom-style:solid;
border-bottom-color:#606060;
border-top-width:2px;
border-top-style:solid;
border-top-color:#606060;
}
div#right_up {
width: 19%;
height: 80%;
min-height: 80%;
float: left;
background-color: whitesmoke;
border-top-width:2px;
border-top-style:dashed;
border-top-color:#FF2A2A;
border-right-width:2px;
border-right-style:dashed;
border-right-color:#FF2A2A;
border-left-width:2px;
border-left-style:solid;
border-left-color:whitesmoke;
}
</style>
</head>
<body id="body"">
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
</div>
</body>
</html>
First of all you cannot use percentage heights on floated elements.
Second, I see no height set on the wrapper div
Make sure that your code validates: http://validator.w3.org/ . Fixing the little errors it find will remove a lot of variance between browsers.
For instance, you've specified the width attribute twice for #wrapper, which doesn't make any sense.
Hey Rebecca and welcome to SO! :)
First of all, I don't think you could ever get mixed measurements units act the way you want. You have divs width in percentages and border width in pixels, basically you're hoping that 1% will never mean more than 2px for the wrapper width.
Let's take it step by step. First of all, you have 2 widths for the wrapper div. The second will overwrite the first and you'll end up with a width of 700px. That's very little, you should reconsider to a width of 960px or a max. of 990px (which assures you won't have an horizontal scrollbar on 99.9% of the screen resolutions today.
Let's rewrite that to:
div#wrapper {
width: 700px; /* 700 to stick to your design */
margin: 0 auto; /* which is basically the same as you have, but in one property, not two */
overflow: hidden;
}
div#left {
width: 558px; /* 80% of 700px (wrapper div) minus the border width. It will never change so there's no need to set it in percentages */
height: 80%; /* height will overwrite min-height on FF for example. Also, min-height doesn't work in IE, setting a fixed height might be the best way to go */
min-height: 80%;
float: left;
background-color: #DFDFDF;
border: 2px solid #606060; /*set a border all over the div */
border-right: 0; /* and remove the right border */
}
div#right_up {
width: 140px; /* 20% of 700px */
height: 80%; /* same height problem as you have for the other div here */
min-height: 80%;
float: right; /* float right, not left like the other one */
background-color: whitesmoke; /* please set colors in hex, not like this */
border: 2px dashed #FF2A2A;
border-left: 2px solid whitesmoke; /* again, colors in hex please */
border-bottom: 0;
}
Also, add a div with class clear in the markup like this:
<div id="wrapper">
<div id="left">
REFERENCE:
</div>
<div id="right_up">
</div>
<div class="clear"></div>
</div>
And add a class definition in the css like this:
.clear {
clear: both;
}
The last advice is to allways put your CSS in an external stylesheet and reference it in your page in the head section of the HTML like this:
<link rel="stylesheet" type="text/css" href="path/to/style.css">
Good luck!
I am using Google Chrome 3.0.196.2 and I noticed that for some reason the #main div's background is shrunk a tad bit, even though it should not be. It tests fine in every other browser but chrome.
Anyone know why?
Link to site: link text
Even have a screen shot: link text
Notice the green on the right side is cut off, as well as things not lining up.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
#main {
border: 10px solid black;
height: 300px;
width: 1000px;
margin-left: auto;
margin-right: auto;
padding-top: 50px;
background: #AAA url("http://www.ipalaces.org/weird/mainbg.gif");
}
#picture {
border-top: 1px solid #EEE;
border-bottom: 1px solid #EEE;
height: 100px;
width: 1000px;
}
</STYLE>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<TITLE>Imperial Palaces</TITLE>
</HEAD>
<BODY>
<DIV id="main">
<IMG id="picture" src="http://www.ipalaces.org/weird/mainbg.gif" alt="picture">
</DIV>
</BODY>
</HTML>
This seems to be working OK on Chrome 2: http://skipall.com/2vb.jpg
Remember that Chrome 3 is still in beta, it's possible this is just a bug (I'm not sure, of course).
To debug, I think I'd zero-out the paddings and borders - check for differences, then try substituting the IMG for DIV tag to check if it's the container or IMG at fault. Maybe even chuck in a couple of outline properties to see exactly what's going on:
#main {
padding: 0;
}
#picture {
border: 1px solid #EEE;
border-width: 1px 0;
}
/* and later... */
#main, #picture {
outline: 1px solid red;
}