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

IE Darstellung falsch

Status
Für weitere Antworten geschlossen.
I

iris_on_html

Neues Mitglied
Hallo Forum,

ich habe nun meine aktuelles Projekt hundertmal überarbeitet und egal wie ich es anstelle ich bekomme es nicht so hin, dass es im IE einigermaßen vernünftig dargestellt wird. Hier die Seite:

Link

Ich habe bereits alle Floats beseitigt, soll man nun auf absolute Divs verzichten? Browserweiche nun eine gute Lösung oder nicht?
Bestimmt ist der code nicht mehr der allerbeste, da ich soviel daran rumgebastelt habe, dass es bestimmt viele überflüssige Elemente gibt.

Was tun, was mache ich falsch?

Vielen Dank schon mal an den Helden, der mir weiterhilft!

Iris
 
Werbung:
Das Hauptproblem dürften die vielen absoluten und relativen Positionierungen sein.
Setzte die nur ganz gezielt ein und sei dir über deren Wirkung bewusst.
Vieles kannst du einfacher und besser mit float und margin lösen.

Packe die Hintergrundgrafik in einen zentrierten Div.
Innerhalb dieses Div füge die einzelnen anderen Elemente ein, möglichst jedoch ohne absolute Positionierungen.
Um den Abstand zum Headerlogo zu erhalten, verwende z.B. lediglich einen margin-top-Wert und verfahre ähnlich mit den anderen Elementen.

Um welchen IE geht es? Beim IE 6 musst du bei float insbesondere den Doubled-Float-Margin-Bug beachten: IE-Doubled-Float-Margin-Bug
 
Re

Danke PRM,

ich werde deine Anweisungen jetzt mal umsetzen ...

Danke vor allem für die Tips und die konstruktiven Umsetzungsmöglichkeiten!

Ich melde mich später wieder und gebe Feedback!
Momentan macht er in allen IEs Probleme, mir würde es schon reichen, wenn er IE 6 bis 8 akzeptabel aussehen würde ... aber abwarten, das ist nicht meiner erste Site bei der es nach einigen Versuchen dann doch geklappt hat!

Iris
 
Werbung:
PRM, so habe alles ordnungsgemäß umgesetzt und siehe da ... bis auf IE 4 haben sie es alle gebacken bekommen!

Eine kleine Verschiebung noch, aber die bekomme ich auch noch in den Griff.
Danke für die Hilfe!

Iris
 
prm schrieb:
Um den IE4 solltest du dir keine Sorgen machen.
Den kannst du getrost vernachlässigen.
Zum Vergrößern anklicken....
Damit das nicht wieder falsch verstanden wird:
Vernachlässigen nur im Sinne des Aussehens. Aber ein sauberer, valider, semantisch sinnvoller HTML-Code als Basis garantiert eine 100%ige Nutzbarkeit in jedem Browser, auch alten Krücken.
 
Werbung:
Hallo prm,

ich komm trotzdem nicht klar, ich hab alles jetzt nur gefloatet, keine absolutet divs mehr drinnen und trotzdem ist die Darstellung im IE 5.5 und IE 6 inakzeptabel, ich hänge dir mal Screenshots anbei!

ie55.png


Vielleicht weisst du was ich noch tun kann ...

Danke nochmal

Iris
 
Du verwendest viel zu viele Klassen, die total unnötig sind. Dadurch geht der Überblick verloren (Div-Suppe) und die Angaben behindern sich möglicherweise gegenseitig.
Deshalb solltest du nochmals vollkommen neu anfangen. Ich kann dir jetzt nicht die ganze Seite coden. Allerdings habe ich in folgenden Bereichen mal etwas aufgeräumt. Da lässt sich aber sicherlich noch das ein oder andere streichen und vereinfachen:

Body: text-align: center löschen.

Dann folgende Struktur (sicher noch verbesserungsfähig)
Code: 
<div class="main">
   <p class="iris">
         <a href="[url=http://www.iriswebportfolio.de]Iris' web portfolio.[/url]" target="_blank"><img src="img/iris.png" 
         alt="Link zum Designer"/></a>
     </p>
        
        <div class="navcontent">
         
                        <a href="vita1.html"><span class="braun">Person</span></a>             
           <br />              
                    <a href="vita2.html">Ausbildung</a> 
              <br />
              <a href="vita3.html">B&uuml;hne</a>  
                  
                            <ul class="menue">
                     <li> <a href="index.html"><span class="braun">Home</span></a> </li>  
                      <li> <a href="vita.html">Vita</a> </li>    
                      <li> <a href="galerie.html">Galerie</a> </li>    
                      <li> <a href="gb.html">G&auml;stebuch</a> </li>    
                      <li> <a href="kontakt.html">Kontakt </a></li> 
                  </ul>     
             
               </div><!--Ende navcontent-->
            
            <div class="content">

