<div> Layout Problem bei Firefox

Status
Nicht offen für weitere Antworten.
Mik3e

Mik3e

Erfahrenes Mitglied
Hi zusammen,

Bin gerade dabei von Table-based Layout auf CSS Layout "umzulernen". Gar nicht so einfach, wenn man 5 Jahre lang die tabellenbasierten Layouts gewohnt ist.

Jedenfalls habe ich mir ein Menü mit Hilfe der ul List gebaut. Sieht auch ganz fein aus, jedoch hab ich ein Problem mit Firefox. Dort wird der erste Menüpunkt ca. 20 Pixel nach rechts eingerückt (siehe beiliegende Grafik). Im IE passt alles.

Hat hier ein CSS Pro vielleicht eine Idee, wo das Problem liegen könnte?

Der Quelltext (Site):
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="topmenu"><ul>
  <li><a href="about/">Location Anmietung</a></li>
  <li><a href="community/about/">Art &amp; Entertainment Cluster </a></li>
  <li><a href="teams/">Terminkalender</a></li>
  <li><a href="development/">Kontakt &amp; Imporessum </a></li>
</ul></div>
</body>
</html>

Und hier die Style Definitionen (CSS):
HTML: 
/*
== -------------------- TOPMENU -------------------- ==
*/

#topmenu {
	font-size: 11px;
	line-height: 21px;
	color: #FFFFFF;
	width: 963px;/*953px;*/
	background-color: #990000;
	border-top: solid 8px #B30000;
	border-bottom: solid 2px #B30000;
	clear: both;
	font-weight: bold;
	text-align: left;
}

#topmenu ul {
    list-style-type: none;
    height: 21px;
    border-left: solid 1px #B30000;
    margin: 0px;
}

#topmenu li {
    float: left;
	white-space:nowrap;
}

#topmenu li a {
    color: #FFFFFF;
    text-decoration: none;
    border-right: solid 1px #B30000;
    border-top: solid 1px #990000;
    padding: 0 15px 0 13px;
    display: block;
    float: left;
}

#topmenu li a:hover {
    background-color: #8C8C8C;
    border-top: solid 1px #FFFFFF;
}

#topmenu li.act a {
    font-weight: bold;
    background-color: #8C8C8C;
    border-top: solid 1px #FFFFFF;
}

#topmenu li.act a:hover {
    border-top: solid 1px #FFFFFF;
}

Bin Euch für jeden Ratschlag dankbar,
Ciao,
Mike
 

Anhänge

  • 26243attachment.jpg
    26243attachment.jpg
    25,4 KB · Aufrufe: 24
Hi,

setze zu Beginn des StyleSheets für das Menue mal die Aussen- und Innenabstände der unsortierten Liste
sowie der Listenpunkte auf Null.
Code: 
#topmenu ul, #topmenu ul li{ margin: 0; padding: 0;}
Ciao
Quaese
 
Hi,

Danke, genau das war das Problem ... Hatte die Deklaration der Paddings vergessen.
Habe aber noch ein anderes Problem. Der Content Teil besteht aus zwei Elementen. Links ein Submenü, Rechts der Content.

Um den gesamten Inhalt liegt ein DIV Tag, der einen Rahmen bildet und den Hintergrund für diesen Bereich weiß färbt.

Mein Problem: Die Länge des Div Tags "Container" richtet sich nach dem enthaltenen Div "Content" und ignoriert die Höhe des Div "Leftmenu". Daher hört der Hintergrund irgendwo mitten im linken Menü auf (Überschneidung).

Gibt es eine Eigenschaft mit der ich das Überschneiden unterbinden kann? (d.h. der äußerste DIV Tag legt sich um alle enthaltenen DIVs)?

Ciao,
Mike
 
Hi,

ich gehe mal davon aus, dass das Submenue mit float ausgerichtet wurden. Demnach solltest Du nach
dem Content den normalen Textfluss mit Hilfe von clear wieder herstellen.
Code: 
<div id="container">
  <div id="submenue">Inhalt</div>
  <div id="content">Inhalt</div>
  <div style="font-size: 1px; line-height: 0em; height: 0; clear: both;">&nbsp;</div>
</div>
Vielleicht hilft das weiter.

Ciao
Quaese
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück