zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden FF: Darstellungsfehler <li> Menue abhängig von Viewport-Breite

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.07.2015, 08:17
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard FF: Darstellungsfehler <li> Menue abhängig von Viewport-Breite

Guten Morgen,

hier gibt es ein mysteriöses Problem mit der Darstellung eines Hilfsmenüs, CSS-formatiert als Liste:

Beispiel: ICD-10-GM deutsche Version 2015 block-i05-i09test
Screenshot: http://is.gd/pvKr89

Auf diversen Win-Rechnern und FF-Versionen "streckt" sich das markierte Menü nicht auf die ganze Breite; spätestens ab Viewport >=1024px Breite sollte dieses Hilfsmenü aber nur zweizeilig dargestellt werden, um vertikalen Platz zu sparen.

Mac/Safari,
Ubuntu-Chrome/FF (!),
Win-IE,
Win-Opera funktionieren einwandfrei.

Irgendein Tipp, woran das liegen könnte?

Danke + Gruß, nc
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.07.2015, 09:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo,

bei mir verhält sich die Seite unter FF, IE11, Chrome und Opera gleich.

Kann es sein, das du im Firefox AddOns installiert hast? Die können nämlich dazu führen, das der FF Webseiten vermeintlich anders als erwartet bzw. unterschiedlich zu anderen Browsern anzeigt.

Zum Testen sollte man deshalb immer die Browser ohne "Zubehör" und mit den Grundeinstellungen verwenden. Auf das, was die User an AddOns installieren oder welche Einstellungen sie ändern kann man sowieso nicht reagieren.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.07.2015, 09:52
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Danke für den Tipp, dass hatte ich auch schon erwogen:

Deshalb FF-Portable 'installiert' und es mal damit versucht:
Leider gleicher Effekt.

Auch die Virenscanner hatte ich im Verdacht, allerdings gleiches Verhalten bei Maschinen mit BitDefender, Emsisoft, Kaspersky.

Bin ratlos...

Gruß, nc
Mit Zitat antworten
  #4 (permalink)  
Alt 15.07.2015, 10:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.073
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Irgendwo (weiß nicht genau woher :/ ) kommt da ein Abstand her... Gib deinen LIs eine um 1% kleinere Mindestbreite, dann sollte es passen. Vielleicht komme ich ja noch drauf wieso sich das so verhält.
Du könntest auch mit flexbox arbeiten um die Elemente in einer Reihe darzustellen.
Mit Zitat antworten
  #5 (permalink)  
Alt 15.07.2015, 11:44
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Bin ratlos...
Deine Liste enthält zwei grundsätzliche Probleme, die einem stabilen, vorhersehbaren Layout entgegenstehen:

1. Du mixt bei einem Element (hier li) zwei unterschiedliche Einheiten: px und %. Da die nicht einfach berechnet werden können, sondern mehr oder weniger vom Browser ermittelt werden müssen kann es zu unterschiedlichen Ergebnissen kommen. Das hat aber nichts mit Browserfehlern zu tun sondern liegt am System.

Um solche Probleme zu vermeiden wurden in der Vergangenheit und teilweise bis heute zwei Container ineinander verschachtelt, deren Größe / Abstände jeweils nur eine Einheit verwenden.

2. Inline-block-Elemente enthalten einen nicht näher definierten rechten Abstand. Der beträgt bei 100%-Zoom etwa 4px. Deshalb wird er auch als 4px-Problem bezeichnet.

CSS Tücken: 4px Abstand bei Inline-Block Elementen | Dev-CC.com

Es handelt sich aber um kein Problem, da der Abstand so vorgesehen ist. Und er ist halt nicht genau 4px groß.

Wenn inline-block-Elemente nebeneinander stehen sollen muss halt ein entsprechender Abstand so eingerechnet werden das es zu keinen Problemen kommt.

Inline-block-Elemente sind deshalb für ein stabiles Layout grundsätzlichl nicht geeignet.

Von daher solltest du nur eine Einheit für die li-Elemente verwenden und sie entweder als block-Elemente definieren oder das Flexbox-Modell anwenden.

Und verzichte auf die zwei Nachkommastellen. Die sind in der Regel vollkommen unnötig.

Gruss

MrMurphy
Mit Zitat antworten
  #6 (permalink)  
Alt 15.07.2015, 18:01
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Hallo, nachdem ich für <li> min-width: 24.52%; auf min-width: 24.4%; reduziert habe, stellt auch der FF die Seite wunschgemäß dar, danke für den Tipp!

Gruß, nc

Geändert von newcoder (15.07.2015 um 18:04 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 19.07.2015, 14:58
Benutzer
neuer user
 
Registriert seit: 06.07.2015
Beiträge: 34
HappyPOny befindet sich auf einem aufstrebenden Ast
Standard Beispiel-Webseiten sind unzugänglich

Zitat:
Zitat von newcoder Beitrag anzeigen
Hallo, nachdem ich für <li> min-width: 24.52%; auf min-width: 24.4%; reduziert habe, stellt auch der FF die Seite wunschgemäß dar, danke für den Tipp!
Die im Startposting verlinkte Beispiel-Webseiten sind leider nicht mehr zugänglich, was schade ist. Es ist nicht bzw. schwer nachvollziehbar, was das Problem geschweige denn die Lösung ist.

@newcoder: Kannst du den Quellcode hier inline posten?

Gruss, Gustav
Mit Zitat antworten
  #8 (permalink)  
Alt 20.07.2015, 09:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.02.2011
Beiträge: 69
newcoder befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von HappyPOny Beitrag anzeigen
@newcoder: Kannst du den Quellcode hier inline posten?
Ja, klar:
Code:
/* Zeile 262 */
li.navsuboben
{
  padding-top: 2px;
  padding-right: 2px;
  padding-bottom: 2px;
  padding-left: 2px;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-style: solid;
  border-top-color: #999999;
  border-right-color: #999999;
  border-bottom-color: #999999;
  border-left-color: #999999;
  font-size: 0.85em;
  display: inline-block;
  min-width: 24.4%;
  text-align: center;
  box-sizing: border-box;
}
Gruß, nc
Angehängte Grafiken
Dateityp: jpg hilfsmenu.jpg (57,2 KB, 6x aufgerufen)
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
Layout komplett automatisch skalierend ... abhängig vom viewport. knork CSS 3 16.02.2015 12:34
CSS / Fontsize abhängig von Breite des Browserwindows Hawelka CSS 2 21.04.2013 20:56
Horizontale Navigation: <li> in gleicher Breite chilla CSS 3 12.10.2007 16:40
<li> Darstellungsfehler im IE laser CSS 4 20.09.2006 15:43
die breite eines <li> bestimmen [ie ja - firefox nein] onip CSS 6 13.09.2005 20:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:36 Uhr.