zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden UL und LI Probleme IE, Opera und FF

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.04.2007, 21:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2007
Beiträge: 5
jluerken befindet sich auf einem aufstrebenden Ast
Frage UL und LI Probleme IE, Opera und FF

Hi Leute,

ich versuche mich gerade an einem Menü mit UL und LI Tags.
Im IE7 und Opera9.1 sieht der Kram normal aus aber im FF2 sind die Abstände zu groß.
Ich hab schon gegoogelt und 3 Stunden rumprobiert aber nun geb ich auf.

Vielleicht hat ja jemand von Euch ne Idee.

Hier mal ein Screen mit IE und Opera


und hier einer wie das mit FF aussieht


Hier der CSS Code
Zitat:
ul {
#list-style-type: square;
list-style-image: url('images/li_bullet.jpg');
color: #FFA34C;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
line-height: 16px;
}
ul { padding-left: 20px; }
ul a:hover {
color: #970710;
font-weight: bold;
}
Jemand ne Idee?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.04.2007, 23:55
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

poste doch mal eine "live"- bzw. Online-Version. Danke

* {margin:0; padding:0;} hast du in der CSS Datei schon drin?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.04.2007, 00:09
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2007
Beiträge: 5
jluerken befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von andreas' Beitrag anzeigen
Vielleicht dem list-style-image: url('images/li_bullet.jpg'); noch ne Angabe zur Position der Grafik?
So wie ich das sehe sind die Bullets im FF unten platziert.
Ich denke nicht das es das ist. Es geht mir auch vielmehr darum das jeder Menüpunkt korrekt in der Mitte der darunter liegenden Grafik ist.
(Wie auf dem ersten Bild zu sehen)

Zitat:
Zitat von BlackHawk Beitrag anzeigen
poste doch mal eine "live"- bzw. Online-Version. Danke

* {margin:0; padding:0;} hast du in der CSS Datei schon drin?
Nein hab ich nicht und das ist auch nicht gewollt.
Hier mal die Liveseite (in Arbeit!)
CFN-Gaming - Wo der Skill sich nicht hin traut! :: News // sponsored by www.clanforums.com
Mit Zitat antworten
  #4 (permalink)  
Alt 08.04.2007, 00:13
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von andreas' Beitrag anzeigen
Vielleicht dem list-style-image: url('images/li_bullet.jpg'); noch ne Angabe zur Position der Grafik?
Bei list-style-image läßt sich nichts positionieren, und gleichzeitig interpretieren die Browser dies sehr unterschiedlich, daher rate ich immer davon ab und empfehle, die Grafik als background-image einzubinden, mit Top-Position in em (wegen Textvergrößerung).

@jluerken: Erzeuge die horizontalen Linien zwischen den Links per border; mit Deiner Hintergrundgrafik klappt das nicht, da nicht skalierbar. Das Ergebnis siehst Du bereits jetzt, und erst recht bei Textvergrößerung: Alles wird zerschossen.
Mit Zitat antworten
  #5 (permalink)  
Alt 08.04.2007, 12:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2007
Beiträge: 5
jluerken befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
@jluerken: Erzeuge die horizontalen Linien zwischen den Links per border; mit Deiner Hintergrundgrafik klappt das nicht, da nicht skalierbar. Das Ergebnis siehst Du bereits jetzt, und erst recht bei Textvergrößerung: Alles wird zerschossen.
Erstmal Euch allen Frohe Ostern und vielen Dank für die vielen guten Antworten bisher.

Heiko leider kann ich die Hintergrundgrafik nicht durch Border gestalten da die Grafik selbst einen schwachen, aber dennoch verhandenen Farbverlauf hat.
Ohne siehts einfach nicht so gut aus.
Ich benötige also wohl eine andere Lösung.

Ich überlege den Kram über Tabellen <tr> zu lösen und ganz weg von ul und li zu gehen aber wenn jemand ne Lösung hätte könnte ich mir die Arbeit natürlich sparen
Mit Zitat antworten
  #6 (permalink)  
Alt 08.04.2007, 21:18
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Von Tabellen solltest du ganz weg bleiben, viel zu unübersichtlich und das Element ist dafür auch nicht gedacht.

Gib dem <li>- Element doch die Hintergrundgrafik mit dem Verlauf und <a> dann das Bullet + padding-left.. Oder spricht etwas dagegen?
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe
Mit Zitat antworten
  #7 (permalink)  
Alt 08.04.2007, 22:27
Benutzerbild von Crizzo
der mit dem Editor kämpft
XHTMLforum-Kenner
 
Registriert seit: 17.10.2006
Ort: Ost-Hessen
Beiträge: 4.828
Crizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer MenschCrizzo ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von jluerken Beitrag anzeigen
Nein hab ich nicht und das ist auch nicht gewollt.
Hier mal die Liveseite (in Arbeit!)
CFN-Gaming - Wo der Skill sich nicht hin traut! :: News // sponsored by www.clanforums.com
was spricht dagegen einen einheitlichen Abstand zu schaffen und dann die Abstände der ganzen Seite an den passenden Stellen erneut zu bestimmen?
__________________
Ohne Quelltext gibts selten Hilfe. Also: Onlinebeispiel hochladen und Link bereitstellen!
Foren-FAQ
Mit Zitat antworten
  #8 (permalink)  
Alt 09.04.2007, 00:19
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.848
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von jluerken Beitrag anzeigen
leider kann ich die Hintergrundgrafik nicht durch Border gestalten da die Grafik selbst einen schwachen, aber dennoch verhandenen Farbverlauf hat.
Dann weise sie li zu (wie bereits gepostet), mit repeat-x left bottom; (oder 0 100%).
Mit Zitat antworten
  #9 (permalink)  
Alt 09.04.2007, 13:07
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 07.04.2007
Beiträge: 5
jluerken befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von heiko_rs Beitrag anzeigen
Dann weise sie li zu (wie bereits gepostet), mit repeat-x left bottom; (oder 0 100%).
Kannst du mir ein Beispiel schreiben? Sieht nach ner guten Idee aus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 09.04.2007, 15:14
Benutzerbild von ArcVieh
//
XHTMLforum-Kenner
 
Registriert seit: 19.12.2006
Ort: Gütersloh
Beiträge: 1.844
ArcVieh sorgt für eine eindrucksvolle AtmosphäreArcVieh sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von jluerken Beitrag anzeigen
Kannst du mir ein Beispiel schreiben? Sieht nach ner guten Idee aus
li {
background:transparent url(verlaufgrafik.*) repeat-x left bottom; }

oder das Äquivalent

li {
background:transparent url(verlaufgrafik.*) repeat-x 0 100%; }

meint er.
repeat-x sagt halt, das die Hintergrundgrafik nur horizontal wiederholt wird, left und bottom das es halt links unten positioniert ist, also die Hintergrundgrafik.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe

Geändert von ArcVieh (09.04.2007 um 15:15 Uhr) Grund: Falsche Grafikdatei.
Mit Zitat antworten
Sponsored Links
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
CSS für Firefox, IE, Opera Probleme - Browserweiche talkuvit CSS 4 31.10.2009 19:07
darstellungs probleme im opera max 29 CSS 6 13.03.2009 20:51
CSS-Problem mit IE, FF und Opera ohne Probleme ForrestFunk CSS 1 26.10.2006 12:32
2 Probleme mit divs: Abstand in FF/IE, Fehler in Opera theprofessor CSS 2 25.04.2005 01:20
Probleme mit Opera badhorsie CSS 6 09.10.2004 18:01


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