• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Anzeige von CSS NavBar in Mozilla

Status
Für weitere Antworten geschlossen.

RaBastel

Neues Mitglied
Hi Leute, ;Jump

ich hätte mal eine kleine Frage, Ich hab auf einer Seite eine CSS Navigationsleiste eingebaut. Einen Beispielcode hänge ich unten an. Das Ganze sind nebeneinander gesetzte 3D Buttons, die bei einer Bildschirmauflösung vonn 1152x864 gerade so einreihig auf eine Seite passen (bei Verwendung des MS IE). Wenn ich die Seite nun mit Firefox2 öffne, bleibt auf der Seite so ziemlich alles gleich...oder verändert sich unwesentlich. Lediglich die Navigationsleiste wird anders angezeigt. Es verändert sich dabei die Breite der jeweiligen Buttons in soweit, daß der Button dann grade noch so breit ist, wie der Text, der darin steht (Gästebuch...oder sonst was). Das ist jetzt kein Beinbruch, aber wenn es mit nicht all zu großem Aufwand zu beheben wäre, wäre das natürlich klasse. Wie gesagt...ich hänge hier nun mal einen Beispielcode an (meinen kann ich grade nicht anhängen, weil ich nicht zuhause bin), aus dem hervorgeht, wie das ganze gestaltet ist...
Vielleich hat ja jemand ne Idee, wie die Anzeige auch im Firefox gleich bleibt.

<div>
<a href="">Startseite</a>
<a href="">Gästebuch</a>
<a href="">Forum</a>
<a href="">Impressum</a>
</div>
<style type="text/css">
<!--
.navBar {
color: #000000;
width: 150px;
margin: 8px 8px 8px 8px;
padding: 0px 0px 0px 0px;
}
.navBar a {

}
-->
</style>
.navBar a {
border-width: 1px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-right-color: #666666;
border-bottom-color: #666666;
background-color: #9BCCCA;
}
.navBar a:hover {
border-width: 1px;
border-style: solid;
border-left-color: #666666;
border-top-color: #666666;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
background-color: #7BB9B7;
}
.navBar a {
...
text-align: center;
color:#333333;
text-decoration: none;
padding-top: 2px;
padding-left: 4px;
padding-bottom: 2px;
padding-right: 4px;
...
}
.navBar a:hover {
...
color:#666666;
text-decoration: none;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 1px;
padding-right: 3px;
...
}

Schöne Grüße
 
Hi,

mit an Sicherheit grenzender Wahrscheinlichkeit kannst du davon ausgehen das es der FF korrekt anzeigt und die Anzeige im IE Fehler beinhaltet.

Wahrscheinlich schon weil was in der Navileiste kein Layout für den IE hat.

Aber ohne den kompletten Code +CSS ist das schwer zu sagen.
 
Hi,

mit an Sicherheit grenzender Wahrscheinlichkeit kannst du davon ausgehen das es der FF korrekt anzeigt und die Anzeige im IE Fehler beinhaltet.

Wahrscheinlich schon weil was in der Navileiste kein Layout für den IE hat.

Aber ohne den kompletten Code +CSS ist das schwer zu sagen.

Hi Koslowski...


..naja dann muß ich wohl besser sagen "Ich hatte den Eindruck, im IE wird es korrekt angezeigt, und im FF zu klein, bzw. komprimierter." :wink:
Auf jeden Fall entspricht die Anzeige im IE meinen Vorstellungen, die im FF is mir zu mickrig, wenn Du weißt was ich meine. Ich hoffe mal , es gibt ne Lösung daß beide das selbe anzeigen. Wenn es dann noch so aussieht, wies momentan im IE angezeigt wird, bin ich mehr als zufrieden :-)

Hier mal der Code der Seite :

(Gleich vorweg. Daß keine Einrückungen vorhanden sind liegt nicht an mir, sondern am kopieren hier in dieses Fenster. Hier wurde wohl alles automatisch linksbündig gesetzt...bei mir sieht das anders aus.)



<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="HTML 4.01 Specification">
<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Shameless</title>
<base target="hauptframe">
<META name="DESCRIPTION" content="Shameless Band">
<META name="KEYWORDS" content="Shameless, Band, Musik, Music, Rock, Pop, Country, Schlager, Folk">
<META name="ROBOTS" content="index,follow">
<META name="LANGUAGE" content="german,deutsch,DE,AT,CH,US">
<META NAME="DISTRIBUTION" CONTENT="global">
</head>
<body background="weiss003.jpg">
<body oncontextmenu="return false" ondragstart="return false" onselectstart="return false">
<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
<tr>
<td width="100%">
<p align="center">
<img border="0" src="shamelogo.gif" width="863" height="118"></td>
</tr>
</table>
<div class="navbar"><b>
<a target="Hauptframe" href="startseite.htm">Startseite</a>
<a target="Hauptframe" href="band.htm">Die Band</a>
<a target="Hauptframe" href="gallerieauswahl.htm">Bilder</a>
<a target="Hauptframe" href="links.htm">Links</a>
<a target="Hauptframe" href="forum.htm">Forum</a>
<a target="Hauptframe" href="demos.htm">Demos</a>
<a target="Hauptframe" href="buch.htm">Gästebuch</a>
<a target="Hauptframe" href="kontakt.htm">Kontakt</a>
<a target="Hauptframe" href="members.htm">Mitgliederbereich</a>
</div></b>
<style>
.navBar a {
color: #000000;
width: 110px;
margin: 1px 1px 1px 1px;
border-width: 3px;
border-style: solid;
border-left-color: #FFFFFF;
border-top-color: #FFFFFF;
border-right-color: #000000;
border-bottom-color: #000000;
background-color: #FAFAD2;
}
.navBar a:hover {
border-width: 3px;
border-style: solid;
border-left-color: #000000;
border-top-color: #000000;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
background-color: #A9A9A9;
}
.navBar a {
...
text-align: center;
color:#333333;
text-decoration: none;
padding-top: 2px;
padding-left: 4px;
padding-bottom: 2px;
padding-right: 4px;
...
}
.navBar a:hover {
...
color:#666666;
text-decoration: none;
padding-top: 3px;
padding-left: 5px;
padding-bottom: 1px;
padding-right: 3px;
...
}
</center>
</style>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</body>
</html>
 
Status
Für weitere Antworten geschlossen.
Zurück
Oben