✔ Probleme mit Zeilenumbruch im Firefox

Status
Nicht offen für weitere Antworten.
G

godfather_al

Mitglied
Einen schönen Sonntag an alle,

habe eine Frage, zu der ich leider trotz viel Sucherei hier im Forum keine Antwort finden konnte. Habe eine Mini - Site für einen Bekannten gemacht und im Firefox klebt das Menü aneinander (keine Zeilenumbrüche) und auch im Inhaltsbereich ignoriert der Firefox das </br> völlig, könnt Ihr mit hierzu bitte einen Tip geben wie das geht ?

Hier der Code HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Kaufmännische Nachhilfe Düren</title>
<style type="text/css"> @import url(layout.css);</style>
</head>

<body>
<div id="centerBox">
<div id="kopf"><h2>Kaufmännische Nachhilfe Düren</h2></div>
<div id="navigation">
<ul>
<li><a href="index.html">Über uns </a></li></br>
<li><a href="nachhilfe.html">Nachhilfe </a></li></br>
<li><a href="nachpruefung.html">Nachprüfung</a></li></br>
<li><a href="service.html">Service </a></li></br>
<li><a href="angebote.html">Angebote </a></li></br>
<li><a href="kontakt.html">Kontakt </a></li></br>
<li><a href="links.html">Links </a></li></br>
<li><a href="impressum.html">Impressum </a></li></br>
</ul>
</div>

<div id="inhalt"><h1></br>Wer wir sind ...</h1>
<p>Die Kaufmännische Nachhilfe Düren ist eine Nachhilfe - Einrichtung speziell für die Schüler von Berufs- und Handelsschulen sowie alle anderen Oberstufenschüler.</br></br>Unsere Dozenten haben alle eine abgeschlossene kaufmännische Ausbildung und haben alle ein BWL - Studium oder eine vergleichbares Studium absolviert.</br></br>Wir bieten Ihnen professionelle, kurzfristige Hilfe in den Fächern Mathe, BWL, VWL, AWL, Rechnungswesen, Datenverarbeitung und Englisch.</br></br>Nehmen Sie Kontakt mit uns auf und vereinbaren Sie noch heute eine kostenlose Probestunde.</br></br></p>

</div>
</div>
</body>
</html>


und CSS:

/*für alle Bereiche werden die Innen- und Aussenabstände auf 0 gesetzt*/
body, html, #navigation, #container, #inhalt {margin: 0; padding: 0;}

body {font: 100.01% font-family: cursive; margin: auto; background-color: white; text-align: center; /*Zentrierung für IE5.x */}

#container1 {width: 90%; hight: 170em; text-align: left; margin-top: 3em; /*Zentrierung für standartkonforme Browser*/ background-color: grey;}

#centerBox {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px; /* negative Hälfte von width:800px */
top: 50%;
height: 500px;
margin-top: -250px; /* negative Hälfte von height:500px; */
border: 0px solid #000;
background-color: aqua;
}

#kopf {
position: absolute;
left: 50%;
width: 800px;
margin-left: -400px; /* negative Hälfte von width:800px */
top: 50%;
height: 70px;
margin-top: -250px; /* negative Hälfte von height:500px; */
border: 1px solid #000;
background-image: url(Mathe.jpg);
background-repeat: no-repeat;
background-color: white;
text-align: left;
}

#navigation {
position: absolute;
left: 50%;
width: 170px;
margin-left: -400px; /* negative Hälfte von width:800px */
top: 50%;
height: 430px;
margin-top: -180px;
border: 1px solid #000;
background-color: white;
text-align: left;
}


#inhalt {
position: absolute;
left: 50%;
width: 630px;
margin-left: -230px; /* negative Hälfte von width:800px */
top: 50%;
height: 430px;
margin-top: -180px;
border: 1px solid #000;
background-color: white;
color: #806640;
text-align: left;
}

p {font-family: cursive; color: #000000; margin: 25px 25px 0 25px;}

p1 {font-family: cursive; color: rgb(0, 0, 0); font-size: 1.0em;}

h1 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 1.2em;}

h2 {font-family: cursive; color: #000000; margin: 0 25px; padding: 5px 0 0; font-size: 2.0em; font-family: cursive; text-align: right; letter-spacing: 3px;}

/*Navigationsleiste*/

#navigation ul {list-style-type: none; line-height: 1.2; margin: 25px 0 0 0; padding: 0; font-family: cursive;}

#navigation a:link, #navigation a:visited {text-decoration: none; color: black; display: block; font-weight: bold; padding: 2px; padding-left: 15px; rgb(255, 255, 255);font-family: cursive;}

/*hover-Effekte*/

#navigation a:hover {color: gray; background-color: aqua; font-family: cursive;}


Vielen Dank vorab und viele Grüße
Alex
 
Hi,

du hast den Schrägstrich im <br>-Tag an der falschen Stelle gesetzt - er wird in XHTML am Ende notiert: also <br />.

Wenn du in der Listennavigation zwischen den einzelnen Menüpunkten einen Abstand einrichten willst, der in allen Browsern deckungsgleich ist, ist die margin-Eigenschaft die bessere Wahl, als das br-Element.
 
Hi,

vielen Dank für die schnelle Antwort, habe das schon versucht und es klappt, auch in der Navigation mit dem <br/>.

Habe noch eine kurze Frage, wie würde das mit den Abständen in der Navigation mit dem Margin - Befehl gehen, habe das so versucht aber das ging leider nicht:

#navigation ul {list-style-type: none; line-height: 1.2; margin: 25px 0 0 25px; padding: 0; font-family: cursive;}

Viele Grüße
Alex
 
Du hast mit dieser Regelerweiterung gegenüber der vorherigen Fassung lediglich für das ul-Listenelement einen linken Außenabstand definiert.

Die margin-Eigenschaft muss in diesem Fall aber auf die Listenpunkte angewendet werden, wenn du zwischen ihnen den vertikalen Abstand vergrößern möchtest:

Code: 
#navigation ul li { margin-top:25px; }
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück