Wieso wird die HP falsch angezeigt ???

web673 · 26 August 2008

Hi

ich habe hier etwas geschrieben:

Link: Willkommen

im FireFox 3 und IE 7 wird alles korekt angezeigt..

aber im FF2 und IE 6 sind fehler ? weiß wer wieso ? die fehler werden jedem gleich auffallen

vlt kann mir wer ne lösung sagen

danek schonmal

fiedel · 26 August 2008

Au weia! ^^
Also zunächst mal werden von meinem Validator (Firefox Add-on) 29 Fehler angezeigt!
Ich vermute jedoch, dass es speziell daran liegt, dass dem Browser kein Doctype vorliegt!
Und bevor ich die restlichen Fehler aufzähle, guck mal hier: [Invalid] Markup Validation of http://91.23.255.123/zollhaus/admin/galerie/ - W3C Markup Validator

Gruß,
fiedel

web673 · 26 August 2008

ich glaub ich stell einen rekord in fehlern auf..... habe jetzt schon 112 stück (wegen dem doctype.. egal welchen ich nehmn das steigt ins unermessliche egal was ich versuche.. (wenn ich versuche was zu ändern kommen mehr fehler dazu als weggehen...)

ich glaub ich verzicht einfach auf die kompatiblität zu ie 6 und ff2.....

weil ich bekomm das iwie net hin.. was soll daran falsch sein ?

height="770" oder so.. ??? der markiert immer das 1. " rot und ich hab keine ahnung wieso...

ich blicke das tool nicht durch...

threadi · 27 August 2008

Ohne Doctype verzichtest du auf eine Kompatibilität zu allen Browsern ab IE6, Firefox 1.0 und Opera 8. Wenn deine Besucher hauptsächlich mit IE4 surfen könntest du erfolg haben ;)

Btw.: der Doctype gehört vor den gesamten Quellcode, nicht hinter <html> ! Siehe auch:

SELFHTML: HTML/XHTML / Allgemeine Regeln für HTML / Grundgerüst einer HTML-Datei

Der Doctype den du dort eingesetzt hast (nur an der falschen Stelle) fordert außerdem xhtml 1.0 strict validen Code. In dem Fall müssen alle html-Tags auch geschlossen werden. Das gilt auch für Bilder:

Falsch:

Code:

<img src="..." alt="">

Richtig:

Code:

<img src="..." alt="" />

Wenn du auf diese "Kleinigkeit" verzichten willst würde ich dir den HTML 4.01 Transitional Doctype (natürlich an der richtigen Stelle) empfehlen. Dann sollte deine Seite aus deutlich weniger Fehlern bestehen.

Liskel · 27 August 2008

web673 schrieb:
height="770" oder so.. ??? der markiert immer das 1. " rot und ich hab keine ahnung wieso...

770 was denn? Äpfel, Birnen? doch wohl eher Pixel ;) Ich glaube der FF interpretiert das bei fehlender Angabe automatisch als px, darauf sollte man sich aber (gerade beim IE;ugl) bei anderen Browsern nicht verlassen:-?

web673 · 27 August 2008

danke für eure antworten

ich habe jetzt keine fehler (im validator) mehr aber auf der seite schon.. die styles werden nicht korrekt übernommen...

hier der validator link :
[Invalid] Markup Validation of http://91.23.255.3/zollhaus/admin/galerie/ - W3C Markup Validator

ich weiß nicht wie ich das letzte hinbekomme... ich weiß nur das body color usw nihct übernommen werden....

kann mir wer helfen ?

grüße

web673

und noch nedit:
@Liskel:

<img> attribute "width" has invalid value "740px" HTML width and height attributes do not need "px"; their units are always assumed to be pixels.
Good <img src="example.png" alt="Example" width="740px" height="40px" />
Good <img src="example.png" alt="Example" width="740" height="40" />
sagt mir der validator addon...

noch nen edit:
im ie 5.5 wird alles richtig angezeigt xD.. der 6 er is verbuggt und der firefox 2...

Liskel · 27 August 2008

web673 schrieb:
<img> attribute "width" has invalid value "740px" HTML width and height attributes do not need "px"; their units are always assumed to be pixels.
Good <img src="example.png" alt="Example" width="740px" height="40px" />
Good <img src="example.png" alt="Example" width="740" height="40" />
sagt mir der validator addon...

Oh interessant:mrgreen: Danke :-D

web673 · 27 August 2008

hat hier nen profi noch ne idee ?

neuroleptika · 27 August 2008

Ich weiß nicht wie es aussehen soll. Das Layout stimmt in keinem genannten Browser.
Die Selectoren in deinen css-Angaben gibt es zum großen Teil nicht im html-code.

