Height in percentage problem in HTML - html

When the following is rendered, the height parameter of image (img) isn't considered. However, if I vary the width in terms of % for example 80%, it resizes and aspect ratio is intact. If I mention height in terms of px it works. Problems occur only for height being in % and in all browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
If we remove "http://www.w3.org/TR/html4/loose.dtd" from doctype as shown below, % works for height but any padding given to image won't be considered in IE but works fine in rest of browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<img src="image.jpg" alt="Image" border="0" height="15%" width="100%" />
</body>
</html>
I have tried using YUI 3 api for CSS Reset. While it removes all default padding of browsers, it wont solve my problem. Any workaround available ?
Thanks.

Adding the following CSS to my CSS file did the trick.
html, body {
height: 100%;
margin: 0;
padding: 0;
}
Thanks me :D

Related

HTML Simple Holding Page not visible on newer browsers e.g. Chrome and Firefox

I want to update an existing/simple holding page on my domain in html.
Unfortunately, I've noticed that this page doesn't seem to appear on newer browsers such as Chrome and Firefox and only seems to load up properly on Internet Explorer.
Is there any advice you could give me to help overcome this issue please?
Thanks
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>"TITLE HERE"</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body style="background:ffffff url('LOGO.jpg') no-repeat center center">
</a>
</body>
</html>
<!--#easybanner4-->
To make a simple HTML page visible by most modern browsers it's better to use HTML5 so first, instead of using <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> just use <!DOCTYPE html>...
About your code, you can fix it by using something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- or <meta charset="iso-8859-1"> -->
<meta name="viewport" content="width=device-width">
<title>"TITLE HERE"</title>
<style>
body {
background:#ffffff url('LOGO.jpg') no-repeat center fixed;
}
</style>
</head>
<body>
link
</body>
</html>

Misalignment when displaying image on different browsers

This is quick simple but I'm really a noob and don't know how to resolve this.
Basically, I have an e-card to be displayed on a webpage. There's an image and music playing in the background. The html works fine on Chrome and Firefox (centralised and playing well even though size differs on Chrome and Firefox) but the main problem lies on IE. When I open the webpage on IE, the image is not aligned correctly.
Below is my html code:
<!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>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
background-color: #214353;
}
</style>
</head>
<body>
<div align="center"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>
<div>
<div align="center">
<embed src="media/Feliz Navidad Instrumental Karaoke..mp3" width="32" height="32" hidden="ture" loop="ture"></embed>
</div>
</div>
</body>
</html>
Please help!
Thank you!
Use this style on your container div.
<div style="width: 800px; height: 533px; margin: 0 auto;"><img src="image/Christmas-Card3.gif" width="800" height="533" /></div>

Div not taking 100% width with position absolute and old doctype in IE

Div not taking 100% width with position absolute in IE. It render on quirks mode in IE. There is any way to make div 100% width without changing doctype and without specify width
<!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=utf-8">
<title>Untitled Document</title>
</head>
<body>
<div style="width:500px;">
asfdsaf
<div style="background:#ff0000; position:absolute; height:8px; left:0; right:0"></div>
</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.

Why isn't this iframe sizing to 100%?

Given the following page that includes an iframe
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="screen" href="/public/stylesheets/main.css">
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body style="min-height: 100; margin: 0px">
<iframe src="testpage.html" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%">
</body>
</html>
When it is launched, the iframe would only seems to load part of the text from testpage.html. How would one make the iframe show the entire content of testpage.html?
Set your html and body height to 100% too.
html, body { height: 100%; }
You may (or may not) also need to set display on iframe to block:
iframe { display:block; }