PDA

View Full Version : Misaligned in Mozilla Firefox (works in IE, Chrome, Safari)



smrkangl
Jul 27th, 2010, 10:39 AM
Hi,

I would really like to use this website template offered at this site (http://www.createblog.com/website-template...1-passion-show/ (http://www.createblog.com/website-templates/26321-passion-show/)) however, the footer is misaligned on Firefox. (Chrome is my default browser but I know a large chunk still use Firefox). On Chrome, IE, and Safari it is properly aligned. Is there a way to fix it so that it will be properly aligned in Firefox also?

Live preview: http://www.createblog.com/website-template...n-show/preview/ (http://www.createblog.com/website-templates/26321-passion-show/preview/)

HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>AUTUMM DANCE</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<style type="text/css">body { background-color: #808a86;
background-image:url(http://cbimg6.com/layouts/08/03/20/26321ab.gif);
background-repeat: repeat-x;

margin:0px;
font-family: arial;
font-size: 10px;
line-height: 11px;
}
#footer2{
color:#000;
text-align: left;
cursor: default;
background-color: #000;
text-decoration: none;
bottom: 50px;
left: 0;
width: 100%;
height: 20px;
position: absolute;
background-image:url(http://cbimg6.com/layouts/08/03/20/26321ac.gif);
}
#footer{
color:#fff;
font-size:10px;
font-family:georgia;
line-height:15px;
text-align: left;
cursor: default;
background-color: #000;
text-decoration: none;
bottom: 0px;
left: 0;
width: 100%;
height: 50px;
position: absolute;
}
#footer a, #footer a:link, #footer a:active, #footer a:visited {
color:#e5bfa6;
font-size:12px;
font-family:georgia;
line-height:15px;
text-align: left;
font-style: italic;
letter-spacing: -1;
text-decoration: none;
padding: 2px 2px 2px 2px;
}
#footer a:hover, #footer a:focus {
color:#ce40d1;
cursor: default;
background-color: transparent;
text-decoration: none;
font-weight: bold;
}
h3 { font-family: arial black;
color: #000;
line-height: 14px;
font-size: 14px;
text-align: center;
letter-spacing: 0;
text-decoration: none;
background-color: transparent;
}
h2 { font-family: arial;
color: #fff;
line-height: 12px;
font-size: 10px;
text-align: left;
text-decoration: none;
background-color: #bdae9a;
opacity: 0.5;
margin: -10px 0px 0px 0px;
}
h1 { font-family: georgia;
color: #fff;
line-height: 15px;
text-transform: uppercase;
font-size: 12px;
text-align: left;
font-variant:uppercase;
background-color: transparent;
border-bottom: 2px solid #f54a56;
}
ul { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c677ce;
background-color: transparent;
}
#navi a, #navi a:link, #navi a:active, #navi a:visited { color:#fff;
text-decoration: none; font-family: georgia;
font-size: 14px;
opacity: 0.5;
line-height: 20px;
font-style: normal;
text-transform: none;
background-color: transparent;
padding: 3px 2px 3px 2px;
border-bottom: 1px solid #274d5c;
display: block; }
#navi a:hover, #navi a:focus {
text-decoration: none; color: #fff;
opacity: 1.0;
font-size: 14px;
line-height: 20px;
font-style: normal;
text-transform: none;
background-color: #274d5c;
padding: 3px 2px 3px 2px;
border-bottom: 1px solid #fff;
display: block; }
#content {
width: 315px;
background-color: transparent;
font-family: arial;
font-size: 11px;
line-height: 12px;
font-style: normal;
color: #000;
padding: 5px 10px 5px 10px;
}
#content a { text-decoration: none;
color: #fff;
font-family: arial;
font-size: 9px;
line-height: 12px;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:active { text-decoration: none;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #a86983;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:visited { text-decoration: none;
font-family: arial;
font-size: 9px;
line-height: 11px;
color: #a86983;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#content a:hover { color:#eefdb1;
cursor: default;
background-color: transparent;
text-transform: uppercase;
text-decoration: none;
font-style: none;
}
#box {
width: 315px;
background-color: transparent;
font-family: arial;
font-size: 9px;
line-height: 12px;
font-style: normal;
color: #fff;
opacity: 0.5;
}
#box a { text-decoration: none;
color: #7d7d7d;
font-family: arial;
font-size: 8px;
line-height: 12px;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#box a:active { text-decoration: none;
font-family: arial;
font-size: 8px;
line-height: 11px;
color: #7d7d7d;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
}
#box a:visited { text-decoration: none;
font-family: arial;
font-size: 8px;
line-height: 11px;
color: #7d7d7d;
font-style: normal;
text-transform: uppercase;
background-color: transparent;
border-bottom: 1px dashed #e6d1a1;
}
#box a:hover { color:#a50001;
cursor: default;
background-color: transparent;
text-transform: uppercase;
text-decoration: none;
font-style: none;
}
#titel {
width: 315px;
background-color: transparent;
font-family: georgia;
font-size: 20px;
line-height: 12px;
font-style: normal;
letter-spacing: -1;
color: #fff;
}
#motto {
width: 315px;
background-color: transparent;
font-family: arial black italic;
font-size: 14px;
line-height: 12px;
font-style: normal;
color: #000;
}
::-moz-selection {
background:#051d21;
color:#fff;
}
textarea { border: 1px solid #e4d2a0;
background-color: transparent;
width: 160px;
height: 100px;
font-family: georgia;
font-size: 10px;
line-height: 11px;
color: #000;
}
input { border: 1px solid #051d21;
background-color: transparent;
font-size: 10px;
font-family: georgia;
line-height: 11px;
color: #000;
}
b, strong { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #c51944;
font-weight: bold;
}
m { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #000;
background-color:#d89732;
padding: 0px 2px 0px 2px;
}
i, em { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #0e334a;
font-style: italic;
}
u { font-family: arial;
font-size: 10px;
line-height: 12px;
color: #fff;
text-decoration: none;
border-bottom: 1px dashed #d89732;
}
s, stroke { font-family: arial;
font-size: 10px;
line-height: 11px;
color: #d89732;
text-decoration: line-through;
} </style><!-- CSS STYLE ENDS -->
</head>
<body>
<!-- LAYOUT BEGINS -->
<div style="left: 0px; width: 850px; top: 0px; height: 700px;"
id="header">
<div id="content"
style="position: absolute; overflow: visible; z-index: 5; text-align: center; height: 11px; width: 61px; top: 73px; left: 533px;"></div>
<img src="http://cbimg6.com/layouts/08/03/20/26321aa.jpg"
alt="Layout by ZeBiii"></div>
<!-- LAYOUT ENDS -->
<!-- CONTENT BEGINS -->
<div id="content"
style="position: absolute; overflow: auto; z-index: 3; text-align: left; left: 390px; width: 541px; top: 316px; height: 356px;">
<h1>Header - here comes the Headline</h1>
<h2>Get the feeling!</h2>
<p>This is the content...<br>
Write whatever you want.<br>
<u>Do not remove the Copyright and credits!!!</u></p>
<h1>Basic Codes</h1>
A Link looks like that <a href="#">Linkage</a> in
the content.<br>
<br>
<b>Bold</b> <i>Italic</i>
<u>Underline</u> <s>Stroke</s>
<m>Mark</m>
<p></p>
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum in nec eirmod iudicabit, dicta civibus mnesarchum
at vix.
*beep* an soleat detraxit constituto, cu euismod detraxit consulatu nam.
Ad tollit graeco adipisci duo! Ut duo harum nihil sanctus, ne liber
scripserit mea? His id exerci tempor minimum, pro an justo maluisset.
Labore eripuit inermis no pri, his error affert placerat eu, per
viderer suscipiantur ut? Ne *beep* lorem atomorum persequeris. Qui mundi
delenit imperdiet no. Mei ut corpora invenire instructior. Ut *beep*
libris equidem, ut omnium laoreet mei!
Definiebas cotidieque eam id, no mei invidunt platonem interesset, pro
unum aliquam concludaturque et? Debet nostro vim at, veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos. </p>
</div>
<!-- CONTENT ENDS -->
<!-- BOX BEGINS -->
<div id="box"
style="position: absolute; overflow: auto; z-index: 3; text-align: left; width: 223px; left: 970px; top: 159px; height: 516px;">
<h2>Space filler</h2>
<p>Here is a <b>Box</b>.<br>
Use it for hatever you want!</p>
<a href="#">...more?</a><br>
Definiebas cotidieque eam id, no mei invidunt platonem interesset, pro
unum aliquam concludaturque et? Debet nostro vim at, veritus
voluptatibus et vel? Sonet quidam salutandi te sed? Tollit eirmod ut
eos? Mel ea suas harum quidam! Has dicit affert postea cu, at ius
disputando voluptatibus, vel ei vidisse accusata theophrastus.
Lucilius expetenda ei vix, ut mea malis legimus torquatos.
</div>
<!-- BOX ENDS -->
<!-- TITEL AND MOTTO BEGINS -->
<div id="titel"
style="position: absolute; overflow: visible; z-index: 3; text-align: left; width: 434px; height: 96px; top: 35px; left: 563px;">
<p>Welcome to the passion show!</p>
</div>
<div id="motto"
style="position: absolute; overflow: visible; z-index: 3; text-align: left; top: 178px; height: 88px; left: 508px; width: 254px;">
<p>Write you're Motto<br>
[Don't worry, be happy!]<br>
Or whatever -.-</p>
</div>
<!-- TITEL AND MOTTO ENDS -->
<!-- NAVIGATION BEGINS -->
<div id="navi"
style="position: absolute; z-index: 3; overflow: auto; text-align: left; width: 256px; left: 111px; top: 382px; height: 291px;">
<h3>Navigation</h3>
<a href="#">Linkage</a>
<a href="#">Linkage</a><a href="#">Linkage</a><a
href="#">Linkage</a><a href="#">Linkage</a><a
href="#">Linkage</a>
</div>
<!-- NAVIGATION ENDS -->
<!-- CREDITS BEGINS | DO NOT REMOVE THIS !-->
<div id="footer2">.</div>
<div id="footer">by ZeBiii<a
href="http://zebiii.createblog.com/">Designer</a><a
href="http://www.outgrow.hk.ms">Website</a><a
href="http://www.deviantart.com/">Materials</a>
</div>
</body>
</html>


Thanks!

abduraooft
Jul 27th, 2010, 10:42 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
You need to start with fixing your DOCTYPE (http://www.alistapart.com/articles/doctype/) first. The above one is incomplete. After that validate your code and fix the remaining errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.createblog.com%2Fwebsite-templates%2F26321-passion-show%2Fpreview%2F).