Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

CMS - MenüButtons in Netscape, Firefox und Opera beschnitten!

Magicmaster_nbb / 9 Antworten / Baumansicht Nickles

Hallo,

folgendes Problem:
ich habe ein Mainmenu, bei dem die Menüpunkte mit einem
Bild hinterlegt sind. Besser gesagt zwei, da ein rollover
besteht. Damit ihr wisst wovon ich rede:

.mainlevel {
letter-spacing : 0px;
padding-left : 15px;
width : 160;
line-height : 22px;
border : 3px solid #FFFFFF;
}

a.mainlevel:link, a.mainlevel:visited {
color : #000000;
background : url('../images/icon01.gif');
font-weight : bold;
background-repeat: no-repeat;
}

a.mainlevel:hover {
color : #FFFFFF;
background : url('../images/icon02.gif');
font-weight : bold;
background-repeat: no-repeat;
}

Mein Problem besteht darin, dass der IE alles perfekt
anzeigt, Netscape, Firefox und Opera mir aber die
Hintergrundbilder des Menüs genau auf die rechte und untere
Kante des Textes beschneiden!
Habe auch schon versucht die Länge und Breite der Bilder
anzugeben. Ändert sich aber nichts!

Hoffe mir kann jemand helfen!

bei Antwort benachrichtigen
Zaphod Magicmaster_nbb „CMS - MenüButtons in Netscape, Firefox und Opera beschnitten!“
Optionen

Wo kann man sich das mal ansehen? Man bräuchte mindestens den HTML-Code des Menues für eine Usrsachenforschung, besser den der ganzen Seite.
HTH, Z.

bei Antwort benachrichtigen
xafford Magicmaster_nbb „CMS - MenüButtons in Netscape, Firefox und Opera beschnitten!“
Optionen

Das Problem besteht wohl darin, daß die Menüelemente keine Block- sondern Inline-Elemente sind. Inline-Elemente sind immer nur so breit, wie ihr Inhalt laut Webstandard, die width im Stylesheet wird also ignoriert (von standardkonformen Browsern).
Packe die Menüpunkte entweder in ein DIV mit vorgegebener Breite, dem Du dann das Hintergrundbild zuweist, oder mache aus dem Menüelementen Block-Elemente per:
display:block;
float:left;
Zu letzterem würde ich dir aber nicht raten, da es die unsaubere Variante ist, die wahrscheinlich noch Nebeneffekte nach sich zieht.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Magicmaster_nbb xafford „Das Problem besteht wohl darin, daß die Menüelemente keine Block- sondern...“
Optionen

Danke für den Tip. Funktioniert bloß leider nicht! Ich werd noch wahnsinnig mit dem Teil!!!

Hier könnt ihr euch mal das Ergebnis ohne Änderungen anschauen: http://www.nbb.de/nbb_cms/
Einfach die Ansicht zwischen IE und z.B. Firefox vergleichen.

Und hier mein kompletter CSS-Code (bei .mainlevel !):

BODY {
margin : 0px 0px 0px 0px;
background-color : #eeeeee;
color : #000000;
}

td, tr, p, div {
font-family : Tahoma, Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
font-size : 11px;
color : #000000;
}

ul {
margin : 0px 0px 0px 0px;
}

li {
list-style-image : url('../images/arrow.gif');
list-style-position:inside
}

hr {
background : #C0C0C0;
height : 1px;
width : 100%;
}


a.buttonbar:link, a.buttonbar:visited {
color : #FFFFFF;
font-weight : bold;
text-transform : uppercase;
}

a.buttonbar:hover {
color : #0E5CAD;
text-decoration : none;
}


a.pathway:link, a.pathway:visited {
color : #285078;
font-weight : normal;
}

a.pathway:hover {
color : #CC6600;
font-weight : normal;
}


.menu {
background : #FFFFFF;
border : 0px solid #C0C0C0;
}

.menutop {
background : #BFDFFF;
border : 1px solid #C0C0C0;
}

.menubottom {
background : #E5E5E5;
border : 1px solid #C0C0C0;
}

