• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Webseite im IE...

wers1

Mitglied
Hallo,
bin mal wieder am verzweifeln. habe die webseite Sportjugend des ESV Lokomotive Pirna!!! gemacht und es wird alles toll angezeit... in firefox.
Der IE (ich gleube alle außer die neuste version) macht probleme. leider weiß ich nciht woran das liegt. könntet ihr bitte mal kurz drüberschaun? ein abgespreckter teil des quelltextes ist unten zu finden.

Danke im vorraus

Felix

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div style="text-align:center;">

  <img src="header/header.jpg" alt="Kopf der Seite" />

   <!--Header Men&uuml;-->
  <div style="width:100%; background-color:#ca1500;">
    <div style="width:914px; background-color:#a11000; margin-left:auto; margin-right:auto; font-size:30px; color:#FFFFFF; font-weight:bold;">
     <!--Link1 Link2 Link3<sub>Ι</sub> Link4--><br />
    </div>
    
    <!-- Banner und News--> 
      <div style="width:914px; height:3px; background-color:#eef0ef; margin-left:auto; margin-right:auto;"></div>
    <div style="width:914px; margin-left:auto; margin-right:auto;">
     <div style="width:659px; height:185px; float:left; background-image:url(header/banner.jpg);">

      "INCLUDE"
      </div>
     <div style="width:207px; height:185px; float:left; background-image:url(header/news.jpg); background-repeat:no-repeat; text-align:left;"><br /><br /><br /><br /><?php
include "news.php";
?><a href="index.php">mehr...</a></div>

     <!--Gesamter Content (Sidebar und Cont)-->
     <div style="width:48px; height:185px; float:left;"><img src="header/rand.jpg"  alt="ein weiteres Gestaltungselemen" /></div><div style="clear:both;"></div>
     </div></div>

   <img src="content/header.jpg"  alt="schalt lieber Bilder ein" />
   <div style="width:911px; margin-left:auto; margin-right:auto;">
    <div style="width:911px; background-image:url(content/all.jpg); background-repeat:repeat-y;">
     <div style="width:49px; background-image:url(content/side_rand.jpg); background-repeat:repeat-y; float:left;"><br /></div>
     
     <!--SIDEBAR-->
      INCLUDE

     <!--INHALT-->
     <div style="width:641px; background-image:url(content/content.jpg); background-repeat:repeat-y; float:left; text-align:left;">
     INHALT
      </div>
      <!--ENDE INHALT-->
     <div style="width:45px; background-image:url(content/cont_rand.jpg); background-repeat:repeat-y; float:left;"></div>
     <div style="clear:both;"></div>
    </div></div>
  
   <!-- Footer mit Banner und Werbung-->
      <?php
      include "footer.php";
      ?>

</div>
</body>
</html>
 
Im Firefox, IE8, Google Chrome, Safari und Opera passt da aber auch was nicht, siehe hier.

Im IE 5.5 - 7 sind überall so Streifen, woran das liegt weiß ich auch nicht, habe aber mal für die anderen auch einen Screenshot gemacht.
 
Zuletzt bearbeitet von einem Moderator:
Sehr tolle Pfeile DerMitSkill ^^ Die heben sich so schön vom Hintergrund ab, d.h. man sieht sie wirklich auf den ersten Blick und ich hätte sie nicht besser machen können, welches Programm hast du benutzt? Photoshop?

Nunja, wir wissen ja alle, dass der IE totaler Schrott ist und allgemein Microsoftsoftware zum Kotzen ist...

Habe ein paar Sachen ausprobiert, hat aber leider nicht funktioniert...
 
Sehr tolle Pfeile DerMitSkill ^^ Die heben sich so schön vom Hintergrund ab, d.h. man sieht sie wirklich auf den ersten Blick und ich hätte sie nicht besser machen können, welches Programm hast du benutzt? Photoshop?

Paint.NET, richtig professionell, gell? Bin auch stolz auf mich :smile:

Nunja, wir wissen ja alle, dass der IE totaler Schrott ist und allgemein Microsoftsoftware zum Kotzen ist...

Da stimm ich Dir - ausnahmsweiße - zu.

Habe ein paar Sachen ausprobiert, hat aber leider nicht funktioniert...

War zu erwarten :D
 
ihr seit das alles hier ja ganz nett am analysieren ... ^^

fakt ist jedoch, dass deine seite immer in jedem browser unterschiedlich angezeigt werden kann, wenn du keinen validen code hast.
basis für eine fehlerfreie browseranzeige ist eben ein valides html-gerüst. und dieses ist bei dir nicht vorhanden.

