When I put an input of type text inside a form the input overflows the form by 4 pixels; this only seems to occur when width is 100%.
id est:
<html>
<head>
<title></title>
<style>
input { width: 100% }
</style>
</head>
<body>
<form><input type="text" /></form>
</body>
</html>
Why does this occur?
http://jsfiddle.net/3y8bmqfw/
Because most browsers create a 2px border around <input type="text"> elements. 2px left + 2px right = 4px. Since the width does not count the border, if width = 100% of the container width, the 4px of border overflows the container.
One possible way to correct this is to apply box-sizing: border-box to the element to have the browser calculate the size of the box differently (including padding and border).
Related
I have a box 940px in width and a height of 40px
<!doctype html>
<head>
<meta charset='utf-8' />
<title>Html Positioning</title>
<style type='text/css'>
.top{
width:940px;
border:1px solid pink;
display:block;
min-height:40px;
}
.orange{
font-size:16px;
background-color:orange;
}
</style>
</head>
<body>
<p class="top"><span class="orange">v</span></p>
</body>
</html>
I have the character v with a font-size 16 px highlighted and i was wondering how much width and height the character highlighting takes.
I have the fiddle http://jsfiddle.net/thiswolf/hzm65/
Does css offer a way of knowing the width and height of such highlighting?.
By “highlighting”, you apparently refer to giving an element some special background color.
There is no way to know the dimensions in CSS. The width is determined by the metrics of the glyph. The height is determined by the line height of the element (which is in the sample case determined by the browser default line height for the browser default font in the given font size).
In JavaScript, you can query them using the offsetWidth and offsetHeight properties.
Hi,
I created a small popup with div of height and width 500px.Whenever I display it directly,It looks good.But When I put display:none by default and make it visible whenever I click the button,the popup is displayed with no height and width...Can anybody tel me the reason.....
<!DOCTYPE HTML>
<html>
<head>
<style>
div{
width:500px;
height:500px;
border:1px solid black;
background:#988858;
border-radius:14px;
box-shadow:5px 5px 10px #666633;
display:none;
}
</style>
</head>
<body>
<button class="button">Click</button>
<div id="Popup">
close
</div>
</body>
<script>
document.getElementsByClassName('button')[0].addEventListener('click',showPopup,false);
function showPopup(){
//document.getElementById('Popup').style.width=500+'px';
//document.getElementById('Popup').style.height=500+'px';
document.getElementById('Popup').style.display='inline';
}
function closePopup(){
document.getElementById('Popup').style.display='none';
}
</script>
</html>
Inline elements don't preserve width and height, you need to set the display to block.
document.getElementById('Popup').style.display='inline';
^^^^
display inline does not support the height and width so use block
display:inline doesn't support width and height. Try display:block.
Can not use initial and inline properties of display here. flex and inherit are more suitable (alignment is same as when div loads for first time). apart from that you can use inline-block, block and inline-flex. Try flex :)
Look at this simple page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body {padding:20px;}
#outer {background-color:#ff0000;}
#inner {width:500px; border:1px solid #0000ff;}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<p>Why the hell outer div bg color does not expand?</p>
<p>Why the hell outer div bg color does not expand?</p>
<p>Why the hell outer div bg color does not expand?</p>
</div>
</div>
</body>
</html>
When browser page is shrinked below the width of <div id="inner"> (i.e. 500px in this example) and then you scroll browser page to the right, you will see that the right side of the inner div does not have the red background anymore:
Do you know how to fix the background of the outer <div> in order to make it never shrinks below the inner <div> width??? (I still need the outer div background to expand to full browser width so it can not be set to width:500px; too).
EDIT: in other words I would like to see the red background color of the outer div to fill the total 500px width of the inner div and not to shrink to browser size leaving the right side of the inner div with no red background. In order to do this I can not simply set the outer div to be 500px too because when browser is expanded I need the red background color to expand too.
Add this to your css
#outer {background-color:#ff0000; min-width: 500px;}
That's because your inner div is overflowing from the outer div, and not making it expand. Adding overflow: hidden to your outer div, will prevent this from happening by hidding the part of the inner div that overflows.
You can see a demo of that behavior here: http://jsfiddle.net/p6BQg/
More about the CSS overflow property here: http://www.w3schools.com/cssref/pr_pos_overflow.asp
EDIT: To keep the background color on the inner div please see this example: http://jsfiddle.net/p6BQg/1/
body { padding: 20px }
is causing the issue you see. removing that will prevent the "shrinking" as you call it.
for example: http://jsfiddle.net/MvJTa/
Here is my code:
i am assuming am doing something wrong, but am expecting the padding on the right to also be 2px?
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid 1px gray;}
#outer{width:200px; padding:2px;}
#inner{width:100%;}
</style>
</head>
<body>
<div id="outer">
<div id="inner"> </div>
</div>
</body>
</html>
Render:
Your problem is that you have specified the size of the inner box to be the same size as the outer box. Set the width to auto and your problem goes away.
The padding makes an extra invisible box around your object, so the actual size of the outer is more than 200. However, inside it is 200. Same with the border. On the inner box, when you then specify it to be 100% it will be 200px, but the border will take up 2px, making an offset that makes it look like the padding is not being applied.
div is a block level element, which by definition will expand to take up the full width of its parent container taking into account any margins, padding and borders. specifying the #inner width to 100% is effectively the same as setting it to 200px. Just remove the width declaration and you'll be all set.
I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding, but why with this sample, if you uncomment the border: line in the containing div, does the background color of the div extend above the first paragraph while if you have no border it doesn't?
<html>
<head>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<title></title>
<style type="text/css">
#container {
background-color: green;
/* border: black solid 1px; */
}
p { background-color: red;
margin-top:50px;
margin-bottom: 0px;
border: black dotted 3px;
}
</style>
</head>
<body>
<div id="container">
<p>first paragraph</p>
<p>second paragraph</p>
</div>
</body>
</html>
I understand that the height of a box in CSS is the height of the contents, excluding the margin and padding
Wrong: it includes padding and border (except in Microsoft Internet Explorer due to a bug and now for compatibility reasons (if using quirks mode rendering)). Read up on the CSS box model:
The content edge surrounds the rectangle given by the width and height of the box
where the content edge is the edge running around the outside of the border.
#aizuchi,
First of your CSS has an error. Check for "pic" right to "margin-bottom".
Second of all add "overflow:hidden;" to #container element, once you haven't set siez of parent element you must have this tag to tell parent which size to use. It will make #container to use height of child element at it's own (#container) which is probably the problem in your CSS besides "pic".
Third of all, Google box model bug in IE6 to understand difference between our "beloved" ie6 and other browsers.
Fourth of all
it is better to use
<LINK rel="StyleSheet" href="style.css" type="text/css" media="screen" />
instead of
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
Margin is on the outside of a border and padding is on the inside of a border, so your top margin would cause the margin to exist above the border. If you want the padding between your paragraph and border use padding not margin. The size of the div will be determined by the margin, padding, and border. They will all contribute to the size of the div.