unterschiedliche Darstellung bulletmenu Firefox und IE

[Cipolla]

Als Menü meiner CSS Installation verwende ich das bulletmenü. Mit folgendem CSS erhalte ich die gewünschte Darstellung im Firefox Browser. Der IE 5 stellt das Menü ähnlich dar (einiger Abstand zwischen den Menüpunkten). Mit dem IE 6 habe ich plötzlich wieder Listenzeichen vor den Menüpunkten und einen linken Rand. Ich kann mir die Ursache für diese völlig unterschiedliche Darstellung nicht erklären. Habe die Darstellung als Bilddateien angehangen. Kann mir das jemand erklären ?

Falls hilfreich poste ich natürlich auch den Link zur Seite, falls sich das jemand genauer ansehen mag.

.bulletmenu a {
  text-decoration: none;
  margin: 0;
  line-height: 1.5em;
  font-size: 8pt;
  font-weight: bold;
  color: darkblue;
  display: block;
}

.bulletmenu a:hover {
  color: white;
  background-color: rgb(100,135,220);
  text-decoration: none;
}

.bulletmenu ul
{
padding: 3px;
margin: 0px;
list-style-position: outside;
}

.bulletmenu ul li
{
list-style: none;
margin-left: 0px;
}

.bulletmenu ul ul li
{
list-style: none;
margin-left: 5px;
}

[attachment deleted by admin]

[adix]

Hi,

ich habe / hatte aehnliche Probleme .. waere besser, wenn du die Site mal postest.
Es ist wichtig zu sehen, wie bulletmenu die LI / UL Tags aufbaut.
Ich bin eher in asp / asp.net fit .. aber der Array, welcher von der Funktion "ContentManager::GetAllContent(false)" zurueckgegeben wird, verursacht bei mir einige negativen css-Fehler, welche eigentlich syntaktisch richtig sind.
(Dies kommt durch die falsche verschachtelung der Tags)
z.B.
Submenues (Ebene 1) werden je nach Typ unterschiedlich aufgebaut.
Vergleiche Items vom Typ "Link" und "Content"

Firefox sieht darüber jedoch locker hinweg

-> Maybe ist dies bei Dir auch der Grund.

adix

[Cipolla]

Vielen Dank für die bisherigen Posts und Ratschläge. Ich habe den Hinweis von maxi2 befolgt und das CSS überprüft. Glaube nicht, dass es daran liegt. Gibt es weitere Möglichkeiten, eine ähnliche Menüstruktur (wie auf dem Firefox Bild erster Post zu sehen) zu realisieren ?

Begebe mich weiter auf die Suche nach der Ursache. Für weitere Hinweise/Tipps bin ich sehr dankbar.

[m266]

Hi Cipolla,

hatte ein ähnliches Problem. Hier ein Muster-Layout (zentriert) als Basis mit Header und Footer, welches im IE und FF nahezu gleich aussieht. Der CSS-Teil ist ausführlich kommentiert, so dass du ihn leicht auf deine Bedürfnisse anpassen kannst. Wer Interesse an diesem Template hat, darf es gerne verwenden. Wenn es weiterentwickelt wird, informiert mich bitte. Ggf. kann ich eure Ideen mit verwenden. Bitte teilt mir auch mögliche Fehler mit.

Inhalt:




{stylesheet}

title








title


{tag_counter}

{bulletmenu showadmin="1" collapse='1'}

 
    {content}

 
 

© 2005 Admin









CSS:
body {
    color: black; background-color: #c0c0c0;  /*Hintergrundfarbe*/
    font-size: 100.01%;
    font-family: Helvetica,Arial,sans-serif;
    margin: 0; padding: 1em 0;
    text-align: center;  /* Zentrierung im Internet Explorer */
    background-image:url(uploads/images/background/b.jpg); /*Hintergrundbild*/
  }

/* Seite*/
/********************************************/
  div#Seite {
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    width: 760px;
    padding: 0.5em;    /*Innenrand*/
    border: 2px ridge silver;
    /*min-height: 600px; minimale Seitenhöhe*/
    background-color: white;  /*Hintergrundfarbe Seite*/
    display: block;
}

div#Seite h1 {
  color: black;
  text-align: center;
  font-size: 24px;
}

div#Seite h2 {
  color: #111;
  font-size: 14px;
}

div#Seite h2 a:visited {
  color: blue;
}


html>body div#Seite {
    border-color: gray;  /* Farbangleichung an den Internet Explorer  */
  }

/* Header*/
/********************************************/

div#Header{
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
    /*width: 760px;*/
    padding: 0.5em;
    /*border: 2px ridge silver;*/
    /*min-height: 600px; minimale Seitenhöhe*/
    /*background-color: wihte;  Hintergrundfarbe Seite*/
    display: block;
    background-image:url(uploads/images/background/banner1.gif); /*Hintergrundbild*/
  }



/* Footer */
/********************************************/