Code:

    body {
    font-family: Arial;
[COLOR=DarkRed]    color: FFFFFF;[/COLOR]
    font-size: 12px;
    text-align: center;
[COLOR=DarkRed]    background-attachment: fixed;
    background-repeat: repeat-y;
    background-position: center top;[/COLOR]
    background-color: #FFFFFF;
    }

Bei color fehlt die Raute.
Du hast das Anzeigeverhalten für ein background-image angeführt aber kein background-image angegeben.

Das ganze Tabellenkonstrukt ist für das Layout unnötig und viel zu kompliziert.

Das Validator-Ergebnis gehört nicht zu der Seite, die du anfangs verlinkt hast.
Um welche Seite geht es denn?
Ich habe mich auf die von der Validator-Ausgabe bezogen.

web673 · 28 August 2008

neuroleptika schrieb:
Ich weiß nicht wie es aussehen soll. Das Layout stimmt in keinem genannten Browser.
Die Selectoren in deinen css-Angaben gibt es zum großen Teil nicht im html-code.

Code:

body { font-family: Arial; [COLOR=DarkRed] color: FFFFFF;[/COLOR] font-size: 12px; text-align: center; [COLOR=DarkRed] background-attachment: fixed; background-repeat: repeat-y; background-position: center top;[/COLOR] background-color: #FFFFFF; }

Bei color fehlt die Raute.
Du hast das Anzeigeverhalten für ein background-image angeführt aber kein background-image angegeben.

Das ganze Tabellenkonstrukt ist für das Layout unnötig und viel zu kompliziert.

Das Validator-Ergebnis gehört nicht zu der Seite, die du anfangs verlinkt hast.
Um welche Seite geht es denn?
Ich habe mich auf die von der Validator-Ausgabe bezogen.

jo das wars mir der farbe ^^ ist mir nicht aufgefallen...

was ich jetzt aber sehe ist folgendes:

( erstmal der validator link:http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0 )
seitenlink: http://91.23.202.149/zollhaus/admin/galerie/
1. im firefox wird jetzt das feld (galerie) so breit gemacht und nicht nur so breit wie der text ist..

2. im ie 7.0 wird alles lang gezogen... kann mir wer da helfen ?
die seite ist so komplett inkompatible zu allen browsern auser ff3. und ich weiß nicht wieso...

grüße

p.s. die homepage läuft gerade zu testzwecken auf meinem pc und ich hab kein dyndns eingerichtet deswegen ändert sich die ip immer.. (ich lad die noch hoch und poste die richtige adresse.. grüße

web673 · 28 August 2008

so nun hab ich sie geuploadet ( www.zollhaus-galerie-augenweide.de/test/admin/galerie

hat wer jetzt noch eine idee...

ich habe die browserkompatiblität nun mal getestet, die sieht so aus:

FireFox

im 2.0 Fehlerhaft
im 3.0 komisch (nur richtig wenn ich den doctype entferne)

im ie

5.5 richtig ... (wieso in diesem blöden browser.. (warscheinlich frisst er den doctype nicht deswegen korrekt angezeigt)
6 alles ist lang gezogen..

ich habe den ersten fehler gefunden aber wei0 nicht wie ich ihn wegbekomme...

das height="100%" frisst der firefox 2 nicht.. sonst geht das bei allen

threadi · 28 August 2008

Du hast in deinem Code viele Konzeptfehler. Das ganze in eine Tabelle zu stecken ist der erste Fehler. Dann gibt es noch solche Schoten:

Code:

<img border="0" src="../../images/ramen/linie_rechts_4.PNG" width="18" height="100%" alt="ramen">

Das Bild soll also auf 100% gestreckt werden - das machen moderne Browser an diesen Stellen aber nicht.

Lösung wäre das Ganze nochmal ohne Tabelle und nur mit CSS statt diesen HTML-Attributen zu entwerfen.

web673 · 28 August 2008

kannst du mir da vieleicht ein beispiel machen? weil mit divs bekomme ich das net hin...

kannste vlt ein beispiel an meiner homepage amchen.

währe dir sehr dankbar.

grüße

threadi · 28 August 2008

Beispiele findest Du in zahlreichen Tutorials zur xhtml-Kodierung. Das zu erläutern würde den Rahmen sprengen.

neuroleptika · 28 August 2008

web673 schrieb:
kannst du mir da vieleicht ein beispiel machen? weil mit divs bekomme ich das net hin...

kannste vlt ein beispiel an meiner homepage amchen.

Du hast alle Rahmen / Schatten als img eingefügt.
Das funktioniert bei mitwachsenden Elementen nicht schön und hat etliche Nachteile. Bilder zur Gerüst-Gestaltung gehören nicht ins html. Dafür sind css-background-images geigneter.
background-image kannst du nicht nur auf <div> sondern auf jedes Element ab <body> anwenden.
Also auch für <table> und <td>.
Der Code wird dann aber schnell aufgebläht und unnötig kompliziert. Tabellen als Layoutmittel sind zu dem veraltet.

Ein Anfang:
html

Code:

<div id="schatten_rechts">
<div id="schatten_links">
<div id="kopf">
<h1>
<span>
<img src="http://www.zollhaus-galerie-augenweide.de/test/images/GalerieAugenweide_LOGO.gif" alt="Gallerie Augenweide" width="191" height="76" />
</span>
</h1>
</div>
<div id="inhalt_innen">
<p><strong>Galerie</strong></p>
<h2>Bilder</h2>
</div>

<p id="fuss">
<span>
Dieses Script unterliegt dem Copyright von Joshua Dietl
</span>
</p>
</div>
</div>

css

Code:

* {
margin: 0;
padding: 0;
}

body {
text-align: center; /* zentrierung IE5 */
}

  #schatten_rechts {
text-align: left;
width: 740px;
margin: 0 auto;
background-image: url(http://www.zollhaus-galerie-augenweide.de/test/images/ramen/linie_rechts_1.PNG);
background-repeat: repeat-y;
background-position: top right;
}

  #schatten_links {
width: 740px;
background-image: url(http://www.zollhaus-galerie-augenweide.de/test/images/ramen/linie_links.PNG);
background-repeat: repeat-y;
background-position: top left;
}

#kopf {
background-image: url(http://www.zollhaus-galerie-augenweide.de/test/images/ramen/linie_oben_.PNG);
background-repeat: repeat-x;
background-position: top left;
}

h1 {
background-image: url(http://www.zollhaus-galerie-augenweide.de/test/images/ramen/ecke_oben_rechts.PNG);
background-repeat: no-repeat;
background-position: top right;
}

h1 span {
display: block;
background-image: url(http://www.zollhaus-galerie-augenweide.de/test/images/ramen/ecke_oben_links.PNG);
background-repeat: no-repeat;
background-position: top left;
text-align: center;  /* zentrierung IE5 */
padding: 25px 0 5px 0;
}


h1 span img {
display: block;
margin: 0 auto;
padding: 25px 0 5px 0;

}


#inhalt_innen {
background-color: #760000;
margin: 0 14px 0 8px;
}

#fuss {
background-image: url(keine-geeignete-Grafik gefunden.PNG);
background-repeat: repeat-y;
background-position: bottom left;
}

#fuss span {
display: block;
margin: 0 14px 0 8px;
background-color: #760000;
color: #FF8000;
}

Solange du nicht padding/margin mit widht für einem Element mischst, funktioniert das auch im IE5 sehr gut.
Das Beispiel wirkt etwas kompliziert weil ich deine Grafiken verwendet habe.
Für ein fixes Layout mit px-Breite ginge das auch einfacher.

web673 · 28 August 2008

danke für deine hilfe ^^.

in der zeit wo du dies gemacht hast habe ich auch angefangen mit css zu arbeiten.. ...

mein werk (test.php (deswegen php weil ich alles per include machen werde)):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Design</title>
<style type="text/css">
<!--

* { margin: 0px; padding: 0px; }
html, body { 
  height: 100%; 
  margin: 0; 
  overflow: hidden; 
  padding: 0; 
  width: 100%; 
} 
* {
	border: 0;
	padding: 0;
	margin: 0;
}
	img {
	border: none;
	vertical-align: middle;
	display : block;
	}
	.oben_ramen {
	position: relative;
	width: 770px;
	height: 12;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_oben_.PNG);
	background-repeat: repeat-x;
	background-position: center;
	}

	.oben_links {
	position: relative;
	width: 12px;
	height: 13px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/ecke_oben_links.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	.oben_rechts {
	position: relative;
	width: 18px;
	height: 13px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/ecke_oben_rechts.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	.linie_links {
	position: relative;
	width: 12px;
	height: 85px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_links.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.linie_rechts {
	position: relative;
	width: 18px;
	height: 85px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_rechts_1.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.logo {
	text-align: center;
	margin: auto;
	background-image: url(../../images/GalerieAugenweide_LOGO.gif);
	background-position: center;
	background-repeat: no-repeat;
	}
	.trennung_links1 {
	position: relative;
	width: 12px;
	height: 1px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/1_trennung_links.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	.trennung_mitte1 {
	position: relative;
	width: 770px;
	height: 1px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_2_unten.PNG);
	background-repeat: repeat-x;
	background-position: center;
	}
	.trennung_rechts1 {
	position: relative;
	width: 18px;
	height: 1px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/1_trennung_rechts.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	.linie_links1 {
	position: relative;
	width: 12px;
	height: 3px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_links.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.linie_rechts1 {
	position: relative;
	width: 18px;
	height: 2px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_rechts_1.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.linie_links2 {
	position: relative;
	width: 12px;
	height: 1px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_links_rot.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.linie_rechts2 {
	position: relative;
	width: 18px;
	height: 2px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_rechts_4.PNG);
	background-repeat: repeat-y;
	background-position: center;
	}
	.inhalt {
	background-color:#7d1f2b;
	color:#FFFFFF;
	}
	.unten_links {
	position: relative;
	width: 12px;
	height: 20px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/ecke_unten_links.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	.unten_mitte {
	position: relative;
	width: 770px;
	height: 20;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/linie_unten_mitte.PNG);
	background-repeat: repeat-x;
	background-position: center;
	}
	
	.unten_rechts {
	position: relative;
	width: 18px;
	height: 20px;
	text-align: center;
	margin: auto;
	background-image: url(../../images/ramen/ecke_unten_rechts.PNG);
	background-repeat: no-repeat;
	background-position: center;
	}
	table {
	margin-left: auto; 
	margin-right: auto;
	}
-->
</style>
</head>

<body>
<table width="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="oben_links"></td>
    <td class="oben_ramen"></td>
    <td class="oben_rechts"></td>
  </tr>
  <tr>
    <td class="linie_links"></td>
    <td class="logo"></td>
    <td class="linie_rechts"></td>
  </tr>
  <tr>
    <td class="trennung_links1"></td>
    <td class="trennung_mitte1"></td>
    <td class="trennung_rechts1"></td>
  </tr>
  <tr>
    <td class="linie_links1"></td>
    <td>galerie</td>
    <td class="linie_rechts1"></td>
  </tr>
  <tr>
    <td class="linie_links2"></td>
    <td class="inhalt">hier wird die bildlaufleiste stehen</td>
    <td class="linie_rechts2"></td>
  </tr>
  <tr>
    <td class="linie_links2"></td>
    <td class="inhalt">hier wird der inhalt stehen <br><br>hehe<br>
    <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a></p>
	</td>
    <td class="linie_rechts2"></td>
  </tr>
  <tr>
    <td class="unten_links"></td>
    <td class="unten_mitte"></td>
    <td class="unten_rechts"></td>
  </tr>
</table>
</body>
</html>

Natürlich verlinke ich das noch auf eine externe css datei.
ich werde aber wahrscheinlich deines nehmen weil das viel weniger quelltext hat.

grüße
web 673

neuroleptika · 28 August 2008

web673 schrieb:
......
mein werk

Code:

html, body { height: 100%; ... overflow: hidden; .... } ...

...

body solltest du nicht auf height:100% mit overflow: hidden setzen.
Das wird sicher zu Problemen beim scrollen führen. Lasse diese Angaben besser weg. Sie bringen für dein Layout keine Vorteile.
Height für html/body benötigst du nur für die Kinderelemente von body wenn diese ebenfalls height:wert%, ausgehend von body, haben sollen.
Ob die Seite serverseitig generiert oder manuell getippt wird spielt für das Layout keine Rolle.
Je nach Servereinstellung können auch Dateien mit x-beliebiger Dateiendung geparst werden.

web673 · 29 August 2008

ich hätte aber noch was..
ich weiß nicht wieso mir der firefox wenn ich ein bild verlinke die komplette horizontale als link verlinkt... hat da war noch ne idee ?

also bei meinem server müssen die daten php als endung haben damit sie geparst werden....

und an die php.ini komme ich auch leider nicht heran.

und danke für deine hilfe / und natürlich auch an alle die geholfen haben.

neuroleptika · 29 August 2008

web673 schrieb:
ich hätte aber noch was..
ich weiß nicht wieso mir der firefox wenn ich ein bild verlinke die komplette horizontale als link verlinkt... hat da war noch ne idee ?
...

und an die php.ini komme ich auch leider nicht heran.

Das sollte eigentlich immer so sein wenn <a> display: block; hat. IE ist da eine Ausnahme. Gebe <a> oder dem Elternelement ein width wenn du dieses Verhalten nicht möchtest (auf padding, border und margin achten - Bug ie5 Boxmodell).
Das stellst du in der .htaccess ein (Wenn du es denn willst).

web673 · 29 August 2008

also mein <a> hat kein display: block;
weiß da wer vlt einer ne lösung ? weil das nerft sehr.

grüße

Wieso wird die HP falsch angezeigt ???

Neues Mitglied

Mitglied

Neues Mitglied

Moderator

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Neues Mitglied

Moderator

Neues Mitglied

Moderator

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied

Aktives Mitglied

Neues Mitglied