|
|||
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; } |
Sponsored Links |
|
|||
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. |
Sponsored Links |
|
|||
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; } 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) |
|
|||
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) |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |