I've been having some trouble lately with my website:
<!-- m --><a class="postlink" href="http://www.drunkduck.com/A_Story_of_Stories/">http://www.drunkduck.com/A_Story_of_Stories/</a><!-- m -->
The problem, I believe, lies in the relative and absolute positioning I used in my layout. I've been told that the site is all messed up in some browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Story of Stories by Speedyard and Ranas, Smiting Evil Once a Week!</title>
<BODY vAlign=top leftMargin=0 topMargin=0>
<body text="#000000" link="#ff00ff" vlink="#8080c0" alink="#ff0080">
<style type="text/css">
body {background: #00AEED; margin-left: 1em; margin-top: 0em; margin-right: 0em;}
div.menuset {background: white;
width: 92%;
margin: 3em;}
.menuset {position: relative;
top: 10px;}
a:hover {color:red;
text-decoration:none;}
#quote {font: italic;
text-align: center;
margin: .5em;}
p {font family: "Verdana", "Times New Roman", san-serif;
font-size:21px;
line-height:110%;
letter-spacing:1.5px;
word-spacing:1.25px;
text-indent: .5cm;}
#ad {position: absolute;
top: 80px;
left: 37em;}
a {font-size: 22px;
text-decoration: none;}
#ddlogo {position: absolute;
left: -3em;
top: -2em;
border: #00AEED}
#rtcorner {position: absolute;
right: -1.6em;
top: -.05em;}
.ddlinks {font-family: "Times New Roman", "sans-serif";
font-size: .55em;
font: bold;
position: relative;
left: -4em;
top: -4.5em;
text-decoration: underline;}
.ddlinks:hover {color: orange;
text-decoration: none;}
#links {margin: .25em;
font-weight: bold;
position: relative;
top: -14.5em;
background-color: #00AEED;
width: 50%;}
#soslogo {position: relative;
top: -.5em;}
img { border: none;}
#bzbtn {position: absolute; left: 40em; top: 2em;}
.dd_commenttop {background-color: #8DCFF4;}
.dd_commentbottom {background-color: white;}
</style>
<script language="JavaScript" type="text/JavaScript">
function randQ(){
var q = new Array()
q[0] = "The most important part of a journey isn't always reaching the destination: it's the journey itself. -Thamadus, the Figmentist";
q[1] = "Nothing is more active than thought, for it travels over the universe, and nothing is stronger than necessity for all must submit to it. -Thales of Miletus";
q[2] = "Hope is the poor man's bread. -Thales of Miletus";
q[3] = "It's the job that's never started that takes longest to finish. -J.R.R. Tolkien";
q[5] = "When I became a man, I put away childish things - including the fear of childishness and the desire to be grown-up. -C.S. Lewis";
q[6] = "Knowledge will get you from A to B. Imagination will take you everywhere. -Albert Einstein";
q[7] = "The man who has no imagination has no wings. -Muhammed Ali";
q[8] = "My imagination makes me human and makes me a fool; it gives me all the world and exiles me from it. -Ursula Kroeber Le Guin";
q[9] = "Imagination is the beginning of creation. You imagine what you desire, you will what you imagine and at last you create what you will. -George Bernard Shaw";
q[10] = "Smite evil, where you find it! -Eldalar";
var root = document.getElementById('quot');
while(root.hasChildNodes()){
root.removeChild(root.childNodes[0])
}
var oTxt = document.createTextNode(q[Math.floor(Math.random()*q.length)])
root.appendChild(oTxt)
}
onload=randQ;
</script>
<META http-equiv=Content-Type content='text/html; charset=ISO-8859-1'>
<META content='MSHTML 6.00.2800.1106' name=GENERATOR>
<META NAME="Title" CONTENT="A Story of Stories">
<META NAME="Author" CONTENT="Speedyard, Ranas">
<META NAME="Subject" CONTENT="epic webcomic, epic story,">
<META NAME="Description" CONTENT="Here be a story of magic and metascience, Creation and Subcreation, ex nihilo and ex imaginatio, archmages and figmentists, good and evil, love and betrayal, and a swordfighter that believes flies are the spawn of evil. ">
<META NAME="Language" CONTENT="English">
<META NAME="Copyright" CONTENT="All material copyright Speedyard and Ranas 2005">
<META NAME="Designer" CONTENT="Speedyard, Ranas">
<META NAME="Publisher" CONTENT="Drunk Duck">
</head>
<body>
<a id="bzbtn" href='http://www.buzzcomix.net/in.php?ID=Speedyard'><img src='http://www.buzzcomix.net/vote/vote_rank_small_button.php?voteID=Speedyard' border=0></a>
<div class="menuset">
<div id=ad>
<!--[*120X600_AD*]-->
</div>
<img id="rtcorner" src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/rtcorner.gif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/index.php">
<img id="ddlogo" src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/ddlogo.gif" width="191" height="101">
</a>
<div>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/index.php">Home</a>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/forum/">Forums</a>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.buzzcomix.net/">BuzzComix</a>
</div>
<center>
<IMG NAME="soslogoimgmap0" SRC=http://www.webdeveloper.com/forum/archive/index.php/"gfx/soslogoimgmap.jpg" WIDTH="400" HEIGHT="250" BORDER="0" USEMAP="#soslogoimgmap">
<MAP NAME="soslogoimgmap">
<AREA SHAPE="rect" COORDS="0,119,84,153" HREF=http://www.webdeveloper.com/forum/archive/index.php/"soslinks.html" ALT="Links">
<AREA SHAPE="rect" COORDS="1,153,84,185" HREF=http://www.webdeveloper.com/forum/archive/index.php/"cast.html" ALT="Cast">
<AREA SHAPE="rect" COORDS="0,184,102,218" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/forum/viewforum.php?f=148" ALT="Forum">
<AREA SHAPE="rect" COORDS="0,218,106,249" HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" ALT="Contact">
</MAP>
<div id="quote">
<div id="quot"></div>
</div>
</center>
<center>
<!--[*COMIC_PAGE*]-->
</center>
<center>
<!--[*NAV_BACK_ALL*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/firstnav.jpg' height=50 width=50><!--[/*NAV_BACK_ALL*]-->
<!--[*NAV_BACK_ONE*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/prevnav.jpg' height=50 width=50><!--[/*NAV_BACK_ONE*]-->
<!--[*NAV_FORWARD_ONE*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/nextnav.jpg' height=50 width=50><!--[/*NAV_FORWARD_ONE*]-->
<!--[*NAV_FORWARD_ALL*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/lastnav.jpg' height=50 width=50><!--[/*NAV_FORWARD_ALL*]-->
</center>
<center>
<!--[*NAV_PULLDOWN*]-->
</center>
<!--[*AUTHORS_NOTES*]-->
<BR>
<div style="margin: 1em;">
<!--[*COMMENT_FORM*]-->
</div>
<br>
<!--[*COMMENTS*]-->
<small>
<!--[*ERROR_MESSAGE*]-->
</small>
<!--[*DRUNKDUCK*]-->
<center>
<div class="menuset" style="font: bold; font-size: .5em;">
All story, characters, images, and everything on this site are copyright ©
2005 Speedyard and Ranas.
</div>
</center>
</div>
</body>
</html>
Does anyone have any suggestions on how to make this layout work well in most browsers?Start by getting your HTML valid.
<!-- m --><a class="postlink" href="http://www.drunkduck.com/A_Story_of_Stories/">http://www.drunkduck.com/A_Story_of_Stories/</a><!-- m -->
The problem, I believe, lies in the relative and absolute positioning I used in my layout. I've been told that the site is all messed up in some browsers.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>A Story of Stories by Speedyard and Ranas, Smiting Evil Once a Week!</title>
<BODY vAlign=top leftMargin=0 topMargin=0>
<body text="#000000" link="#ff00ff" vlink="#8080c0" alink="#ff0080">
<style type="text/css">
body {background: #00AEED; margin-left: 1em; margin-top: 0em; margin-right: 0em;}
div.menuset {background: white;
width: 92%;
margin: 3em;}
.menuset {position: relative;
top: 10px;}
a:hover {color:red;
text-decoration:none;}
#quote {font: italic;
text-align: center;
margin: .5em;}
p {font family: "Verdana", "Times New Roman", san-serif;
font-size:21px;
line-height:110%;
letter-spacing:1.5px;
word-spacing:1.25px;
text-indent: .5cm;}
#ad {position: absolute;
top: 80px;
left: 37em;}
a {font-size: 22px;
text-decoration: none;}
#ddlogo {position: absolute;
left: -3em;
top: -2em;
border: #00AEED}
#rtcorner {position: absolute;
right: -1.6em;
top: -.05em;}
.ddlinks {font-family: "Times New Roman", "sans-serif";
font-size: .55em;
font: bold;
position: relative;
left: -4em;
top: -4.5em;
text-decoration: underline;}
.ddlinks:hover {color: orange;
text-decoration: none;}
#links {margin: .25em;
font-weight: bold;
position: relative;
top: -14.5em;
background-color: #00AEED;
width: 50%;}
#soslogo {position: relative;
top: -.5em;}
img { border: none;}
#bzbtn {position: absolute; left: 40em; top: 2em;}
.dd_commenttop {background-color: #8DCFF4;}
.dd_commentbottom {background-color: white;}
</style>
<script language="JavaScript" type="text/JavaScript">
function randQ(){
var q = new Array()
q[0] = "The most important part of a journey isn't always reaching the destination: it's the journey itself. -Thamadus, the Figmentist";
q[1] = "Nothing is more active than thought, for it travels over the universe, and nothing is stronger than necessity for all must submit to it. -Thales of Miletus";
q[2] = "Hope is the poor man's bread. -Thales of Miletus";
q[3] = "It's the job that's never started that takes longest to finish. -J.R.R. Tolkien";
q[5] = "When I became a man, I put away childish things - including the fear of childishness and the desire to be grown-up. -C.S. Lewis";
q[6] = "Knowledge will get you from A to B. Imagination will take you everywhere. -Albert Einstein";
q[7] = "The man who has no imagination has no wings. -Muhammed Ali";
q[8] = "My imagination makes me human and makes me a fool; it gives me all the world and exiles me from it. -Ursula Kroeber Le Guin";
q[9] = "Imagination is the beginning of creation. You imagine what you desire, you will what you imagine and at last you create what you will. -George Bernard Shaw";
q[10] = "Smite evil, where you find it! -Eldalar";
var root = document.getElementById('quot');
while(root.hasChildNodes()){
root.removeChild(root.childNodes[0])
}
var oTxt = document.createTextNode(q[Math.floor(Math.random()*q.length)])
root.appendChild(oTxt)
}
onload=randQ;
</script>
<META http-equiv=Content-Type content='text/html; charset=ISO-8859-1'>
<META content='MSHTML 6.00.2800.1106' name=GENERATOR>
<META NAME="Title" CONTENT="A Story of Stories">
<META NAME="Author" CONTENT="Speedyard, Ranas">
<META NAME="Subject" CONTENT="epic webcomic, epic story,">
<META NAME="Description" CONTENT="Here be a story of magic and metascience, Creation and Subcreation, ex nihilo and ex imaginatio, archmages and figmentists, good and evil, love and betrayal, and a swordfighter that believes flies are the spawn of evil. ">
<META NAME="Language" CONTENT="English">
<META NAME="Copyright" CONTENT="All material copyright Speedyard and Ranas 2005">
<META NAME="Designer" CONTENT="Speedyard, Ranas">
<META NAME="Publisher" CONTENT="Drunk Duck">
</head>
<body>
<a id="bzbtn" href='http://www.buzzcomix.net/in.php?ID=Speedyard'><img src='http://www.buzzcomix.net/vote/vote_rank_small_button.php?voteID=Speedyard' border=0></a>
<div class="menuset">
<div id=ad>
<!--[*120X600_AD*]-->
</div>
<img id="rtcorner" src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/rtcorner.gif">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/index.php">
<img id="ddlogo" src=http://www.webdeveloper.com/forum/archive/index.php/"gfx/ddlogo.gif" width="191" height="101">
</a>
<div>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/index.php">Home</a>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/forum/">Forums</a>
<a class="ddlinks" href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.buzzcomix.net/">BuzzComix</a>
</div>
<center>
<IMG NAME="soslogoimgmap0" SRC=http://www.webdeveloper.com/forum/archive/index.php/"gfx/soslogoimgmap.jpg" WIDTH="400" HEIGHT="250" BORDER="0" USEMAP="#soslogoimgmap">
<MAP NAME="soslogoimgmap">
<AREA SHAPE="rect" COORDS="0,119,84,153" HREF=http://www.webdeveloper.com/forum/archive/index.php/"soslinks.html" ALT="Links">
<AREA SHAPE="rect" COORDS="1,153,84,185" HREF=http://www.webdeveloper.com/forum/archive/index.php/"cast.html" ALT="Cast">
<AREA SHAPE="rect" COORDS="0,184,102,218" HREF=http://www.webdeveloper.com/forum/archive/index.php/"http://www.drunkduck.com/forum/viewforum.php?f=148" ALT="Forum">
<AREA SHAPE="rect" COORDS="0,218,106,249" HREF=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" ALT="Contact">
</MAP>
<div id="quote">
<div id="quot"></div>
</div>
</center>
<center>
<!--[*COMIC_PAGE*]-->
</center>
<center>
<!--[*NAV_BACK_ALL*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/firstnav.jpg' height=50 width=50><!--[/*NAV_BACK_ALL*]-->
<!--[*NAV_BACK_ONE*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/prevnav.jpg' height=50 width=50><!--[/*NAV_BACK_ONE*]-->
<!--[*NAV_FORWARD_ONE*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/nextnav.jpg' height=50 width=50><!--[/*NAV_FORWARD_ONE*]-->
<!--[*NAV_FORWARD_ALL*]--><img src='http://www.webdeveloper.com/forum/archive/index.php/gfx/lastnav.jpg' height=50 width=50><!--[/*NAV_FORWARD_ALL*]-->
</center>
<center>
<!--[*NAV_PULLDOWN*]-->
</center>
<!--[*AUTHORS_NOTES*]-->
<BR>
<div style="margin: 1em;">
<!--[*COMMENT_FORM*]-->
</div>
<br>
<!--[*COMMENTS*]-->
<small>
<!--[*ERROR_MESSAGE*]-->
</small>
<!--[*DRUNKDUCK*]-->
<center>
<div class="menuset" style="font: bold; font-size: .5em;">
All story, characters, images, and everything on this site are copyright ©
2005 Speedyard and Ranas.
</div>
</center>
</div>
</body>
</html>
Does anyone have any suggestions on how to make this layout work well in most browsers?Start by getting your HTML valid.