.modules {
background : #F7F7F7;
border : 1px solid #C0C0C0;
}

.mainlevel {
letter-spacing : 0px;
padding-left : 15px;
width : 160;
height : 20px;
border : 3px solid #FFFFFF;
}

a.mainlevel:link {
color : #000000;
position : static;
width : 156 px;
background-image : url('../images/icon01.gif');
font-weight : bold;
background-repeat: no-repeat;
}

a.mainlevel:visited {
color : #000000;
width : 156 px;
background-image : url('../images/icon01.gif');
font-weight : bold;
background-repeat: no-repeat;
}

a.mainlevel:hover {
color : #FFFFFF;
width : 156 px;
background-image : url('../images/icon02.gif');
font-weight : bold;
background-repeat: no-repeat;
}

.sublevel {
letter-spacing : 0px;
padding-left : 15px;
width : 110;
line-height : 20px;
border : 3px solid #FFFFFF;
}

a.sublevel:link, a.sublevel:visited {
color : #000000;
width : 143 px;
background-image : url('../images/icon03.gif');
font-weight : bold;
background-repeat: no-repeat;
}

a.sublevel:hover {
color : #FFFFFF;
width : 143 px;
background-image : url('../images/icon04.gif');
font-weight : bold;
background-repeat: no-repeat;
}

table.moduletable th {
font-size : 11px;
font-weight : bold;
color : #0088CA;
text-align : left;
letter-spacing : 0px;
border-bottom : 1px solid #AFD1F4;
}

table.moduletable {
margin: 0px 0px 0px 0px;
width: 95%;
border-left: solid 0px #000000;
border-right: solid 0px #000000;
border-top: solid 0px #000000;
border-bottom: solid 0px #000000;
}

.sectiontableheader {
background-color : #AFD1F4;
color : #FFFFFF;
height : 20px;
font-weight : bold;
letter-spacing : 1px;
}

.sectiontableentry1 {
background-color : #F0F0F0;
}

.sectiontableentry2 {
background-color : #E0E0E0;
}


.date {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 10px;
color : #000000;
text-decoration : none;
font-weight : normal;
}


.small {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
color : #CC6600;
text-decoration : none;
font-weight : normal;
}

.smalldark {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-size : 9px;
color : #002850;
text-decoration : none;
font-weight : normal;
}

.contentpane {
text-align : justify;
background : #F7F7F7;
border : 1px solid #C0C0C0;
padding-right : 10px;
margin-bottom : 10px;
}

.contentpaneopen {
text-align : justify;
background : #F7F7F7;
border : 1px solid #C0C0C0;
margin-bottom : 10px;
}

.contentheading, .componentheading {
font-size : 13px;
font-weight : bold;
color : #000000;
letter-spacing : 2px;
border-bottom : 1px solid #AFD1F4;
text-align : left;
}

.createdate {
font-family : Arial, Helvetica, sans-serif;
font-size : 10px;
color : #999999;
text-align : left;
}

.button {
font-family : Arial, Helvetica, sans-serif;
font-style : normal;
font-size : 11px;
color : #000000;
background : #EFEFEF;
border : 1px solid #C0C0C0;
}

.inputbox {
font-family : Arial, Helvetica, sans-serif;
font-size : 11px;
color : #000000;
background : #F7F7F7;
border : 1px solid #C0C0C0;
}

a:link, a:visited {
font-size : 11px;
color : #285078;
text-decoration : none;
font-family : Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
}

a:hover {
color : #CC6600;
text-decoration : none;
}

a.category:link, a.category:visited {
color : #285078;
font-weight : bold;
letter-spacing : 1px;
}

a.category:hover {
color : #CC6600;
}

bei Antwort benachrichtigen
xafford Magicmaster_nbb „Danke für den Tip. Funktioniert bloß leider nicht! Ich werd noch wahnsinnig...“
Optionen

Die Ursache liegt in dem was ich vermutet hatte. Du gibst dem Anchor-Tag (Link) ein Hintergrundbild, ein Anchor ist aber ein Inline-Elementund kein Block-Element. Standardkonform sind Inline-Elemente aber nur so breit wie ihr Inhalt, auch wenn man ihnen mit CSS eine andere breite zuweist.
Die Lösungen 1 wären:

