zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Site- und Layoutcheck
Seite neu laden redesign meiner page mit fehlerhafter Bildanzeige im IE8

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.12.2009, 23:28
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2009
Beiträge: 32
chopsui befindet sich auf einem aufstrebenden Ast
Standard redesign meiner page mit fehlerhafter Bildanzeige im IE8

Hallo Zusammen,

ich bin gerade dabei meine Seite zu überarbeiten und habe sie soweit schon fertig. Bin jetzt persönlich auf google chrome gewechselt, weils auf meinem ur-alt-rechner einfach der schnellste ist und hab damit auch die page entwickelt.

also ich jetzt den check quer durch alle browser gemacht habe sind mir ein paar kleine sachen aufgefallen.
Das wohl markanteste Problem ist, dass im IE8 fast keine Bilder angezeigt werden. alle bilder, die normal mit <img src... angesteuert werden sind zu sehen. teilweise sind auch hintergrund grafiken über css zu sehen und teilweise nicht. ich weiß mir da absolut keinen rat.

hier mal der code.

im html
Code:
<div class="header" id="portfolio-header">
<h2 class="portfolio"><a href="#" style="text-decoration:none; color:#ff7A00">
<em title="PhotoCiel - PORTFOLIO"></em>portfolio</a></h2>
</DIV>
dazugehöriger css

Code:
h2.portfolio { position:relative; float:left; height: 53px; width:811px; margin: 60px 0px 0px 40px; font-size: 40px;}
h2.portfolio em { position:absolute; background: url('../img/button_portfolio_w.png')left top; float:left; height: 53px; width:611px;}
h2.portfolio a { cursor:pointer;}
h2.portfolio a:hover em { background: url('../img/button_portfolio_w.png')left bottom; float:left;}
das wird also in allen browsern angezeigt außer im IE8, da steht nur der Text. weiß sich da jmd einen Rat? liegt das an dem "em"?

das lustige ist ja zb auch, dass es im IE8 in einem div die hintergrundgrafik anzeigt und im darüberliegenden mit selben code die grafik nicht anzeigt.