CSS (nur im IE 7 getestet):

Code: 
DIV.main {
 width: 791px; 
 height: 700px; 
  margin: 0 auto;
 background: url(../img/bg.png) no-repeat top;
 
}

.iris{
 margin-left: 641px;
 margin-top: 50px;
 width: 85px;
 height: 100px;
}
DIV.navcontent{
float: left;
 margin-top: 120px;
 margin-left: 80px;
 text-align: right;
 width: 100px;
 
}
 
ul.menue{
font-family: Georgia, "Times New Roman", Times, serif;
 font-size:11px;
 padding: 0px;
 text-transform: uppercase;
 list-style: none;
 margin-top: 120px;
 width: 100px;
 line-height: 14px;
 color: #d81920;
 position: relative; left: -65px;
}
 
DIV.content{
 margin-top: 100px;
 margin-left: 220px;
 }

Auf diese Weise kannst du noch sehr viele Angaben löschen bzw. zusammenfassen.
Im Detail musst du sicher noch einige Pixelwerte anpassen.

Für eindeutige Bereiche solltest du ID's verwenden. Für Formatierungen, die auf einer Seite mehrmals vorkommen können dagegen Klassen.
 
Werbung:
Also vergiss es prm, ich krieg es nicht hin, ich hab alle deine Tips und Tricks umgesetzt, es sieht überall richtig aus, nur nicht in IE 5 oder 6!

Wenn dir noch was einfällt wäre ich dir dankbar, wenn du keinen Nerv mehr hast verstehe ich das auch völlig!

Danke trotzdem!

Iris
 
Fang doch einfach nochmal von vorn an.
Es gibt da ohnehin in Sachen HTML und Optimierung fürs WWW viel zu verbessern. Die Semantik bleibt bei Dir oft auf der Strecke, Du tendierst zu div-Suppe. Außerdem würde ich XHTML 1.0 Strict empfehlen, weil man damit einfach gezwungen ist, sauberer zu arbeiten, als mit der Übergangslösung "Transitional". Und das Layout ist nicht WWW-fähig, weil der Contentbereich eine feste Größe hat. Wenn man die Schriftgröße verstellt, wird der Text außerhalb dieses Bereichs angezeigt, und wenn der Viewport zu klein wird, gibts horizontale Scrollbalken.

Was die IEs angeht, schon IE6 ist bald 10 Jahre alt und kann eigentlich CSS nicht wirklich gut. Ob der IE5 auch nur annähernd CSS-fähig ist, sei mal dahin gesellt.
Wenn Du Dein HTML verbesserst, so dass die Semantik stimmt, dann ist die Site in Sachen Nutzbarkeit perfekt, dann kann auch ein IE5- oder IE4- oder IE3-Nutzer die Inhalte abrufen. Dass Design/Layout mit CSS in den veralteten Krücken nicht hinhauen, ist verständlich. Wenns anders aussieht, ist das kein Beinbruch. Wenns hässlich aussieht, passt man das Stylesheet so an, dass es im IE nur anders aber nicht mehr hässlich aussieht und die ganz alten Krücken verstehen ohnehin nicht genug CSS um irgendwas falsches anzuzeigen - Aufgabe erfüllt.
 
Werbung:
Efchen schrieb:
Was die IEs angeht, schon IE6 ist bald 10 Jahre alt und kann eigentlich CSS nicht wirklich gut. Ob der IE5 auch nur annähernd CSS-fähig ist, sei mal dahin gesellt.
Zum Vergrößern anklicken....
Die css-Unterstützung vom IE6 ist garnicht so schlecht wie hier offt behauptet wird. Die Mängel liegen eher in den unzähligen Bugs, für die es in den meißten Fällen Lösungen gibt.
Der IE6-quirks/ IE5.5 unterscheidet sich hauptsächlich in einem Fehler bei der Boxdarstelllung (Größe) vom IE6.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben