zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Eigenartige Darstellung unter Firefox (Blockelement schmal, Hintergrund zu breit)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.10.2007, 18:45
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2007
Beiträge: 3
jejay befindet sich auf einem aufstrebenden Ast
Standard Eigenartige Darstellung unter Firefox (Blockelement schmal, Hintergrund zu breit)

Hallo, ich habe nach längerem Webdesign-Entzug mal wieder ein Projekt angefangen. Also jetzt nach 2 Tagen Designen ist jetzt die Umsetzung dran und ich hab auch gleich ein problem.

IE und Firefox spielen verkehrte Welt, sprich der Redmond'er stellt es richtig da und der Firefox spinnt eben rum, was mich schlussfolgern lies, dass das Problem an mir liegt.

Der Code:

Code:
<!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" xml:lang="de" lang="de" dir="ltr">
<head>
	<title>blub</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
	<link rel="stylesheet" type="text/css" media="screen,projection" href="style.css" />
</head>
<body>
	<div id="all">
		<ul id="navi_bar">
			<li><a href="">Bi</a></li>
			<li><a href="">Ba</a></li>
			<li><a href="">bum</a></li>
			<li><a href="">se</a></li>
			<li><a href="">bine</a></li>
		</ul>
	</div>
</body>
</html>
Code:
html
{
margin: 0px;
height: 100%;
}

body
{
margin: 0px;
height: 100%;
background-color: #ccff33;
background-image: url(img/background.gif);
background-repeat: repeat-y;
background-position: center;
}

div#all
{
width: 700px;
margin: 0px auto;
}

ul#navi_bar
{
display: block;
width: 670px;
height: 17px;
margin: 0px auto;
background-image: url(img/navi.gif);
background-repeat: repeat-x;
}

ul#navi_bar li
{
display: inline;
}
So wie es aussehen soll (IE) und so wie es im firefox aussieht, hab ich angehangen. Ich hoffe es spricht für sich, ansonsten werd ichs nochmal genauer erklären :P
Angehängte Grafiken
Dateityp: jpg ie.jpg (19,7 KB, 12x aufgerufen)
Dateityp: jpg firefox.jpg (25,8 KB, 10x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.10.2007, 18:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Du hast die Default-Abstände der Liste nicht zurückgesetzt.
Lies bitte in den FAQ: "CSS-Prolog"

Ohne Hintergrundbilder lässt sich dein Problem übrigens nur erahnen, nicht nachvollziehen. Das nächste Mal also bitte als Link.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.10.2007, 23:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2007
Beiträge: 3
jejay befindet sich auf einem aufstrebenden Ast
Standard

Okay, sry lag wohl daran dass ich die listen-tags bis jetzt immer umgehen konnte :P Vielen Dank

Ich hab nämlich nicht viel weiter noch ein Problem
Wie man in den beiden Screenshots schon sehen kann, sind die Links nicht vertikal zentral sondern kleben am unteren Rand. Mit text-decoration:none; kleben sie sogar noch ein, zwei pixel näher am Rand.
Der Aufbau sieht so aus (siehe Code oben):
<ul><li><a>link</a></li></ul>

gekürzter CSS-Code:
Code:
ul#navi_bar
{
display: block;
width: 670px;
height: 17px;
margin: 0px auto;
background-image: url(img/navi.gif);
background-repeat: repeat-x;
list-style-type: none;
}

ul#navi_bar li
{
display: inline;
padding-right: 9px;
padding-left: 9px;
background-color: red;
}

ul#navi_bar li a
{
display: inline;
font-family: verdana, 'Sans-Serif';
font-size: 12px;
font-weight: bold;
text-decoration: none;
}
Hier sind die einzelnen Listenelemente zum "debugging" rot eingefärbt:
Ergebnis:
Firefox -> <li> viel zu groß, ragt über <ul> hinnaus
IE -> <li> richtige größe (Zeilenhöhe des Links), klebt aber am unteren Rand des <ul>

Meine Frage jetzt: Wie kriege ich die Listenelemente vertikal mittig? Bei vertical-align tut sich nichts...

(bei Bedarf reiche ich Screenshots und/oder ungekürzten Code nach)

edit: Mit einer relativen positionierung gehts zwar, aber imo sehr unschön....

Geändert von jejay (23.10.2007 um 01:23 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 23.10.2007, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 22.10.2007
Beiträge: 3
jejay befindet sich auf einem aufstrebenden Ast
Standard

Sry, schlagt mich für den Doppelpost, aber: Gibt es soetwas wie einen line-height bug im FF?

Ich wollte den abstand (vertikal) eines <a> verringern und hab das dann gemacht, in dem ich line-height den wert der font-size zugewiesen habe. Beim IE hats geklappt aber Firefox reagiert nicht drauf.

Edit: Bei hohen Angaben reagiert der Firefox auch, aber erst beim Sprung von 1.8em auf 1.9em. Was ich brauche ist 0.7em!

Geändert von jejay (23.10.2007 um 13:21 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Falsche Darstellung in Firefox surfinsaxman CSS 5 07.02.2008 15:03
Firefox stellt den Hintergrund nicht ganz dar Maxefix CSS 2 20.08.2006 16:46
Hintergrund wird im alten Firefox nicht gezeigt alexpetri CSS 4 08.08.2006 13:06
Probleme mit der Darstellung im Firefox Xsixpence CSS 5 08.05.2006 23:56
[GELÖST] Firefox 1.0.6 Problem mit Hintergrund! mar123 (X)HTML 0 15.04.2006 19:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:32 Uhr.