WillisTi
09-18-2005, 08:48 PM
Why does my site look different and crap in Mozilla Firefox then it does in Internet Explorer?
Its so annoying because i have tried really hard in cleaning my code making it valid, but ive recently viewed one of pages in Firefox and it looks amateurish compared to Internet Explorer.
How am I able to solve this problem? I take it i need to change some of code in my HTML and CSS to make it more compatiable with all browsers? But what?
My site isnt online yet but the CSS code and HTML for one of my pages is on the post below so if you save that and then view it in Internet Explorer (which displays the page how i like it) and in Firefox or a different browser you will see my predicament.
Thanks in advance
WillisTi
09-18-2005, 08:49 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Contemporary Multimedia</title>
<link href="contemporarymultimedia.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="margin-box">
<tr>
<td align="center" valign="middle"><table border="0" align="center" cellpadding="0" cellspacing="0" id="background">
<tr>
<td colspan="3" id="banner"><img src="topbanner.jpg" alt="Top Banner" width="720" height="90"></td>
</tr>
<tr>
<td colspan="3" id="nav"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="7%" height="25"><ul class="style5navlist">
<li class="home">
<p><a class="current" href="index.htm">About</a></p>
</li>
</ul></td>
<td width="7%"><ul class="style5navlist">
<li class="home">
<p><a class="current" href="articles.htm">Articles</a></p>
</li>
</ul></td>
<td width="7%"><ul class="style5navlist">
<li class="home">
<p><a class="current" href="portfolio.htm">Portfolio</a></p>
</li>
</ul></td>
<td width="7%"><ul class="style5navlist">
<li class="home">
<p><a class="current" href="index.html">Contact</a></p>
</li>
</ul></td>
<td width="72%"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="313" align="center" valign="top" id="sidepic-l"><img src="sidebanner.jpg" alt="Side Banner" width="110" height="300"></td>
<td valign="top" id="content"><p>I am a student studying BSc (Hons) Multimedia Computing at the Universty of the West of England. <BR>
<BR>
There are many definitions of multimedia. These include references to interactivity, moving image (animation and video), sound, virtual reality, digital media, and entertainment systems including those provided by computer games consoles. <BR>
<BR>
Multimedia Systems are expected to be a dominant form of communication in the 21st Century. Contemporary multimedia development requires you to become familiar with a wide range of concepts and techniques drawn from a number of disciplines. </p>
<p> </p>
<p><br>
<a href="http://www.contemporarymultimedia.com">Valid CSS</a><span class="dash"> <a href="index.htm">|</a> </span><a href="http://www.contemporarymultimedia.com">Valid HTML</a></p></td>
<td align="center" valign="top" id="sidepic-r"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="border2">
<tr>
<th scope="col"><div align="left"> BSc(Hons) Multimedia Computing</div></th>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<th scope="col"><div align="left">
<p>The <a href="BSc(hons)multimediacomputing.htm">BSc(Hons) Multimedia Computing</a> degree raises awareness of current and emerging multimedia technologies, principles of information design for effective communication and approaches to software construction and its management.</p>
</div></th>
</tr>
</table>
<br>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border2">
<tr>
<th scope="col"><div align="left">
<p>3D Technologies Article </p>
</div></th>
</tr>
</table>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
<tr>
<th scope="col"><div align="left">
<p> The aim of this <a href="articles.htm">article</a> is to raise reader awareness of the current state of the art, and emerging trends and standards of 3D technologies. </p>
</div></th>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
WillisTi
09-18-2005, 08:50 PM
CSS
body {
background-color: #CCCCCC;
color : #555555;
}
.margin-box {
width: 100%;
height: 100%;
}
#splash {
width: 720px;
height: 400px;
background-color: #ffffff;
color : #555555;
border: solid 1px #bbbbbb;
}
#background {
width: 720px;
height: 400px;
background-color: #ffffff;
color : #555555;
border: solid 1px #bbbbbb;
}
#banner {
border-bottom: solid 1px #cccccc;
height: 90px;
}
#nav {
border-bottom: solid 1px #cccccc;
height: 22px;
}
#content {
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
padding: 10px;
font-family: Tahoma , Verdana, sans-serif;
font-size:11px;
background-color: #FFFFFF;
color: #555555;
width: 345px;
}
#content h1 {
font-family: Helvetica, Arial, sans-serif;
font-size:11px;
background-color: #FFFFFF;
color: #555555;
margin: 0px;
}
#content a:link {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #FFFFFF;
color: #688C91;
font-weight: normal;
text-decoration: none;
}
#content a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #FFFFFF;
color: #688C91;
text-decoration: none;
}
#content a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #FFFFFF;
color: #688C91;
text-decoration: underline;
}
#sidepic-l {
padding: 10px;
width: 101px;
background-color: #FFFFFF;
color: #555555;
}
#sidepic-r {
padding: 10px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
background-color: #ffffff;
color: #666666;
width: 212px;
}
#thumbnail-buttons {
padding: 10px;
width: 101px;
height: 313px;
border-right: solid 1px #cccccc;
background-color: #FFFFFF;
color: #555555;
}
#gallery {
padding: 10px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
background-color: #FFFFFF;
color: #666666;
border-right: solid 1px #cccccc;
width: 345px;
}
.description {
width: 212px;
font-family: Tahoma, Helvetica, sans-serif;
font-size:11px;
background-color: #FFFFFF;
color: #666666;
}
.border {
border: 1px solid #CCCCCC;
font-family: Arial , Verdana, sans-serif;
font-size:10px;
color: #555555;
padding: 7px;
background: #C9D7D9;
}
.border a:link {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #C9D7D9;
color: #527074;
font-weight: normal;
text-decoration: none;
}
.border a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #C9D7D9;
color: #527074;
text-decoration: none;
}
.border a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size:10px;
background-color: #C9D7D9;
color: #527074;
text-decoration: underline;
}
.border2 {
border: 1px solid #CCCCCC;
font-family: Arial , Verdana, sans-serif;
font-size:10px;
color: #555555;
padding: 7px;
background: #FFFFFF;
}
.style5navlist {
margin: 0;
padding: 0;
width: 50px;
font: 11px/14px Arial, verdana, helvetica, sans-serif;
border-right: none;
float: left;
}
.style5navlist li {
margin: 0;
padding: 0;
list-style-type: none;
display: block;
float: left;
text-align: center;
border-right: 1px solid #ccc;
background-color:inherit;
color: #555555;
}
.style5navlist a:link, .style5navlist a:visited {
display: block;
padding: 0.50em 0;
width: 50px;
font-weight: normal;
text-decoration: none;
background-color:inherit;
color: #666;
}
body.home .style5navlist li.home a,
body.about .style5navlist li.about a,
body.contact .style5navlist li.contact a,
.style5navlist a:hover {
background:#C9D7D9;
color: #666;
}
Douglas
09-18-2005, 10:01 PM
its just the different ways the browsers show and process HTML and CSS, youll need to test it in each browser till it looks right, and dont triple post... use the edit button