Firefox-Optimierung
Verfasst: 11.10.2005 19:23
Hallo, hoffe richtiger Therad 
habe in letzter Zeit an ner kleinen Page gearbeitet. Die Page habe ich mit Hilfe eines Templates das ich noch angepasst habe gemacht. Jetzt hab ich ein kleines Porblem. Die Page ist mit dem IE perfekt sichtbar, jedoch hat es bei Firefox ein paar kleine Probleme, kann mir da jemand helfen?
PAGE:
http://web88.lambda.ibone.ch/infodatenbank/home.html#
Bugs bei Mozilla:
-Titel sind nicht Orange.
-Content und Navi sind nicht ganz oben, so das der Strich rechts neben der Navigation nicht nach ganz oben geht.
-Footer zu gross
Ausserdem hät ich noch ne bitte, ich will beim CSS einen Code einbauen für Links, das wenn man über sie drüberfährt sie orange werden (ahover). Hab einiges versucht aber nichts hat geklappt. Wäre über Hilfe sehr sehr sehr dankbar!
CSS
CSS Maincode:
BG:
HC:
JTFY:
HTML
Index:
habe in letzter Zeit an ner kleinen Page gearbeitet. Die Page habe ich mit Hilfe eines Templates das ich noch angepasst habe gemacht. Jetzt hab ich ein kleines Porblem. Die Page ist mit dem IE perfekt sichtbar, jedoch hat es bei Firefox ein paar kleine Probleme, kann mir da jemand helfen?PAGE:
http://web88.lambda.ibone.ch/infodatenbank/home.html#
Bugs bei Mozilla:
-Titel sind nicht Orange.
-Content und Navi sind nicht ganz oben, so das der Strich rechts neben der Navigation nicht nach ganz oben geht.
-Footer zu gross
Ausserdem hät ich noch ne bitte, ich will beim CSS einen Code einbauen für Links, das wenn man über sie drüberfährt sie orange werden (ahover). Hab einiges versucht aber nichts hat geklappt. Wäre über Hilfe sehr sehr sehr dankbar!
CSS
CSS Maincode:
Code: Alles auswählen
/*General*/
body{
font-family: "Arial", Times, serif;
background-image: url('../img/pat.gif'); background-repeat: repeat-x; background-color: #0C0B09;
margin: 0px;
padding: 0px
}
acronym {
font-weight: bold;
border-bottom: 0px dotted #ffffff;
cursor: help;
}
/*1° rule for footer in bottom to the page*/
html, body{
margin: 0;
padding: 0;
height: 100%;
}
/*2° rule for footer in bottom to the page*/
body>div#container{
height: auto;
min-height: 80%;
}
/*Container*/
#container{
position: relative;
height: 100%;
background-color: #191919;
border-right: 15px solid #000;
width: 724px;
padding: 0px;
voice-family: "\"}\"";
voice-family: inherit;
width: 700px;
}
/*Header*/
#head h1{
display: none; /*IR for header*/
}
#head {
background: url('../img/headlogo.gif') no-repeat;
border-bottom: 15px solid #000; width: 100%;
padding-bottom: 200px
}
#pic-one{
float: left;
padding: 10px;
}
#text {
width: 450px;
border-left: 10px solid #000000;
padding: 0px;
padding-top: 0px;
padding-left: 30px;
margin-top: 0px;
voice-family: "\"}\"";
voice-family: inherit;
width: 450px;
font-size: 11px; color: White;
}
/*Start navigation rules*/
#navigation{
margin-left: -32px;
float: left;
}
#Kopf a:hover {color:#FF4200; text-decoration:none;}
a:link {color:#ffffff; text-decoration:none;}
a:visited {color:#ffffff; text-decoration:none;}
a:active {color:#ffffff; text-decoration:underline;}
}
#navigation h3{
font-size: 12px;
color: #FF7800;
text-transform: uppercase;
}
#navigation, #text p{
margin-top: 2px;
}
#navigation ul{
list-style-type: none;
}
#navigation ul#links li{
margin-left: 0px;
}
#navigation ul#links li a{
background-color: #151515;
border: none;
border-top: 1px solid #000;
width: 172px;
voice-family: "\"}\"";
voice-family: inherit;
width: 130px;
font-size: 11px;
}
#navigation ul#links li a{
color: White;
border-left: 10px solid #000;
border-right: 5px solid #000;
}
#navigation ul#links li a:hover{
background-color: #FF7800;
color: White;
}
#navigation ul li a{
display: block;
text-decoration: none;
border: 1px solid #000;
border-bottom: none;
width: 100px;
padding: 2px;
background-color: #eee;
color: Black;
font-size: xx-small;
text-transform: uppercase;
}
#navigation ul li a:hover{
background-color: Black;
color: White;
}
#navigation ul li.last a, #navigation ul#links li.last a, #navigation ul#switch li.last a {
border-bottom: 1px solid #000;
}
/*Container of paragraphs*/
#text{
margin-left: 160px;
padding: 0 1.5em 5em;
}
/*************************Footer*************************F*/
#piedipagina{
position: absolute;
bottom: 0;
width: 100%;
font-size: xx-small;
padding: 10px 0;
clear: both;
border-top: 10px solid #000;
text-transform: uppercase;
}
#piedipagina a{
color: #ff7800;
}
#piedipagina a:hover{
text-decoration: none;
}Code: Alles auswählen
/*High Contrast css*/
@import url("01.css");
body{ background-image: url('../img/pat2.gif'); }
Code: Alles auswählen
/*High Contrast css*/
@import url("01.css");
body, #navigation ul li a, #piedipagina{
font-family: Arial, Helvetica, sans-serif;
}
#container{
background-color: White;
}
#navigation ul li a{
font-size: 12px;
}
/*************************Footer*************************F*/
#piedipagina{
position: absolute;
bottom: 0;
width: 100%;
font-size: 12px;
padding:0 0;
clear: both;
border-top: 1px dashed #ffffff;
}
#text{
padding-bottom: 20px;
font-weight: bold;
}Code: Alles auswählen
/*High Contrast css*/
@import url("01.css");
#text{ text-align: justify; word-spacing: -1px; }
body{ background-image: url('../img/pat3.gif'); }
HTML
Index:
Code: Alles auswählen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>ThuG-Reccords Infodatenbank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="false" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<link rel="stylesheet" type="text/css" href="style/01.css" media="screen"
title="default" />
<link rel="alternate stylesheet" type="text/css" media="screen"
href="style/hc.css" title="hc" />
<link rel="alternate stylesheet" type="text/css" media="screen"
href="style/jtfy.css" title="justify" />
<link rel="alternate stylesheet" type="text/css" media="screen"
href="style/bg.css" title="bg" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="author" content="Emiliano Pennisi." />
<meta name="Copyright" content="Copyright note here" />
<meta name="description" content="Description here" />
<meta name="keywords" content="Keywords here" />
<script type="text/javascript" src="js/scripts.js">
</script>
</head>
<body>
<div id="container">
<div id="head" title="Monkey Channel -My web zapping">
<h1><span></span></h1>
</div>
<!--Navigation -->
<div id="navigation">
<ul id="links">
<li style="list-style: none">
<h3 align="center">NEWS</h3>
</li>
<li><a href="#" title=""><span lang="de-ch">Home</span></a></li>
<li><a href="#" title="">Szene News</a></li>
<li><a href="#" title="">Newsletter</a></li>
<li><a href="#" title="">Releases</a></li>
<li><a href="#" title="">Tourdates</a></li>
<li class="last"><a href="#" title="">On Air</a></li>
</ul>
<!--Links menù -->
<ul id="links">
<li style="list-style: none">
<h3 align="center">Informations</h3>
</li>
<li><a href="#" title="">Artists A-Z</a></li>
<li><a href="#" title="">Crews</a></li>
<li><a href="#" title="">Labels</a></li>
<li><a href="#" title="">Interviews</a></li>
<li><a href="#" title="">Reviews</a></li>
<li class="last"><a href="#" title="">Downloads</a></li>
</ul>
</div>
<!--End Navigation -->
<!--Contents -->
<div id="text">
<h2><font color="#FFFFFF">Home</font></h2>
<p align="justify">
<font color="#FF7800">
<a href="http://thug-reccords.com" target="_blank">
<img border="0" id="pic-one" alt="ThuG-Reccords.com" src="img/pic.gif" height="120"
width="160" /></a></font><acronym title="www.thug-reccords.com"><font color="#FF7800">ThuG-Reccords.com</font><span lang="de-ch">
</span></acronym>stellt seine Infodatenbank online. Diese Seite hier soll als In<span lang="de-ch">formationszentrum
für Hip-Hop Fans dienen. Hier habt ihr die Möglichkeit die neuesten Szene News,
Album Releases oder Tourdaten uvm. auszuchecken. Ausserdem haben wir in der
Informations-Ecke detailliertere Informationen zu Artists, Crews und Labels,
sowie eine Datenbank mit Interviews und Reviews. Das ThuG-Reccords Team wünscht
euch viel Spass beim Durchstöbern der Info-Seite!<br>
<br>
</span>
<acronym title="Bei Interesse E-Mail an infodatenbank@thug-reccords.com"><br>
<font color="#FF7800" size="2">M<span lang="de-ch">ITMACHEN</span>!<br>
</font></acronym>
<span lang="de-ch">Du hast selbstgeschriebene Biografien, Reviews oder
Informationen über Crews?<img alt="Wir wollen dich!" src="img/pic1.gif" height="99"
width="160" align="right" /> Du machst selber Musik und willst deine Songs oder Beats
irgendwo online stellen? Oder willst du bei ThuG-Reccords als Designer, Coder,
Reviews- und Biografienschreiber... mitwirken? Du hast eine eigene Seite und
willst auf Biografien, Reviews, News, Realeses... verlinken? Melde dich einfach
bei uns im Forum, beim Portal oder unter
<div id="Kopf"><a href="mailto:infodatenbank@thug-reccords.com">
<font color="#FFFFFF">infodatenbank@thug-reccords.com</font></a>.</div>
<p align="justify"> <br>
<br>
<br>
<b><font color="#FF7800">RECHTLICHES:</font></b> Diese Seite ist Teil vom
kostenlosen Onlineangebots von ThuG-Reccords.com. Der aufgeführte Inhalt wurde
entweder selber erstellt oder wurde uns zugeschickt. ThuG-Reccords haftet nicht
bei Schäden oder für die Korrektheit, Vollständigkeit, Aktualität oder Qualität der dargebotenen Informationen
und Downloads.<br>
Für den Inhalt fremder Seiten, d.h. verlinkter Seiten sind ausschliesslich deren
Autoren zuständig. Bei Fragen steht diese Kontaktadresse zur Verfügung:<br>
<a href="mailto:rechtliches@thug-reccords.com">rechtliches@thug-reccords.com</a>.<br>
<br>
<br>
<b><font color="#FF7800">Partner, Sponsoren, Quellen:<br>
<a href="http://thug-reccords.com" target="_blank">
<img border="0" id="pic-one" alt="ThuG-Reccords.com" src="img/pic2.gif" height="60"
width="80" /></a><br>
</font></b></p>
</div>
<!--Footer -->
<div id="piedipagina" style="width: 567; height: 34">
<p align="right"><a href="#">
<img border="0" alt="top" src="img/pic3.gif" height="15"
width="163" align="left" /></a><font color="#FFFFFF">Copyright 2005 by ThuG-Reccors.com</font></p>
</div>
</div>
</body>
</html>
