Zum Inhalt springen

[CSS] Probleme mit display: block, background-image und IE


CrusaderX

Empfohlene Beiträge

Tach Jungens und Mädels.

Ich bastel mir grad ne kleine Testseite. Zu finden unter: http://crusaderx.de/data/php-testpage/index.php

Das Menü wird aber in Opera so dargestellt (Den Cursor müsst ihr euch halt vorstellen, ebenso im 2. Screenshot):

screen_opera.jpg

Und im IE so:

screen_ie.jpg

Zum einen bekomm ich den unterste Menüpunkt nicht weg, zum anderen verhagelt der IE die Liste.

Woran kann das liegen?

Die Datei menu.php


<table border="0" cellspacing="0">
<tr>
<td id="Menu" class="Text Oben">
<div id="MenuNav">
<ul>
<li><a href="index.php?section=aktuell">Aktuell<a/></li>
<li><a href="index.php?section=uns">Über Uns<a/></li>
<li><a href="index.php?section=termine">Termine<a/></li>
<li><a href="index.php?section=bilder">Bilder<a/></li>
<li><a href="index.php?section=forum">Forum<a/></li>
<li><a href="index.php?section=gästebuch">Gästebuch<a/></li>
</ul>
</div>
</td>
[/PHP]

Und die CSS-Datei page.css

[PHP]
/* CSS Document for PHP - Testpage */

body {
background-color: #AFAFAF;
}

#Banner {
padding: 0;
width: 800px;
height: 120px;
background-color: #FFFFFF;
background-image: url(img/banner.jpg);
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

#Menu {
padding: 0;
width: 129px;
background-color: #FFFFFF;
text-align: left;
line-height: 20px;
border-left: 1px solid #000000;
border-right: none;
}

#MenuNav ul {
padding: 0;
margin: 0;
margin-top: 10px;
margin-bottom: 50px;
list-style-type: none;
text-align: left;
}

#MenuNav a {
padding-left: 20px;
background-image: url(img/li.gif);
background-repeat: no-repeat;
background-position: center left;
display: block;
height: 20px;
color: #000000;
text-decoration: none;
}

#MenuNav a:hover{
background-color: #EFEFEF;
background-repeat: no-repeat;
background-position: -129px 50%;
display: block;
}


#Inhalt {
width: 649px;
padding: 0;
padding-left: 20px;
padding-top: 10px;
background-color: #FFFFFF;
border-left: none;
border-right: 1px solid #000000;
}

#Fuss {
padding: 0;
width: 800px;
height: 30px;
background-color: #FFFFFF;
background-image: url(img/fuss.jpg);
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}

.Text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

.Oben {
vertical-align: top;
}

Bin total runter mit den Nerven... Sitz jetzt schon 2 Tage an dem Problem und komm einfach net weiter...

Wenn ich display: block weglass sieht's auch beknackt aus. Da hab ich noch mal einen Listenpunkt hinter dem Link. Komischerweise... Aber immerhin sieht's dann in beiden Browsern gleich aus :rolleyes:

Aber das größte Rätsel ist mir der untere Listenpunkt... :(

Vielen Dank!

Gruß, Simon

Link zu diesem Kommentar
Auf anderen Seiten teilen

Zum einen bekomm ich den unterste Menüpunkt nicht weg, zum anderen verhagelt der IE die Liste.

Woran kann das liegen?


    	<ul><li><a href="index.php?section=aktuell">Aktuell<a/></li><li><a href="index.php?section=uns">Über Uns<a/></li></ul>

Im IE müssen alle <ul><li> ohne Whitespaces dazwischen geschrieben werden.

Gruß,

Markus

Link zu diesem Kommentar
Auf anderen Seiten teilen

<li><a href="index.php?section=aktuell">Aktuell<a/></li>
<a> <a/> - ich kann mich net mehr so gut an html erinnern...aber den Tag macht man so nicht zu oder? ;)
<li><a href="index.php?section=aktuell">Aktuell<a/></li>

			<li><a href="index.php?section=uns">Über Uns<a/></li>

			<li><a href="index.php?section=termine">Termine<a/></li>

			<li><a href="index.php?section=bilder">Bilder<a/></li>

			<li><a href="index.php?section=forum">Forum<a/></li>


			<li><a href="index.php?section=gästebuch">Gästebuch<a/></li>

deswegen bekommst du jede neue Zeile ein LI

Link zu diesem Kommentar
Auf anderen Seiten teilen

Ahhhrrghh...

Hey ascom, komm mal kurz her und latsch mir Eine. Aber so richtig! Ich hab's verdient! :D

Da probiert man wie ein Irrer und macht und tut und dann DAS! :rolleyes:

Du kriegst die Tür nicht zu...

Funktioniert jetzt einwandfrei! Danke noch mal. :)

Gruß, Simon der sich nen Termin beim Augenarzt macht

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...