Many threads discussing incompatibility end up in dead end - such is state of tech.
I wrote a small style to understand where the error occurs; I really need to display site same in IE and FF. Is that possible?
You will see that I am going for aligned shoulder to shoulder displays with fixed areas, and a content area with auto flow. I would like to use graphics in background and have them align for display. I need to size these to display same position in different browsers. Is there a way to solve this?
Here is my link: <!-- m --><a class="postlink" href="http://previewcusa.cusa.com/lydiastate/SM01/">http://previewcusa.cusa.com/lydiastate/SM01/</a><!-- m -->
Here is my script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
body { margin:0px; }
#top { width:800px; height:250px; border: 1px solid black;}
#top1{ width:350px; height:100px; display: block; border: 1px solid black; float:left; margin-top:20px; background-color
ink;position:absolute; margin-left:20px;}
#top2{ width:350px; height:150px; display: block; border: 1px solid black; float:left; background-color: blue; position:absolute;top:122px; margin-left:20px; }
#top3{ width:450px; height:252px; display: block; border: 1px solid black; float:right; background-color: gray; margin-top:20px; position:absolute; left: 372px;}
#content{ width:800px; height:auto; display: block; border: 1px solid black; float:right; background-color: #f7f7f7; padding: 15px; position:absolute; margin-left: 20px; top:275px;}
</style>
</head>
<body>
<div id="top1">
</div>
<div id="top2">
</div>
<div id="top3">
</div>
<span id="content">
anything you like I'll write it
</span>
</div>
</body>
</html>
Appreciate your input. As my gratitude you will get to surf better looking internet.You can get them to look pretty much the same but there could be slight variances that don't matter. If you understand what the quirks in IE are and how to get around them then it isn't a problem.
You also need to validate your code because what you have has errors.Take another look please. The script was validated with W3 validator and it just must align. I wrote this just to troubleshoot compatibility.
Padding at 15px breaks alignment. How do I phrase this differently to keep areas in line with each other. Do I need to rephrase something?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SCRIPT SO SIMPLE MUST WORK</title>
<style>
body { margin:0px; }
#top1{ width:350px; height:100px; display: block; border: 1px solid black; float:left; margin-top:20px; background-colorink;position:absolute; margin-left:20px;}
#top2{ width:350px; height:150px; display: block; border: 1px solid black; float:left; background-color: blue; position:absolute;top:122px; margin-left:20px; }
#top3{ width:450px; height:252px; display: block; border: 1px solid black; float:right; background-color: gray; margin-top:20px; position:absolute; left: 372px;}
#content{ width:800px; height:auto; display: block; border: 1px solid black; float:right; background-color: #f7f7f7; padding: 15px; position:absolute; margin-left: 20px; top:275px;}
</style>
</head>
<body>
<div id="top1">
</div>
<div id="top2">
</div>
<div id="top3">
</div>
<span id="content">
anything you like I'll write it
</span>
</body>
</html>Start with a strict doctype. I don't know whether that one will put IE in standards mode or not.IE is screwing up the box model. Your padding is being added in the wrong place in IE. Google for IEs box model problem.
I wrote a small style to understand where the error occurs; I really need to display site same in IE and FF. Is that possible?
You will see that I am going for aligned shoulder to shoulder displays with fixed areas, and a content area with auto flow. I would like to use graphics in background and have them align for display. I need to size these to display same position in different browsers. Is there a way to solve this?
Here is my link: <!-- m --><a class="postlink" href="http://previewcusa.cusa.com/lydiastate/SM01/">http://previewcusa.cusa.com/lydiastate/SM01/</a><!-- m -->
Here is my script:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
body { margin:0px; }
#top { width:800px; height:250px; border: 1px solid black;}
#top1{ width:350px; height:100px; display: block; border: 1px solid black; float:left; margin-top:20px; background-color
ink;position:absolute; margin-left:20px;}#top2{ width:350px; height:150px; display: block; border: 1px solid black; float:left; background-color: blue; position:absolute;top:122px; margin-left:20px; }
#top3{ width:450px; height:252px; display: block; border: 1px solid black; float:right; background-color: gray; margin-top:20px; position:absolute; left: 372px;}
#content{ width:800px; height:auto; display: block; border: 1px solid black; float:right; background-color: #f7f7f7; padding: 15px; position:absolute; margin-left: 20px; top:275px;}
</style>
</head>
<body>
<div id="top1">
</div>
<div id="top2">
</div>
<div id="top3">
</div>
<span id="content">
anything you like I'll write it
</span>
</div>
</body>
</html>
Appreciate your input. As my gratitude you will get to surf better looking internet.You can get them to look pretty much the same but there could be slight variances that don't matter. If you understand what the quirks in IE are and how to get around them then it isn't a problem.
You also need to validate your code because what you have has errors.Take another look please. The script was validated with W3 validator and it just must align. I wrote this just to troubleshoot compatibility.
Padding at 15px breaks alignment. How do I phrase this differently to keep areas in line with each other. Do I need to rephrase something?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>SCRIPT SO SIMPLE MUST WORK</title>
<style>
body { margin:0px; }
#top1{ width:350px; height:100px; display: block; border: 1px solid black; float:left; margin-top:20px; background-colorink;position:absolute; margin-left:20px;}
#top2{ width:350px; height:150px; display: block; border: 1px solid black; float:left; background-color: blue; position:absolute;top:122px; margin-left:20px; }
#top3{ width:450px; height:252px; display: block; border: 1px solid black; float:right; background-color: gray; margin-top:20px; position:absolute; left: 372px;}
#content{ width:800px; height:auto; display: block; border: 1px solid black; float:right; background-color: #f7f7f7; padding: 15px; position:absolute; margin-left: 20px; top:275px;}
</style>
</head>
<body>
<div id="top1">
</div>
<div id="top2">
</div>
<div id="top3">
</div>
<span id="content">
anything you like I'll write it
</span>
</body>
</html>Start with a strict doctype. I don't know whether that one will put IE in standards mode or not.IE is screwing up the box model. Your padding is being added in the wrong place in IE. Google for IEs box model problem.