Zum Inhalt springen
View in the app

A better way to browse. Learn more.

Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

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

Empfohlene Antworten

Veröffentlicht

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

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

<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

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

Ahhhrrghh...

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

die Adresse bräuchte ich...pm %))

Archiv

Dieses Thema wurde archiviert und kann nicht mehr beantwortet werden.

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.