I run into this, and I am not sure why it is happening...
Taking the html below as an example, as it is, it will display grey areas for the sections as instructed by the CSS. However, when I include <!Doctype html> in the first line it breaks down.. Furthermore, the code below does not work at all with IE9.. why?
Many thanks in advance.
<html>
<head>
<style type="text/css">
.sec_class{
width:50%;
height:15%;
border:1px black solid;
padding:0px;
position:relative;
background-color:grey;
}
</style>
</head>
<body>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
<section class = 'sec_class'></section>
</body>
</html>
Your sections have basically no height, because height given in the percentage (height: 15%;) will always be relative to the parent's height. body has zero height in your case, and the 15% of that is still zero.
This should help:
html, body { height: 100%; }
jsFiddle Demo
Be sure to ALWAYS include the doctype.
In order to make IE styles HTML5 tags (section, nav...) you must use a polyfill, because it can't by default. You can use: http://code.google.com/p/html5shiv/
It's just a JS file that you must include on your HTML (using IE conditional comments):
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Also you should not use single quotes:
<section class="sec_class"></section>
Also, of course, if you are setting a porcentual height on your section elements, his parent must have also a defined height. On your case, a 15% height of nothing (body has no height) is… nothing.
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.
Im a newbie to CSS and created this html file for my testing...but the results are not what I expected..
Here are my questions,
What would be the correct width of my IE window.
What would be the perfect height of my window..When I specify a value nothing changes.
I have created 3 divisions- Header, Footer and content..When I view it..there is a big space between each of these sections..Why do they occur?
Code follows:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background-color:#d0e4fe;
width:1400px;
height:1000px;
}
h1
{
color:orange;
text-align:center;
}
#div-1
{
background-color:red;
}
#div-2
{
background-color:Green;
}
#div-3
{
background-color:Blue;
}
</style>
</head>
<body>
<div id="div-1">
<h1>Header<h1>
</div>
<div id="div-2">
<h1>Content<h1>
</div>
<div id="div-3">
<h1>Footer<h1>
</div>
</body>
</html>
The width on your body tag should be set to "width: 100%;" This will cause the body tag to take up the entire width of the window, and your colored div sections will also stretch the full width.
You can set the height on the body tag to either "height: 100%;" or "height: auto;". Depends on what you are doing exactly.
The space is coming from your h1 tags you have inside each of those divs. They have a browser-defaulted margin set to them. If you set the css property to "margin: 0px" that should eliminate all that extra space.
First, you don't define the width or height of the window in CSS. It just doesn't happen. You may specify the width of particular elements on your page, but that is a slightly different matter. Remove your height and width properties.
Second, your divisions have spaces between them due to the default margins that are set on h1 tags. If you want to remove them, then set margin: 0 on your h1 in your CSS.
Third, you may want to check out this CSS tutorial at HTMLDog
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.
I wonder why does this style not work in IE and FF, but in Chrome ONLY
#show{top:10%; position:relative; margin: 0px auto; width:100%;}
[Edit]
If I want to make the same work in IE and FF, what do I have to do
Thanks
Jean
Can you provide the relevant HTML markup too? And which version of IE you are using.
One problem could be additional CSS styling that the element with ID 'show' inherits.
To separate styles between IE and FF, Chrome, etc use Conditional Comments.
<!--[if lt IE 9]>
<link href="path-to-file/IE.css" rel="stylesheet" type="text/css" />
<![endif]-->
This will tell IE to use a different stylesheet than IE, FF and other browsers.
IE is a beast that won't work without some trial and error, so set up that stylesheet and play with it til it does what you want.
To separate styles within your stylesheet, use this; it's a great resource and has helped me a great deal! CSS browser selectors. It's a Javascript plugin that will read any styles that start with .webkit, .ie, etc and apply those styles only to that browser.
Are you trying to position your #show div 10% down from the top of it's containing div? If so try this:
html:
<div id=#your_container>
<div id=#show>
Content
</div>
</div>
css:
#your_container {height: 200px; position: relative}
#show {top: 10%; position: absolute}
top:10%; position:relative;
10% of what? For a relative-positioned element, percentage dimensions are measured relative to the parent element's size. Does the parent element have a height: applied? If it doesn't, that's why you're getting no movement: you're saying “move the top by 10% of ‘auto’, which is an indeterminate amount”.
If you want 10% of the browser viewport height, you must tell every element between the root html and the element you're positioning to use the full height of its parent. ie.:
html, body { height: 100%; }
The code is as below:
<html>
<head>
<title>test</title>
</head>
<body>
<div><span>shanghai</span><span class="margin"> </span><span>male</span></div>
</body>
</html>
.margin {
width:40px;
height:auto;
}
You can't give it a width because it is an inline element.
This property specifies the content
width of boxes generated by
block-level and replaced elements.
This property does not apply to
non-replaced inline-level elements.
-- CSS 2.1 Width property
You can fix this by making it a block or inline-block element instead:
display:inline-block
However, this may not be supported by some browsers. You can probably achieve the same result with this, however:
margin-left:40px
CSS should go into the head section and should also be wrapped in < style > tags...
Unless you are accessing this value from a stylesheet. You would need to reference this in the head section of your document:
<link rel="stylesheet" type="text/css" title="RSS" href="MyStyleSheet.css">
You should indicate that this is a CSS rule : Ways to include CSS in your page.
put
<style>
.margin {
width:40px;
height:auto;
}
</style>
I think the problem is that the tag is empty. Just put " " between the two tags.
Try changing you class name maybe?
margin is an attribute. I'm not sure if CSS has reserved keywords though.