✔ Firefox Bilder nicht im Container

[darkmana]

Hallo,
arbeite an meinem Lern Layout, im IE bin ich erst mal zufrieden!
Aber im Firefox stehen die Bilder nicht im Div Container, sondern unterhalb?
Hier mal zum anschauen:
http://www.thailovely.de/test/map.htm
hier meine css Datei die ich für meine lernzwecke umgebaut habe :
http://www.thailovely.de/test/test.css

Ich weis nicht wo ich suchen soll!

Danke für Eure Tipps!

Gruss Stephan

 

[Maik]

Hi,

dir sind da gleich mehrere Fehler unterlaufen:

• Das p-Element ist kein Nachfahreelement des ul-Elements.
  

<!-- aus -->

<ul>
    <p>Stadtplan von Pforzheim</p><a href="map/map_stadt.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/city_small.gif" width="15%"></a></p>

    <p>Aus Richtung Karlsruhe oder Stuttgart über BAB A8</font></p>
    <li><p>PF West</p><a href="map/map_west.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_west.gif" width="50%"></a></li>
    <li><p>PF Ost</p><a href="map/map_ost.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_ost.gif" width="50%"></a></li>
    <li><p>PF Nord</p><a href="map/map_nord.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_nord.gif" width="50%"></a></li>
</ul>


<!--wird -->

<p>Stadtplan von Pforzheim</p><a href="map/map_stadt.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/city_small.gif" width="15%"></a>
<p>Aus Richtung Karlsruhe oder Stuttgart über BAB A8</font></p>
<ul>
    <li><p>PF West</p><a href="map/map_west.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_west.gif" width="50%"></a></li>
    <li><p>PF Ost</p><a href="map/map_ost.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_ost.gif" width="50%"></a></li>
    <li><p>PF Nord</p><a href="map/map_nord.htm" target="_blank"><img style="border-color:#ff3300; border-style:ridge; border-width:3px;"src="bilder/map/pf_nord.gif" width="50%"></a></li>
</ul>

• Im Stylesheet fehlt dem folgenden Regelblock die schliessende }-Klammer:
  

#inhalt ul li {
float:left;
width:30%;
}

• Zu guter letzt muss die Floatumgebung mittels der clear-Eigenschaft aufgehoben werden, damit die Bilder innerhalb des DIVs #inhalt angezeigt werden:
  

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="inhalt" class="kursiv clearfix"> ... </div>

 

[darkmana]

Freu mich funktioniert in Firefox, Opera und IE .
Vielen Dank für die schnelle ausführliche Hilfe!

Da wäre ich so schnell nicht drauf gekommen, oder vielleicht nie!

Gruss Stephan