div#Footer{
    text-align: left;    /* Seiteninhalt wieder links ausrichten */
    /*margin: 0px auto;      standardkonforme horizontale Zentrierung */
    /*width: 760px;*/
    /*padding: 0.5em;*/
    /*border: 2px ridge silver;*/
    /*min-height: 600px; minimale Seitenhöhe*/
    background-color: white;  /*Hintergrundfarbe Seite*/
    display: block;
    clear: both;
  }


/* Menü */
/********************************************/

/* Menü-Umgebung */
div.bulletmenu {
  float: left;
  margin-right: 20px;
  display: block;
  padding: 0 1em;
  /*border: 1px solid red;*/
}

/* Aufzählung im Menü */
div.bulletmenu ul {
    margin: 0px 0px 10px 0px; /* Abstände zwischen den Menüs */
    padding: 0;
  border: 0;
}

/* Aufzählungselement im Menü */
div.bulletmenu ul li {
    list-style: none; /* keine Aufzählungs-Punkte */
    margin: 0;
}

/* Links als "Buttons" */
div.bulletmenu ul li a {
    display: block; /* Rechteckiger Button*/
    font-weight: bold;
    border: 1px solid black;
    text-decoration: none;
    font-size: 12px;
    margin: 2px 0px;
    padding: 5px 10px;
    width: 150px;
}

/* nicht aktiver Button */
div.bulletmenu ul li a:link {
    color: black;
    background-color: #DDD;
}

/* besuchter Link (Button) */
div.bulletmenu ul li a:visited {
    color: black;
    background-color: #DDD;
}

/* "mouse-over-Effekt" beim Button */
div.bulletmenu ul li a:hover {
    color: black;
    background-color: #DDF;
}

/* angeklickter Button */
div.bulletmenu ul li a:active {
    color: white;
  background-color: gray;
}

/* Button der aktuellen Seite */
div.bulletmenu ul li a.currentpage {
  color: white;
  background-color: blue;
}
div.bulletmenu ul li a.currentpage:visited {
  color: white;
  background-color: blue;
}


/* Sub-Menü */
/********************************************/

/* Aufzählung im Submenü */
div.bulletmenu ul li ul {
    margin: 0;
    padding: 0;
}

/* Aufzählungselement im Submenü */
div.bulletmenu ul li ul li {
    list-style: none; /* keine Aufzählungs-Punkte */
    margin: 0;
}

/* Links als "Buttons" */
div.bulletmenu ul li ul li a {
    display: block; /* Rechteckiger Button*/
    font-weight: normal; /* nicht fett */
    border: 1px solid black;
    text-decoration: none;
    font-size: 12px;
    margin: 0px 2px 2px 20px;
    padding: 5px 10px;
    width: 130px;
}

/* nicht aktiver Button */
div.bulletmenu ul li ul li a:link {
    color: black;
    background-color: #EEE;
}

/* besuchter Link (Button) */
div.bulletmenu ul li ul li a:visited {
    color: black;
    background-color: #EEE;
}

/* "mouse-over-Effekt" beim Button */
div.bulletmenu ul li ul li a:hover {
    color: black;
    background-color: #EEF;
}

/* aktiver Button */
div.bulletmenu ul li ul li a:active {
    color: white;
    background-color: #DDF;
}

/* Button der aktuellen Seite */
div.bulletmenu ul li ul li a.currentpage {
  background-color: #CCF;
  color: black;
}
div.bulletmenu ul li ul li a.currentpage:visited {
  background-color: #CCF;
  color: black;
}



/* Inhalt */
/********************************************/

div#Inhalt {
    margin-left: 15px; /*alt 15em*/
    display: block;
    padding: 0 1em;
    /*margin-top: 10px;  Abstand von oben, auch negativ*/
    width: 480px;
    float: right; /* vorher none*/
    /*border: 1px solid red;*/
     
  }

div#Inhalt h1 {
    font-size: 1.5em;
    margin: 0 0 1em;
}
div#Inhalt h2 {
    font-size: 1.2em;
    margin: 0 0 1em;
}

div#Inhalt p {
    font-size:1em;
    margin: 1em 0;
}

/* allgemeiner Link, unbesucht */
a:link {
    color: blue;
}

/* besuchter Link */
a:visited {
    color: #A0F
}

/* "mouse-over-effect" bei normalen Links */
a:hover {
    color: #44F;
}

[adix]

wow .. thx @ m266.
Ein sehr ausführliches und sauber kommentiertes Template.

Ich habe in der Zwischenzeit einfach das Bulletmenu umgeschrieben, so dass Links in verschachtelten Div-Tags generiert werden.
(also in folgender Hirachie: sectionheader,level1,level2,level3)
Diese können durch css relativ simple in Ihrem Design angepasst werden.
Damit konnte ich den Fehler und die grossen Abstände umgehen .. aber mit deiner Lösung funzt das auch sehr gut.

Falls jemand an dem modul intresse hat .. einfach eine kurze pm an mich.

Adix