a.sublevel:link, a.sublevel:visited {
color : #000000;
display:block;
width : 143 px;
background-image : url('../images/icon03.gif');
font-weight : bold;
background-repeat: no-repeat;
}

a.sublevel:hover {
color : #FFFFFF;
display:block;
width : 143 px;
background-image : url('../images/icon04.gif');
font-weight : bold;
background-repeat: no-repeat;
}
(float kann hier entfallen, da Du die Links ohnehin zeilenweise anzeigst. Die Lösung 2 wäre, daß Du das Hintergrundbild den Tabellenzellen (TD) der Tabelle zuweist, in der die Links sich befinden.

Noch eine kleine Zusatzbemerkung. Der Code der Seite ist recht weit entfernt davon standardkonform zu sein und dein /euer Impressum ist unzureichend und entspreicht nicht den gesetzlichen Auflagen.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Magicmaster_nbb xafford „Die Ursache liegt in dem was ich vermutet hatte. Du gibst dem Anchor-Tag Link...“
Optionen

Das Impressum ist noch nicht fertig!
Die Seite befindet sich noch im Aufbau!

bei Antwort benachrichtigen
Magicmaster_nbb Nachtrag zu: „CMS - MenüButtons in Netscape, Firefox und Opera beschnitten!“
Optionen

Hallo nochmal,

hat sich erledigt, habe es hinbekommen!

Trotzdem Danke...

bei Antwort benachrichtigen
xafford Magicmaster_nbb „Hallo nochmal, hat sich erledigt, habe es hinbekommen! Trotzdem Danke... “
Optionen

Soso, Du hast es hinbekommen... wie hast Du das denn gemacht?

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen
Magicmaster_nbb xafford „Soso, Du hast es hinbekommen... wie hast Du das denn gemacht?“
Optionen

Eigentlich schon so wie Du es vorgeschlagen hast!
Nur hat es bei den Untermenüs nicht funktioniert.
Daher habe ich jetzt bei den Untermenüs die Buttons
weggelassen! So sieht´s jetzt in meiner CSS-Datei aus:

.mainlevel {
letter-spacing : 0px;
padding-left : 15px;
width : 160;
line-height : 20px;
border : 3px solid #FFFFFF;
}

a.mainlevel:link {
display : block;
width : 160px;
height : 20px
position : static;
background-image : url('../images/icon01.gif');
color : #000000;
font-weight : bold;
background-repeat: no-repeat;
}

a.mainlevel:visited {
display : block;
width : 160px;
height : 20px
position : static;
background-image : url('../images/icon01.gif');
color : #000000;
font-weight : bold;
background-repeat: no-repeat;
}

a.mainlevel:hover {
display : block;
width : 160px;
height : 20px
position : static;
background-image : url('../images/icon02.gif');
color : #FFFFFF;
font-weight : bold;
background-repeat: no-repeat;
}

.sublevel {
letter-spacing : 0px;
padding-left : 15px;
width : 110;
line-height : 17px;
border : 3px solid #FFFFFF;
}

a.sublevel:link, a.sublevel:visited {
width : 143px;
height : 20px;
position : static;
color : #000000;
font-weight : bold;
background-repeat: no-repeat;
}

a.sublevel:hover {
width : 143px;
height : 20px
position : static;
color : #7ea3ff;
font-weight : bold;
background-repeat: no-repeat;


Also wie gesagt...Danke!

Bis zum nächsten Mal...

bei Antwort benachrichtigen
xafford Magicmaster_nbb „Eigentlich schon so wie Du es vorgeschlagen hast! Nur hat es bei den Untermenüs...“
Optionen

Falls Du den Code mit den Untermenüs noch hast, dann stell ihn odch mal kurz online und poste hier einen Link, eventuell bekommt man das auch noch hin.

Pauschalurteile sind immer falsch!!!
bei Antwort benachrichtigen