zeigt es an im IE8
Code:
.middle { background: url('../img/whiteout.png') left top; position:absolute; width: 100%; ....
zeigt es nicht an im IE8
Code:
.bottom { background: url('../img/logo.png')right bottom no-repeat; width: 100%;...
wie gesagt - im chrome, ff, opera werden alle grafiken angezeigt.

das nächste problem ist, wenn ich die seite im opera öffne, dann schließt es das accordion nicht. bei allen anderen browsern wird das accordion (wenn es fertig geladen ist) geschlossen.

zuständig dafür ist der code im body.
Code:
<body onload="slider.init('slider',0)">
dies scheint aber im opera nicht zu fruchten.
weiß da jmd abhilfe????

letztes problemchen, was mich aber nciht ganz so sehr tangiert - momentan zumindest. ist, dass im opera bei den buttons links und rechts die angaben mit den pixelbreiten scheinbar nicht so passen. also wird die grafik wiederholt nach links/bzw rechts und nach unten. da ich mir die grafiken aber über bottom und top anzeigen lasse, weiß ich im moment nicht so recht, wie ich das problem ja nur im opera lösen soll.

der code dazu schaut im css jedenfalls wie folgt aus.
Code:
#screen .b_next, .b_prev { position:relativ; top:150px; border:0px solid #666; cursor:pointer; display:block; height:0px; width:0px; padding:20px 10px;}
und html so
Code:
<IMG class="b_prev" title="zur&uuml;ck">
<img class="b_next" title="vor">
habe die page auch mal zum live-probieren hochgeladen, weil ich auch nicht wusste, obs an meiner offline-programmierung liegt.

hier also der Link zur Probepage

schaut also einfach mal die verschiedenen browser durch.

geschrieben wurde alles mit dem notepadd++ also selber zusammengesucht.
ich hab mir viele codes zusammengesammelt und bin am ende mehr über probieren, als über fundiertes wissen zu meinem gesammelten code-werk gekommen. nehmt mich also nicht ganz so auseinander

ansonsten ist natürlich kritik an design und umsetzung immer erwünscht.

Ja ich weiß - sehr viele fragen für einen newbee - ich hoffe ihr könnt mir trotzdem weiter helfen. zumindestens für das erste problem.

Herzlichen Dank. Beste Grüße Marcel
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 09.12.2009, 09:39
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Moin,

Zitat:
Zitat von chopsui Beitrag anzeigen
geschrieben wurde alles mit dem notepadd++ also selber zusammengesucht.
ich hab mir viele codes zusammengesammelt und bin am ende mehr über probieren, als über fundiertes wissen zu meinem gesammelten code-werk gekommen. nehmt mich also nicht ganz so auseinander
okay, zum Design sage ich jetzt mal besser nix.

Leider fehlt es dir massiv an fundamentalen Grundlagen.
Du vermischt Groß/Kleinschreibung.
Deine Styles sind alles Inline-Styles, was ein absolutes Nogo ist.
Deine HP hat die 10px-Seuche.
Du nutzt schon massiv JS.

Du würdest dir selber einen Gefallen tun wenn du dich erst mal um die technischen Grundlagen kümmern würdest.
Little Boxes wäre ein guter Anfang.

Die Grundlagen guten Designs zu erarbeiten ist auch nicht verkehrt.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.12.2009, 11:15
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

Mach dich mit den Validatoren bekannt:
[Invalid] Markup Validation of http://photociel.de/newdesign/index.html - W3C Markup Validator
W3C CSS Validator results for http://photociel.de/newdesign/index.html (CSS level 2.1)
Siehe auch die Kriterien für den Sitecheck.

Es gibt jede Menge 404-Fehler, verursacht durch fehlende Bilder. Ein Beispiel.

Ich habe auch schon das Alter erreicht, in dem eine 10px-Schrift"größe" nicht mehr als Text erkennbar ist. Und wenn ich sie vergrößere, dass ich etwas lesen kann, verschwinden die Inhalte teilweise. Feste Pixelhöhen funktionieren nicht mit Textinhalten.

Geändert von fricca (09.12.2009 um 11:21 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.12.2009, 15:56
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 12.07.2009
Beiträge: 969
rs-web befindet sich auf einem aufstrebenden Ast
Standard

Hi,
ich kann mich meinen Vorrednern nur anschließen. Du brauchst die Grundlagen. Und nix für ungut aber das Design ist nicht so gut*Geschmackssache*. Ich dache am Anfang, dass ich einen Anzeige fehler habe..
LG rs-web
Mit Zitat antworten
  #5 (permalink)  
Alt 10.12.2009, 20:20
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2009
Beiträge: 32
chopsui befindet sich auf einem aufstrebenden Ast
Standard

ach herjeee. da nehmt ihr mich ja ganz schön auseinander

Naja. zum Thema Design, da steh ich drüber. weil ich das halt mal komplett anders machen wollte.

zum Thema unvollständige seite/fehlende Inhalte muss ich sagen, dass ich bisher nur das nötigste hochgeladen habe und viele Vorschaubilder und dann die verlinkten Bilder garnicht erst hochgeladen habe.

dann wars auch schon vorbei mit rausreden
die Sache ist halt die - ich mach das ganze nur nebenbei und mach mal meine Page neu, oder die meiner Freundin. dafür sich alle Grundlagen anzueignen, ich weiß halt nicht, ob sich der Zeitaufwand lohnt.
aber generell habt ihr natürlich recht. wenn man sowas macht, dann muss man auch die Grundlagen beherrschen.

die 615 Fehler allerdings sind schon sehr hart
generell sind das ja aber sehr viele Fehler, die Groß- und Kleinschreibung betreffen - sehe ich das recht???

das erklärt doch aber nicht die Fehler mit den Darstellungen, oder doch???

wie kann ich denn die Fehler beheben?
ich werd mich jetzt erstmal an die Groß- und Kleinschreibungen machen

für Tipps, die die Fehler betreffen wäre ich aber trotzdem dankbar.

EDIT: css hab ich jetzt mal etwas aufgeräumt, ABER den Fehler mit der position: relativ bekomme ich nicht weg, da es mir ja sonst die Buttons woanders hin setzt, da ich diese ja relativ zu dem div setzen muss und wenn ich die Radien (Die Eigenschaft -webkit-border-radius existiert nicht : 4px) lösche, sind ja die Radien gelöscht...

[Invalid] Markup Validation of http://photociel.de/newdesign/index.html - W3C Markup Validator

EDIT2: habe jetzt auch die anderen html seiten aktualisiert. waren bis auf die nun übrig gebliebenen 4 Fehler ja alle nur wegen Groß- und Kleinschreibung.
Deshalb hab ich jetzt immer noch die Fehler bei der Darstellung

W3C CSS Validator results for http://photociel.de/newdesign/index.html (CSS level 2.1)

EDIT3: ich hab jetzt mal alle Thumps mit hochgeladen. Die Links zu den Bildern gehen aber trotzdem nicht, weil nicht hochgeladen. Nur beim impressum oder kontakt da kann man sich mal die bumpbox anschaun.

EDIT4: lol. css is english - sorry - relative..... aber habe es ganz rausgelöscht. war ja unnötig.

ps. was gefällt euch an dem Design eigentlich nicht? weil es so komplett anders ist?
ich habe ein paar css-trends-Seiten durchforstet und mich so inspirieren lassen.

grüße Marcel

Geändert von chopsui (10.12.2009 um 22:50 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 11.12.2009, 09:13
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

eine ganze reihe von fehlern kriegst du schion weg wenn du alleinstehende Tags richtig schreiben würdest:
<img /> <br />

vor dem Schrägstrich eine Leerstelle.
Die img's brauchen das alt-Attribut, sonst gibts da auch einen Fehler.

Die zweite Zeile deines Dokumentes sollte so aussehen:
HTML-Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

Zitat:
Zitat von chopsui Beitrag anzeigen
ps. was gefällt euch an dem Design eigentlich nicht? weil es so komplett anders ist?
ich habe ein paar css-trends-Seiten durchforstet und mich so inspirieren lassen.
Du solltest die Seiten für deine Besucher schreiben und nicht für dich.

Der Unbedarfte betritt deine Seite und sieht: Abgeschnittene Wörter, nichts was man als Navi identifizieren könnte, kein Text

Konsequenz: und tschüss...

CSS-Trendseiten sind überhaupt kein Maßstab.

Das sind hauptsächlich Sites von Selbstverliebten Designern, die an die eigene Eitelkeit, aber nicht an ihre Besucher denken.
Sozusagen eher eine Protzparade.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 11.12.2009, 09:51
Benutzerbild von David
auch, ja!
XHTMLforum-Kenner
 
Registriert seit: 08.11.2007
Beiträge: 2.626
David ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer AnblickDavid ist ein wunderbarer Anblick
Standard

Ich sehe das etwas anders. Das Design an sich finde ich nicht sonderlich spektakulär. Der Farbe nach würde ich zuerst an einen Lippenstift-blog denken. Die geschnittene Schrift fine ich zu extrem, da würde ich mehr von Zeigen. Und warum ist alles groß geschrieben bis auf "My"? Kontakt und Impressum hingegen sind wieder komplett klein geschrieben. Die "rechts"/"links" Button finde ich außen zu abgehakt.

Das Layout ist gewagt. Hubspe hat vollkommen recht, das die Besucher verwirrt sein werden, aber ich denke, wer im Web surft hat auch eine gewisse Neugier und einen Hover-status gibt es ja auch. Allerdings fehlt der für focus! Dann kann man die Seite auch per Tab-Taste gut bedienen. (Hier wäre ein Skiplink am Anfang jeder Kategorie nicht verkehrt, der den Fokus zur folgenden Kategorie setzt und nur beim focus-status sichtbar wird. Des weiteren braucht es da eine sinvolle und strikte Überschriftenstruktur!)
Wenn Du das ganze noch mit dynamischen Höhen hinbekommst (auch bei mir verschwindet der Text zum Teil) kann das durchaus funktionieren.
__________________
github | http://dnaber.de
Mit Zitat antworten
  #8 (permalink)  
Alt 11.12.2009, 18:33
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.06.2009
Beiträge: 32
chopsui befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen,

ich antworte nur mal so zwischendurch. ich hab jetzt mal auf der tollen Validationsseite nen tidy html erzeugen lassen und da sind dann ja auch diese <img \> mit eingebracht. das lustige an der geschichte ist, dass nun in allen anderen browsern die Probleme auftreten, die ich vorher nur im IE hatte. sprich also, dass nur noch die Texte angezeigt werden, nicht aber meine tollen abgeschnittenen Wörter.
noch dazu kommt, dass die ganze Page nun nochmal bestimmt 600px zu weit unten anfängt.

ihr könnt ja mal schaun.

die automatisch validierte version

meine ursprüngliche version

sicher - der code ist von 40 auf 26kb geschmolzen, aber was bringt es mir???

zu dem Thema Design - geschmäcker sind verschieden! und mein design spiegelt ja im gewissen sinne auch den Stil meiner Arbeiten wieder. warum soll ich also den Besucher etwas vortäuschen und mich verbiegen? Das ganze ist nur nebenberuflich und ich bin nicht darauf angewiesen. Und im gewissen Maße muss ich zugeben ist es genau dieses
Zitat:
Das sind hauptsächlich Sites von Selbstverliebten Designern, die an die eigene Eitelkeit, ...
aber ich denke schon an meine Besucher

was ich jetzt aber nicht ganz verstanden habe ist das mit dem Fokus. und wie ich eine Tab-Navigation umsetzen soll ist mir auch noch ein Rätzel.

mit den schriften, dass ist dann wieder eine Eigenheit des selbstverliebten Designers

trotzdem schon mal danke für die Hilfe.
Kümmer mich morgen mal ausführlich damit

Grüße Marcel
Mit Zitat antworten
  #9 (permalink)  
Alt 11.12.2009, 19:09
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

So funktioniert das nicht. Du kannst nicht einfach eine Maschine drüberlaufen lassen und alles ist gut.
Du musst die Fehlerliste der Reihe nach abarbeiten und korrigieren - du selbst.
Zitat:
das lustige an der geschichte ist, dass nun in allen anderen browsern die Probleme auftreten, die ich vorher nur im IE hatte.
Nein, da treten nicht die alten Probleme auf. Schau doch mal deinen neuen Quelltext an -- und such darin die Elemente denen du deine abgeschnittenen Bilder gegeben hast.

Sorry, aber du wirst nicht daran vorbeikommen, zu lernen, was du tust.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 12.12.2009, 07:41
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

ich kann Corina nur zustimmen.
Erzeugen lassen ist immer von großem Übel.

Selbst ist der Mann/Frau heißt die Devise.

Zitat:
Zitat von hubspe Beitrag anzeigen
Leider fehlt es dir massiv an fundamentalen Grundlagen.

Du würdest dir selber einen Gefallen tun wenn du dich erst mal um die technischen Grundlagen kümmern würdest.
Little Boxes wäre ein guter Anfang.

Die Grundlagen guten Designs zu erarbeiten ist auch nicht verkehrt.
Es geht doch nix über Selfrecycling.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
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
Anpassen eines CSS Templates - JPEG als Hintergrundbild setzen soulknot CSS 1 08.05.2011 18:31
IE8 -> Xhtml und normale Links -> Kein Hovereffekt insanic! CSS 4 07.08.2009 21:47
height-Problem! Schniddchen CSS 2 09.05.2008 14:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:37 Uhr.