asked on

HTML rendered differently in IE and Firefox

I have a simple HTML with embedded images and text. The image is in the <DIV> on the left, and the header is on the right.
The logo and the text are rendered differently in the two browsers, with the Header not aligning vertically in Firefox, but aligning perfectly in IE. It seems that the style 'top' attribute does not work in Firefox. I need help aligning the images. Here is the HTML

<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title></title>
<!--link rel='stylesheet' href='css/phones.css' type='text/css'-->
<style type="text/css">

#topImage{position: absolute;
         left: 200px;
         top: 0px;
         z-index:1;
         text-align: left;
        }
</style>
</head>
<body topmargin="0"  background="images/bg.gif">
<div id="topImage" style="position:absolute; left:0px; top:-0px; width:207px; height:49px; z-index:1">
	<img name="topLogo" SRC="images/cplogo.gif" WIDTH="191" HEIGHT="49">
</div>
<div id="topImage">
	<H3 style='font-size:15pt;FONT-FAMILY: "verdana", "arial", "sans-serif"'><font color=white>Telephone Directory</font></H3>
</div>
</body>
</html>

Open in new window

WebPages.pdf

Dave Baldwin

HTML rendered differently in IE and Firefox

Yes it is. And always has been. Chrome and the other browsers are slightly different also.

That's why a guy named Eric Meyer came up with a 'CSS Reset' to minimize the differences between browsers. http://cssreset.com/scripts/eric-meyer-reset-css/

I notice you have two entries for the CSS for 'topImage', one inline and one in the style block. You should only use one or the other, not both.

josephdts

ASKER

Thanks for pointing out the topImage confusion. That can be the source of my troubles. How do I use the reset CSS stylesheet? Reference it in this HTML? Do I have to do any changes to it?
Thanks for the very insiteful comment. I will try to implement tomorrow.

Dave Baldwin

You can either include the reset code as the first thing in your CSS style section or you can put it in a separate file and include it before any other CSS. It must come first so the styles you want to apply can then modify the elements you're working with. CSS uses the last style applied to an element so if you put the 'reset' last, it would clear almost everything.

Kim Walker

There are many things at play here.

The absence of a doctype declaration means that the browser can use whatever standard it chooses to interpret the mark-up.
The topmargin attribute is a non-standard attribute that is recognized by IE only.
The duplicated topImage id as Dave has pointed out.
The absence of a line-height or margin property leaves the <h3> element at the discretion of the browser defaults. I think this is the most likely source of your problem.

Oddly enough, though, this HTML renders identically in Firefox 47.0.1 and IE 11.0 on my computer.

josephdts

ASKER

Point taken. Chrome renders it the same as Firefox on my machine, I assume it is topmargin that is at fault. What is the equivalent of it in other browsers?

SOLUTION

Dave Baldwin

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Kim Walker

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

josephdts

ASKER

As you see, it is an old HTML I am trying to update. Visual Studio accepts topmargin and background as attributes, but I will move to the stylesheet. What would be the accepted style analogs?

josephdts

ASKER

Hi Kim and Dave,
The style sheet phones.css was commented out from the start. It is not my code, but I have to make the best of it. I will implement your suggestions tomorrow, plus reset.css, and I will change the topImage double reference tomorrow. Thank you for the help, I will let you know the result.
Best,
Joseph

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

josephdts

ASKER

Hi All,

I have redone the code, validated the HTML, but get precisely the same results: in Firefox and Chrome the header 'Telephone Directory' is shifted below the logo. Still do not know how to correct this. I enclose the cleaned up HTML

<!DOCTYPE html> 
<html>
<head>
<meta NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<title>Header</title>
<!--link rel='stylesheet' href='css/phones.css' type='text/css'-->
<style type="text/css">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strong, sub, sup, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1; margin-top:4px
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

#topHeader{position: absolute;
         left: 200px;
         top: 0px;
         z-index:1;
         text-align: left;
         height:49px;
        }
h3{
    color:white;
    line-height:49px;
    margin:10px;
    font-family:"verdana", "arial", "sans-serif";
    font-size: 15pt;   
}
</style>
</head>
<body  style="background-image:url(images/bg.gif)"><!--background="images/bg.gif">--> 
<div id="topImage" style="position:absolute; left:0px; top:0px; width:207px; height:49px; z-index:1">
	<img id="topLogo" src="images/cplogo.gif" alt="ChP" width="191" height="49">
</div>
<div id="topHeader">
	<h3>Telephone Directory</h3>
</div>
</body>
</html>

Open in new window

Kim Walker

Setting the h3 margin to zero should work. I assume you're trying to center the h3 text vertically beside the topLogo image which is 49px tall. With a 10px top and bottom margin and a line-height of 49px, the h3 becomes 69px tall.

If you prefer to keep the 10px margin, reduce the line-height to 29px.

josephdts

ASKER

I had to remove temporary files from Firefox and Chrome to generate the desired result, bottom line, the compliant code has worked uniformly in all browsers