Zuviel abstand im Firefox

Semptic

Hallo ich hab mich jetzt 2 Tage mit diesem Problem beschäftigt aber keine Lösung gefunden.

Mein Problem ist das im Firefox in der Navigation meiner Seite (http://www.kuhnandfriends.de.vu) ein Paar pixel zuviel angezeigt werden.

Hier der Stylesheet code:

Code

div {
	border: 3px solid #FF9900;
	width: auto;
	height: 100%;
	text-align: center;
	padding: 2px;
	margin: 0;
}


#menu {
	height: 725;
	padding: 0;
	margin: 0;	
}


#menu ul {
	text-align: center;
	padding: 0px;
	margin: 0px 0px 0px 0px;
}


#menu li {
	list-style: none;
	display: inline;
	padding: 0px;
	margin: 0px 0px 0px;
	text-align: center;
}


#menu a {
	color: #B4DA67;
	font-size: 14px;
	display: block;
	float: left;
	padding: 3px 0px 3px 0px;
	border: 2px solid #668cb2;
	margin: 0px 1px 0px 1px;
	width: 128px;
	text-align: center;
}


#menu a:link {
	color: #B4DA67;
	padding: 3px 4px 3px 4px;
	border: 2px solid #607834;
	border-color: #CFDFAF #363F16 #363F16 #cfdfaf;
	background-color: transparent;
	text-decoration: none;
}


#menu a:visited {
	color: #B4DA67;
	padding: 3px 4px 3px 4px;
	border: 2px solid #607834;
	border-color: #CFDFAF #363F16 #363F16 #CFDFAF;
	background-color: transparent;
	text-decoration: none;
}


#menu a:hover {
	color: #B4DA67;
	padding: 4px 3px 2px 5px;
	border: 2px inset #607834;
	border-color: #363F16 #CFDFAF #CFDFAF #363F16;
	background-color: transparent;
	text-decoration: none;
}


#menu a:active {
	color: #C9D98A;
	background-color: transparent;
	text-decoration: none;
}

Alles anzeigen

Und hier der von meiner Homepage:

Code

<tr>
			<td valign="middle" align="center">
				<table border="0" align="center" width="100%">
					<tr align="center">
						<td valign="middle" id="menu" height="100%">
							<div style="float:left;"><ul>
								[*]
									[url='index.html']News[/url]

								[*]
									[url='sites/bilder.html']Bilder[/url]

								[*]
									[url='sites/forum.html']Forum[/url]

								[*]
									[url='sites/evangelischejugend.html']EJ[/url]

								[*]
									[url='sites/gb.html']Gästebuch[/url]

							[/list]</div>
						</td>
					</tr>
				</table>
			</td>
		</tr>

Alles anzeigen

Ich hoffe ihr könnt mir dabei Helfen, denn ich bin hier sehr hilflos weil ich keine Ahnung habe woran des noch liegen könnte

driver

hm... ich würd mal auf des padding tippen. ie und ff interpretieren
des anders im zusammenhang mit der breite (der ein zählts hinzu, der
andere zieht den inhalt davon ab). versuch mal die angaben auszukommentieren
und schaumal obs dann gleich aussieht....

Semptic

Du meinst des padding im div tag oder? Hab ich schon probiert aber dann sind unter der Navigation 2px frei. Ich weiß leider nich woher der Firefox diese 2px bezieht.

Semptic

Ich bin jetzt gerade noch mals den ganzen Code durchgegangen und diesmal ist mir aufgefallen dass, wenn ich bei #menu a float: left; setze diese 2px unter dem Menu erscheinen. Weiß einer warum?

sejuma

Das ist ein Bug des IE<7.
Es ist nicht der FF, der falsch anzeigt, sondern der IE.
Deshalb geh mal so vor:
Optimiere die CSS-Angaben mal zunächst für den FF. (Nach meinem Empfinden sieht es im FF bereits zur Zeit besser aus als im IE.)

Dort wo dann der IE abweicht, passt du die CSS für diesen an. Das geht dann so:
Hier nur als Beispiel, ohne dass das in deinem Fall konkret zutreffen muss:

Du schreibst die abweichenden Angaben für den IE dann so zusätzlich in die CSS-Datei:

Zitat

*html div {
padding: 5px;
}

Also vor das entsprechende Element ein *html setzen und die Angabe, die beim IE abweichen soll mit anderen Werten angeben.

Semptic

Gut des werde ich in zukunft machen. Was bedeutet *html ? ließt dies nur der ie aus oder wie?

Aber zurück zu meinem Problem:

Ich hab jetzt den Code bischen verändert und des passt mit den Abständen nur wie bekomm ich jetzt die Buttons gleich groß?

Html:

Code

<tr>
			<td valign="middle" align="center">
				<table border="0" align="center" width="100%" id="menu">
					<tr align="center">
						<td valign="middle" height="100%">
                                                 	<ul>
								[*]
									[url='index.html']News[/url]

								[*]
									[url='sites/bilder.html']Bilder[/url]

								[*]
								   	[url='sites/forum.html']Forum[/url]

								[*]
								    	[url='sites/evangelischejugend.html']EJ[/url]

								[*]
								    	[url='sites/gb.html']Gästebuch[/url]

							[/list]


						</td>
					</tr>
				</table>
			</td>
		</tr>

Alles anzeigen

Css:

Code

#menu ul {
	border: 3px solid #FF9900;
	text-align: center;
	padding: 0; 
	margin: 0;
}


#menu li {
	list-style: none;
	text-align: center;
	margin: 0; 
	padding: 0;
	display: inline;
	width: 128px;
}


#menu a {
	color: #B4DA67;
	padding: 0;
	border: 2px solid #607834;
	width: 128px;		
}

Alles anzeigen

Hab des jetzt auch auf meinen Webspace hochgestellt (http://www.kuhnandfriends.de.vu)

€dit: So ich hab mich bischen gespielt und jetzt stimmts im Firefox aber nicht im Ie ich stell die seite mal hoch. Den neuen text häng ich hier nicht an ausser jemand will ihn sehn (will ja nich gleich am ersten tag im forum ärger bekommen^^)

sejuma

*html liest nur der IE<7.

Ansonsten kann ich dir momentan nicht weiterhelfen. Dein Code ist ein bunter Mix aus Frames, Tabellen und CSS. Da steig ich nicht mehr durch, welche Formatierung durch welche Angaben bewirkt werden.
Aber wenn du weißt, wo du drehen musst, wirst du das sicher auch hinbekommen.

Semptic

Naja ich hab Tabellen und einen Iframe drinnen, werd aber sobald ich des Problem und noch paar sachen hinbekommen hab mich mal drann setzen und die Tabellen abschaffen, denn mir macht des mit stysheets sehr viel spaß.

Wie ich grad geschrieben hab ist jetzt der Fehler beim ie und nicht mehr beim ff.

Auch wenn du mir nich direkt bei meinem problem geholfen hast sag ich danke denn jetzt bin ich schlauer und werd in zukunft meine problem anders angehen. (Nicht mehr ff als schwarzes Schaf ansehen sondern ie)

sejuma

Wenn du die Tabellen für's Layout abschaffst und nur noch mit div's arbeitest, wird das die künfitge Fehlersuche sicher erleichtern und alles übersichtlicher machen.
Fällt mir dann sicher auch viel leichter!

Tags