CSS positioning inconsistencies in browsers - html

I was just playing around with CSS positioning and I have got a few doubts regarding the the elements being rendered in browsers? Would someone please explain to me why this is?
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div style="background:#ccc;height:150px;width:300px;">
parent div
<div style="background:#ff0;height:50px;position:absolute;">
child div
</div>
</div>
</body>
</html>
1.Why is the child div being displayed in-line with the content of the parent div in IE6 but not in Safari?
2.And when I positioned the child div absolute,it lost its width? But if I specify width:inherit it gets its full width back in Safari but not in IE6[i know inherit is not supported in IE].
Thank You

Absolutely-positioned block-level elements are supposed to live in their own formatting context. Furthermore, since div is a block-level element, the child is supposed to go on a new line instead of inlining with the parent's content. And of course, one can't expect IE6 to know all this.
Absolutely-positioned block-level elements do not expand to fit their container if you do not give them a width.

Related

embed pdf in html height doesn't streach

I am trying to embed pdf in my html page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>GetPDF</title>
</head>
<body>
<object data="/Content/Exams/2016/T205_16.pdf" type="application/pdf" width="100%" height="100%"></object>
</body>
</html>
but when I run this I'm getting width of 100% (good), but the height is only like 100px and not 100% as expected.
By default HTML block elements (including the <html> and <body> elements) are only as high as their content. That is, they 'shrink' to fit the height of their content. The PDF object has its height property set to 100%, but since this is 100% of its parent, not the viewport, and the PDF's parent is shrinking to fit content, the PDF object will display at its minimum height.
You need to set the PDF object's parent (the <body> elements) to be the height of the viewport. This is done easily with CSS - simply set the <html> element's height CSS property to 100% to make it fill the viewport, and then also set the <body> element's height to 100% to fill the <html> element.
Add this code to your <head>:
<style>
html, body {
height: 100%;
}
</style>

<!DOCTYPE html> prevents relative css heights

(Everything is tested in the latest firefox.)
This html-code creates an almost screen-filling red box:
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
But adding a doctype declaration disables relative heights and makes the div's height zero:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="height:100%;background-color:red;"></div>
</body>
</html>
Why is this? In particular, I don't get why browsers consider relative heights in a document without doctype, since they don't in explicit html ones.
A doctype enforces a certain set of standards for the browser. If a page does not include a doctype, browsers will usually use some kind of quirks or transitional mode, which is more lenient about markup mistakes (but is bad practice and may display items incorrectly).
Essentially, strictly speaking, you can't set that element to height 100% using that browser's set of standards. It'll try to predict what you wanted to do if you don't include a doctype or include a transitional one and adjust the page's styling accordingly.
You can do it this way: http://cdpn.io/aHlCd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
html, body {height: 100%; margin: 0; padding: 0;}
div {min-height: 100%; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
You can also just set height on the div rather than min-height.
The above is the answer to why, if you were looking for a fix, setting the position to absolute and applying top,right,left and bottom should do the trick:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="position: absolute;height:100%;background-color:red;bottom: 0;top: 0;right: 0;left: 0"></div>
</body>
</html>

add CSS animation to a website with background picture

The question is very silly but I've never created a webpage so please do not immediately downvote. AND please don't tell me to watch totorials, I really need to do something like described below only once. For some reasons, I need to make a really simple webpage, containing only a background picture and a CSS3 heart animation I found around. I need the CSS heart animation to be postioned on the left corner with a 100px margin from bottom, overlaying the other image I use as background What do I need to add to HTML to achieve that?
my HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
</style>
</head>
<body/>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
And the CSS I'm trying to use
SO has very poor CSS formatting so I added the CSS code to pastebin.
Please note that I never worked with CSS and need a detailed explanation. Thanks.
Create a
<div id='bigwrapper></div>
and style it with
#bigwrapper{
width:100%;
height:100%:
}
and the picture of your heart in there. After that, apply the needed CSS
The HTML markup needs work, because without properly formatted tags, several things may not work. You need to open and close tags properly.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test page</title>
<style></style>
</head>
<body>
<center><img src="sbg.jpg" width="1280" height="800" alt="bg" /></center>
</body>
</html>
The center tag has been deprecated in HTML5, and the transitions you are using only work with HTML5 and CSS3.

image positions not working

I can't seem to get boxclosed1.png to stay in the same spot if i re-size the browser. does anyone have any ideas? i'm testing in chrome. I tried to follow what was posted at this link: CSS: position absolute fails in resizing
EDIT:
so i tried taking out all the other items (grass etc) and then it seems to be positioned correctly. in this case, what do i need to change about my current setup in divs and styles to make this work together?
Code:
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml11/DTD/xhtml11-strict.dtd">
<!-- START HTML -->
<html>
<!-- START HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="css/27.css" />
<!-- END HEAD -->
</head>
<!-- START BODY -->
<body>
<div id="cont">
<img class="animated bounceInDown" src="boxclosed1.png" alt="Malmö">
</div>
<!-- END BODY -->
</body>
<!-- END HTML -->
</html>
If you place boxclosed1.png with position: absolute inside a <div> relatively positioned, then the image will be still absolutely positioned in relation to its parent, which will move if the browser is resized ... so does the image.
Move the image out of any container (before the </body> closing tag) and give it a position: fixed AND set its position in relation to the bottom and right of the page like
.fixed { position: fixed; bottom: 20px; right: 20px; }
Check (and resize) fiddle
BTW, I wouldn't set width or height neither position to the html tag in order to avoid unexpected cross-browser results (unless you know exactly what you are doing)

Getting rid of <center> tag

I'm trying to get rid of <center tag in my HTML, but apparently it is not so easy in some cases.
This answer: HTML: Replacement for <center>
also did not work for me.
The following example is supposed to center both Foo and Bar, but it does not center Bar. What is wrong here?
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title</title>
</head>
<body>
<div style=" margin: 0 auto; text-align:center;">
Foo
<table>
<tr>
<td>Bar</td>
</tr>
</table>
</div>
</body>
</html>
If I replace <div> with <center> then everything works as indended, but <center> tag is deprecated...
Your current code centres the containing div but since it has width: auto (the default), it expands to fill the horizontal space available. This means that being centred puts it in the same position as if it was left (or right) aligned. If you want to centre that element, give it a width … but it doesn't look like that is what you want to do.
If you want to centre inline content (such as the text "Foo"), then apply text-align on the container.
If you want to centre block content (such as that table), then apply the auto margins you are using to that block content (not the container).
See also Centring using CSS