beseitige mal diese fehler hier:

http://validator.w3.org/check?uri=http%3A%2F%2Fsportjugend-lok.de%2F&charset=(detect+automatically)&doctype=Inline&group=0

außerdem ist dein code generell unterirdisch. du hast 0 semantik und benutzt tags, wie <br/> dazu, um abstände zu erzeugen.

dabei gilt jedoch, dass html einzig und allein für die semantische auszeichnung deines inhaltes zuständig ist.
d.h. du gibst deinem inhalt eine bedeutung.
textabsätze zeichnest du mit <p> aus, überschriften mit <h1-h6>, tabellarische daten mit <table>...
du liegst anscheinend sehr an dem <div> element. dieses wird aber nur dann verwendet, wenn du mehrere elemente gruppieren willst.
z.B. möchtest du deine komplette seite zentrieren. dann setzt du sie in einen div und zentrierst diesen.

fazit: html hat in keinster weise etwas mit design zu tun. dafür ist ausschließlich css zuständig.

es gilt nicht umsonst die aussage, design von layout zu trennen. daher lagere deine css angaben in eine eigene .css datei aus.
dann wird der code auch viel übersichtlicher.
abstände, die du fälschlicherweise mit <br/> erzeugt hast, werden übrigens in css mit der eigenschaft margin: #px; erstellt.

ich hoffe du nimmst dir meine ratschläge zu herzenund baust die seite nach diesem konzept neu auf. ist zwar arbeit, aber sie lohnt sich.

sollte dann irgendetwas nicht klappen, sin wir sicher, dass es am code liegt und können dir helfen. im augenblick ist das allerdings das reinste ratespiel ;-)

viel erfolg

grüße hokage
 
@DerMitSkill: der absatz is mir auch schon aufgefallen, denke aber das krieg ich mit ausprobieren hin und is ja halb so wild... schlimmer is da IE 5.5 bis 7: genau das meine ich was nich weg will :(, danke vor allem wegen den screenshots

@Timmer: hab die pfeile trotzdem gesehn, trage zwar ne brille aber farben funzen noch ;) danke für die arbeit die du dir gemacht hast. ffinde IE auch ncih so dolle, nur was will man machen...

@nochmal die beiden^^: is doch ok sowas mit paint zu machen, muss ja nich toll aussehen. photoshop wird bei mir auch nur angeworfen wenn ich was ordentlich machen muss/will.

@hockage:
okay, da werd ich mich mal an die arbeit machen und validieren. die gesamte page umzubauen wird sicher etwas dauern... werde mir dafür wohl mal in den ferien zeit nehmen. hauptsache die abstände funzen bis montag (da bekommen die sponsoren ihre briefe und die sollen ne halbwegs ordentliche seite sehen). soooo. jetzt hab ich mir mal die validatorpage angeguckt und ein prob: alle errors kommen von einem flash-embed welchen ein programm generiert hat und dieser teil funzt. bevor ich flash drinne hatte waren die abstände auch schon da. ich werde mla gucken ob andere validatoren mir evtl. andere ergebnisse bringen. Großes Dankeschön
AN ALLE.
 
ihr seit das alles hier ja ganz nett am analysieren ... ^^

Tja...

fakt ist jedoch, dass deine seite immer in jedem browser unterschiedlich angezeigt werden kann, wenn du keinen validen code hast.
basis für eine fehlerfreie browseranzeige ist eben ein valides html-gerüst. und dieses ist bei dir nicht vorhanden.

Beim IE kann die Seite noch so valide sein, der kriegts trotzdem nicht auf die Reihe :D

außerdem ist dein code generell unterirdisch. du hast 0 semantik und benutzt tags, wie <br/> dazu, um abstände zu erzeugen.

Das unterirdisch haste doch von mir? :)

du liegst anscheinend sehr an dem <div> element.

Das haste aber sehr feinfühlig formuliert :D

z.B. möchtest du deine komplette seite zentrieren. dann setzt du sie in einen div und zentrierst diesen.

Nicht unbedingt...
 
du hast recht, hab jetzt mit versch. progs validiert und...
...nichts.

aber wenn ich jetzt alle styles auslagere bringts doch auch nix, oder? dann zieht der IE sich das halt aus der CSS und kapierts trotzdem ni
 
Ja, aber der Quelltext ist übersichtlicher, weil der CSS-Code ausgelagert wird, und wir können besser nach Fehlern suchen.
 
Zurück
Oben