Hi,
I have some css compatible problems between Firefox and Mozilla. Please take a look and help out if u can:
/* CSS Document */
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
margin: 0px;
text-align: left;
background-image: url(images/bg1_low.jpg);
background-position: top left;
padding-bottom: 15px;
}
#head {
width: 100%;
height: 100px;
padding: 0px;
margin: 3px;
border: 2px solid #cccccc;
text-align: center;
}
#l {
float: left;
height: 100%;
width: 18%;
position: relative;
margin-left: 6px;
margin-right: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
#c {
float: left;
height: 100%;
width: 56%;
position: relative;
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 5px;
}
#r {
float: left;
height: 100%;
width: 18%;
position: relative;
margin-right: 6px;
margin-left: 12px;
margin-top: 5px;
margin-bottom: 5px;
}
#all {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
position: relative;
}
#title {
font-size: 12px;
font-weight: bold;
color: #003366;
width: 100%;
border: 2px solid #003366;
background-color: #FFCC00;
text-transform: uppercase;
margin: 0px;
padding-top: 2px;
padding-bottom: 2px;
padding-left: 6px;
padding-right: 6px;
}
#window {
font-size: 12px;
text-align: left;
width: 100%;
background-color:#fbfbfb;
border-left: 2px solid #003366;
border-right: 2px solid #003366;
border-bottom: 2px solid #003366;
padding: 6px;
margin: 0px;
}
a:link, a:visited, a:active {
font-weight: bold;
color: #003366;
text-decoration: none;
}
a:hover {
font-weight: bold;
color: #0033CC;
}
p {
font-size: 12px;
text-align: justify;
}
#shout{
width: 180px;
height: 200px;
overflow: auto;
}
table {
font-size: 12px;
}
#copyright {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: center;
color: #999999;
width: 100%;
border-top: 1px solid #666666;
margin: 0px;
padding: 5px;
position: relative;
}
<?php
$m = $_GET['m'];
if (empty($m)){
header("Location: http://mulia-sapiens.t35.com/test.php?m=main");
}
?>
<html>
<head>
<title>Mulia Sapiens 2004</title>
<link rel="stylesheet" type="text/css" href="test.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META NAME="robots" CONTENT="noarchive">
</head>
<body>
<!--top -->
<div id="head"><div align="center"><img src="images/mulia_head2.jpg" alt="mc Mulia" width="800" height="100"></div></div>
<div id="all">
<!--left --><div id="l">
<div id="title"><img src="images/pin.gif" border="0" align="absmiddle"> menu</div><div id="window">
<a href="index.php?m=main"><img src="images/home.gif" border="0" align="absmiddle"> Home</a><br><br>
<a href="index.php?m=sapiens"><img src="images/sapiens.gif" border="0" align="absmiddle"> The Sapiens</a><br><br>
<a href="index.php?m=teachers"><img src="images/teachers.gif" border="0" align="absmiddle"> Teachers</a><br><br>
<a href="index.php?m=school"><img src="images/school.gif" border="0" align="absmiddle"> School</a><br><br>
<a href="index.php?m=album"><img src="images/album.gif" border="0" align="absmiddle"> Photo Album</a><br><br>
<a href="index.php?m=files"><img src="images/filez.gif" border="0" align="absmiddle"> Filez</a><br><br>
<a href="index.php?m=gb"><img src="images/gbook.gif" border="0" align="absmiddle"> Guest Book</a><br><br>
<a href="index.php?m=msgs"><img src="images/msgs.gif" border="0" align="absmiddle"> Messages</a><br><br>
<a href="index.php?m=article"><img src="images/articles.gif" border="0" align="absmiddle"> Articles</a><br><br>
<a href="index.php?m=reminder"><img src="images/reminder.gif" border="0" align="absmiddle"> Reminder</a><br><br>
<a href="index.php?m=fun"><img src="images/fun.gif" border="0" align="absmiddle"> Fun n' Games</a><br><br>
<a href="index.php?m=about"><img src="images/about.gif" border="0" align="absmiddle"> About</a><br><br>
</div>
<br><div id="title"><img src="images/pin.gif" border="0" align="absmiddle"> Links</div>
<div id="window">
<a href="http://smkte.t35.com/" target="_blank"><img src="images/smkte.gif" border="0" align="absmiddle"> SMK Taman Ehsan</a><br>
<br>
<a href="http://hydrowire.t35.com/" target="_blank"><img src="images/hw.gif" border="0" align="absmiddle"> hydrowire.t35.com</a><br>
<br>
<!--load links-->
<?php
include('links.txt');
?>
<!--end load links--><br>
<a href="http://www.spreadfirefox.com/?q=affiliates&id=0&t=75"><img border="0" alt="Get Firefox!" title="Get Firefox!" src="http://www.spreadfirefox.com/community/images/affiliates/Buttons/120x60/trust.gif"/></a><br><br>
<div align="right">
<a href="index.php?m=addlinks">Add your links!!>></a></div><br>
</div></div>
<!--center, main content-->
<div id="c">
<?php
include($m.'.php');
?>
</div>
<!--right -->
<div id="r">
<div id="title"><img src="images/pin.gif" border="0" align="absmiddle"> Calendar</div><div id="window">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="164" height="212">
<param name="movie" value="calender.swf">
<param name="quality" value="high">
<embed src="calender.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="164" height="212"></embed>
</object>
</div>
</div><br><div id="title"><img src="images/pin.gif" border="0" align="absmiddle"> Juke Box</div><div id="window"><a href="index.php?m=lyrics">Lyrics</a><br></div>
<br><div id="title"><img src="images/pin.gif" border="0" align="absmiddle"> Monthly vote</div><div id="window"><b>Q:</b><br>Here goes the question?<br>
<form name="vote" method="post" action="vote.php">
<p>
<input name="radiobutton" type="radio" value="radiob1">
Option 1<br><br>
<input name="radiobutton" type="radio" value="radiob2">
Option 2<br><br>
<input name="radiobutton" type="radio" value="radiob3">
Option 3<br><br>
<input type="submit" name="Submit" value="Vote!">
<input type="submit" name="Submit" value="View Result">
</p>
</form>
</div><br><div id="title">Shout Box</div><div id="window">
<div id="shout">
<?php
include('shout.htm');
?>
</div>
<form name="shout" action="shout.php" method="post">
Name: <br><input size="20" type="text" maxlength="20" name="name"><br>
Shout: <br><input size="20" type="text" maxlength="100" name="comm">
<br><input type="submit" name="Submit" value="Shout!">
</form>
</div></div></div>
<div id="copyright"><a href="index.php?m=about"> About</a> | <a href="index.php?m=contact">Contact</a> | Copyright ©2004 ngkenfai | hydrowire | All Rights Reserved.
<!-- Start of StatCounter Code -->
<script type="text/javascript" language="javascript">
var sc_project=301058;
var sc_partition=1;
</script>
<script type="text/javascript" language="javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><a href="http://www.statcounter.com" target="_blank"><img src="http://c2.statcounter.com/counter.php?sc_project=301058&java=0" alt="web counter" border="0"></a> </noscript>
<!-- End of StatCounter Code -->
</div>
</body>
</html>
1st problem (in red oval): same css & html code, but different result in different browsers. What i found out was Firefox css padding and margin in window#id tends to overwrite l#,c#,r#id padding and margin. In other hand, IE renders l#,c#,r#id padding and margin according to window#id padding and margin. how to overcome this problem so that the result in both browser is the same?
2nd problem (in red square): again same css & html code, but the footer i made appear half way in Mozilla but appear nicely in IE. How should I fix my code so that the footer appears correctly underneath my page in both Firefox and IE?
I hope i make myself clear enough. Really hope to fix this problem asap bcuz i have been figuring this all evening till midnight (before this the renders are even worse, but i manage to at least tidy up abit)
Thanks in advance!
