Misalignment when displaying image on different browsers - html

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>

Related

How can I write a text on a picture in an e-mail (inline css)

I create an html design in mail this code works in any browser but I try email design but it doesn't work.
Can you help me ?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="x-apple-disable-message-reformatting">
</head>
<body>
<div style="position: absolute;">
<img style="position: static; width: 550px;"
src="imageUrl" alt="sss"/>
</div>
<h1 style="position: absolute; color: black; margin-top: 120px; margin-left: 150px;">Person name</h1>
</body>
</html>
I've tried;
table background and body background. Doesn't work.
I need to show my image and text. But it's not working. It just shows my text. Actually the css code works, but the image looks separate image.
Text should appear on the picture.

I tried multiple methods. Gmail, Outlook etc. I've seen mail providers block css codes. Thanks for the comment. That's why I'm going to use simple backgrounds.

HTML anchors in iframe not working in Chrome or Safari

First off I do not consider myself to be anything more than a hack at HTML/CSS. With that said , I am having a problem with the attached code in Chrome and Safari (Firefox and Opera work perfectly fine). The problem is clicking on one of the help icons in the center iframe should send the right iframe to the appropriate anchor, but it does not. I would like the help topics to move from topic to topic without a scroll bar.
index.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>Lorem ipsum dolor</title>
<link href="apstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Body">
<div class="leftnav"><p>Something</p></div>
<div class="main"><iframe src="Setup.html" name="main" id="main" width="450" height="100%" frameborder="0"></iframe></div>
<div class="right"><iframe src="Help.html" name="help" id="help" width="235" height="100%" frameborder="0" scrolling="no"></iframe></div>
</div>
</body>
</html>
Setup.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" />
<link href="apstyle.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div class="options">
<p>Get Help #2
<a href="Help.html#help2" target="help">
<img src="helpicon16.png" alt="help2" class="help_icon"/>
</a>
</p>
<p>Get Help #3
<a href="Help.html#help3" target="help">
<img src="helpicon16.png" alt="help3" class="help_icon"/>
</a>
</p>
</div>
</body>
</html>
and the css
#charset "UTF-8";
.Body {
float : left;
clear : both;
width : 100%;
margin-top : 5px;
margin-bottom : 5px;
}
.leftnav {
float : left;
height : 500px;
width : 155px;
margin-left : 25px;
background-color : #eae6e3;
}
.main {
float : left;
height : 500px;
width : 445px;
margin-left : 5px;
}
.right {
clear : right;
float : left;
height : 500px;
width : 185px;
margin-left : 5px;
}
iframe.help {
overflow : hidden;
}
div.spacer {
height: 1000px;
}
Any help would be greatly appreciated
I suppose adding the Help.html might make this easier to replicate
Help.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>Help</title>
<link href="apstyle.css" rel="stylesheet" />
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>

remove :
scrolling="no"
and it works for Chrome 21 on windows.
Edit
Still remove the scrolling="no" but change the html code for Help.html to this:
<!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>Help</title>
<link href="apstyle.css" rel="stylesheet" />
<style>
html {
overflow:hidden;
}
</style>
</head>
<body>
<div class="HelpPage">
<h2>Help Stuff</h2>
<a id="help1"></a>
<h3>Help #1</h3>
<p>This is help #1</p>
<div class="spacer"></div>
<a id="help2"></a>
<h3>Help #2</h3>
<p>This is help #2</p>
<div class="spacer"></div>
<a id="help3"></a>
<h3>Help #3</h3>
<p>This is help #3</p>
<div class="spacer"></div>
</div>
</body>
</html>
See here: testing.dpwebdev.co.uk/stackoverflow/anchors

How can I get rid of margin around my HTML content?

The following HTML display fine.
<!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>
<title>Hello</title>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
However, there is a space of around 10 pixel between the left and top edges my div and the browser window.
Is there a way to get rid of it so that the div is "glued" to the browser window?

You could add CSS to the document....
<!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>
<title>Hello</title>
<style type="text/css">
body { margin:0; }
</style>
</head>
<body>
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
Or you could add the CSS as an inline style
<!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>
<title>Hello</title>
</head>
<body style="margin:0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>
All browsers have a default margin around the top and left edge of the window. There's nothing wrong with your page. You merely need to tell the browser to remove the default margins.

To leave the padding and margins of other elements alone, just reset the body.
body { padding: 0; margin: 0; }

Use a CSS reset.
<style type="text/css">* { padding: 0; margin: 0; }</style>

Try adding style to the body tag, like this:
<!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>
<title>Hello</title>
</head>
<body style="margin: 0;">
<div style="width: 100px; height: 100px; background: red;">
<div>Hello</div>
</div>
</body>
</html>

If you do any of the above codes, but you do not set your table properties to percent rather than pixels, you will probably still end up with a margin-type space around your page. Like as in the bottom scroll bar will still show.
<table bgcolor="#FFFFFF" width="100%" cellspacing="0" cellpadding="4">
<tr>
<td width="15%" align="left" valign="top" bgcolor="#B8B8B6">
</td>
<td width="85%" bgcolor="#FFFFFF" align="left" valign="top">
</td>
</table>

Why does Opera 9 have a space between these two images?

Every other browser is rendering this correctly.
<body>
<div>
<div><img src="img/logo_top.png" width="168" height="85" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" width="168" height="83" alt="Logo bottom" /></div>
</div>
</body>
It's the same thing without the divs, and with a < br /> between images.
Update:
Here is my HTML, with doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
img {border: none;}
body {font-size: 0px;}
</style>
</head>
<body>
<div>
<div><img src="img/logo_top.png" alt="Logo top" /></div>
<div><img src="img/logo_bottom.png" alt="Logo bottom" /></div>
</div>
</body>
</html>

If it's the issue I think it is, it should be fixed if you add this CSS:
img {
vertical-align: top
}
Or this:
img {
display: block
}

Try removing the whitespace between the first </div> and the second <div>. Sometimes these CRLF whitespace characters are interpreted by the browser as an indication of physical space.

Height in percentage problem in 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