Börg: DIV verschiebt sich Fensterskalierung (IE>=6)

SELF-Forum

DIV verschiebt sich Fensterskalierung (IE>=6)

Börg
– Informationen zu den Bewertungsregeln

Hallo zusammen,

Für die alten Internet Explorer Versionen habe ich mühsam einen Workaround für das Problem position: fixed gebastelt. So weit so gut, klappt auch alles akzeptabel, nur ein Problem gibt es. Das DIV "wrapper_foot" (Blau markiert zum besseren Verständnis) verschiebt sich anders als der content Teil (z.B. Grau/Gelb), obwohl die Container der beiden Teile alle in Prinzip gleich formatiert sind. Ist die Skalierung des Fensters unter einem bestimmten Wert, stimmt alles, ist sie größer (etwa 1300px Breite schätze ich) verschiebt sich das DIV um etwa 20px nach rechts.
Achtung, das Problem gilt nur für Internet Explorer > 6.0, also nicht wundern wenn man das Problem in anderen Browsern nicht sieht.

Hier gehts zur Seite

Was ich ausschliessen kann ist, dass die eingeblendete Scrollbar schuld ist, selbst wenn ich die auch für das blaue DIV anschalte, oder für den Content ausschalte, ändert sich nichts. Ausserdem kann ich keinen übergeordneten Container mit der richtigen Breite um alles spannen, da sonst die Scrollbar in der Mitte ist statt am Rand.

Weiß jemand wie ich das Problem angehen kann? Mir gehen langsam die Ideen aus woran das liegen könnte. Ohne eine Art Firebug für den IE ist das auch verdammt nervig. Vielen Dank für eure Hilfe!

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Es hat BOM gemacht

    Peter Pan
    – Informationen zu den Bewertungsregeln

    Hi!

    Auch wenn Du(?) im Quelltext Deiner Seite im ersten Kommentar etwas anderes behauptest: das verlinkte Dokument ist _nicht_ valide - damit solltest Du beginnen.

    Zudem wird ein Byte-Order Mark gefunden, das möchtest Du auch nicht haben:

    "The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported. "

    off:PP

    --
    "You know that place between sleep and awake, the place where you can still remember dreaming?" (Tinkerbell)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Es hat BOM gemacht

      Börg
      – Informationen zu den Bewertungsregeln

      Das Ding war mal valide, bis ich es komplett umbauen sollte. Deswegen, nein, das behaupte ich derzeit bestimmt nicht mehr ;)

      Interessant ist auch, nehme ich die Anmerkung am Anfang raus, ist das BOM verschwunden, aber die Seite total falsch formatiert. Deswegen lasse ich sie gerade mal drin, auch wenn ich nicht verstehe wie das wieder zusammenhängt. Aber egal ob mit oder ohne, die Verschiebung bleibt.

      Hi!

      Auch wenn Du(?) im Quelltext Deiner Seite im ersten Kommentar etwas anderes behauptest: das verlinkte Dokument ist _nicht_ valide - damit solltest Du beginnen.

      Zudem wird ein Byte-Order Mark gefunden, das möchtest Du auch nicht haben:

      "The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported. "

      off:PP

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. DIV verschiebt sich Fensterskalierung (IE>=6)

    Gunnar Bittersmann Homepage des Autors
    +1 Informationen zu den Bewertungsregeln

    @@Börg:

    nuqneH

    Hier gehts zur Seite

    Dazu ein paar Anmerkungen:

    <!DOCTYPE  
 html PUBLIC "-//W3C//DTD XHTML 1.1//EN"  
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

    XHTML 1.1 ist nur in Ausnahmefällen sinnvoll. Ein solcher ist in deinem Fall nicht gegeben. Verwende XHTML 1.0 Strict!

    <html xml:lang="en" …>

    Die Sprachangabe "en" ist falsch.

    Hier zeigt sich auch eins der Probleme von XHTML 1.1: Bei Auslieferung als 'text'mhtml' ist @xml:lang wirkungslos, @lang gibt es aber nicht in XHTML 1.1, damit ist keine Angabe der Textverarbeitungssprache möglich.

    <meta name="keywords" …>

    Wen versuchst du damit zu beeindrucken? Eine Suchmaschine doch ganz sicher nicht!

    Übrigens sind in diese Zeile gleich 2 XHTML-Fehler.

    <style type="text/css">@import url(style.css) all;</style>

    Schlecht. Binde das Stylesheet mittels 'link' ein: <link rel="stylesheet" type="text/css" href="style.css"/> ↗[PERFORMANCE-BP1]

    <!--[if lt IE 7]>  
  <style type="text/css">@import url(style_iex.css);

    Extra-Stylesheet für IE? Schlecht, hoher Wartungsaufwand, zusätzlicher HTTP-Overhead. Notiere Anpassungen für IE besser per 7 per '*+html'-Hack in dem EINEN Stylesheet für alle Browser!

    <script type="text/javascript" …

    Der bessere Platz zur Einbindung externer JavaScripte ist als letztes im 'body'. ↗[PERFORMANCE-BP2]

    <div class="cplete">	  
  <div class="container">  
    <div class="wrapper_menu">  
      <div class="box_right_t">  
        <div class="menu">  
          Home</div>  
        <div class="menu">  
          <a href="projekte.html">Projekte</a></div>  
        <div class="menu">  
          <a href="wettbewerbe.html">Wettbewerbe</a></div>

    Eine Klasse (hier: "menu") ist sinnlos, wenn ihr alle Geschwisterelemente angehören. Diese kannst du im Stylesheet per Nachfahren- oder Kindselektor ansprechen: 'box_right_t div' bzw. 'box_right_t>div'.

    Der Klassenbezeichner "box_right_t" ist schlecht. Wenn die Box einmal nicht mehr rechts stehen soll, passt er nicht mehr. Möchtest du etwa nochmal das Markup ändern, wenn sich die Darstellung ändern soll?

    Das Ganze ist aber kein sinnvolles XHTML, sondern üble div-Suppe. Wozu denkst du, so viele Container zu benötigen? ↗[ZITAT1287]

    Ein Menü ist eine Liste ist eine Liste: 'ul' bzw. 'ol' und 'li'.

    <br />  
<br/>  
<br/>

    ↗[ZITAT1275]

    Alle 'br'-Elemente sind überflüssig. Alle. Auch die <br style="clear: both;"/>. Abstände gibst du im Stylesheet an.

    Ohne eine Art Firebug für den IE ist das auch verdammt nervig.

    Es gibt für IE 6 und 7 eine developer toolbar. Im IE 8 sind die Entwicklertools schon drin.

    Qapla'

    --
    Volumen einer Pizza mit Radius z und Dicke a: pi z z a
    Beitrag melden
    +1
    Informationen zu den Bewertungsregeln

    1. DIV verschiebt sich Fensterskalierung (IE>=6)

      Börg
      – Informationen zu den Bewertungsregeln

      Vielen Dank für deine Anmerkungen, von denen ich manche kannte, aus einigen allerdings auch etwas gelernt habe. (Dazu die Frage: was ist an den Keywords falsch?)

      Allerdings geht es hier spezifisch um eine Anpassung der Seite an Internet Explorer 5 und 6. Die Seite ist leider mit einem position: fixed Footer vorhanden, das können besagte Versionen eben nicht einfach so interpretieren. Ich kann den bestehenden Quellcode dafür nicht komplett neuschreiben, das würde den Aufwand für gerade mal 10% der Browser komplett sprengen. Zumal der Besitzer der Seite diese so belassen will und nicht vorhat den Inhalt groß zu ergänzen oder zu verändern.

      Würde ich die Seite neumachen, würde das Ganze sicherlich komplett anders aussehen, aber im aktuellen Fall geht es mir nur darum diesen Verschiebungsfehler in den Griff zu bekommen ohne dafür alles neuzuschreiben. Das würden derzeit weder meine Zeit noch sein Wille zulassen. Aus diesem Grund auch die beiden verschiedenen Stylesheets. In IE 7+, FF, Opera, Safari, etc. sieht ja alles so aus wie es soll.

      @@Börg:

      nuqneH

      Hier gehts zur Seite

      Dazu ein paar Anmerkungen:

      <!DOCTYPE

      html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

      
>   
> XHTML 1.1 ist nur in Ausnahmefällen sinnvoll. Ein solcher ist in deinem Fall nicht gegeben. Verwende XHTML 1.0 Strict!  
>   
>   
> `<html xml:lang="en" …>`{:.language-html}  
>   
> Die Sprachangabe "en" ist falsch.  
>   
> Hier zeigt sich auch eins der Probleme von XHTML 1.1: Bei Auslieferung als 'text'mhtml' ist @xml:lang wirkungslos, @lang gibt es aber nicht in XHTML 1.1, damit ist keine Angabe der Textverarbeitungssprache möglich.  
>   
>   
> `<meta name="keywords" …>`{:.language-html}  
>   
> Wen versuchst du damit zu beeindrucken? Eine Suchmaschine doch ganz sicher nicht!  
>   
> Übrigens sind in diese Zeile gleich 2 XHTML-Fehler.  
>   
>   
> `<style type="text/css">@import url(style.css) all;</style>`{:.language-html}  
>   
> Schlecht. Binde das Stylesheet mittels 'link' ein: `<link rel="stylesheet" type="text/css" href="style.css"/>`{:.language-html} ↗[[PERFORMANCE-BP1](http://www.webkrauts.de/2008/12/13/sehr-sehr-schnelle-seiten-website-performance-best-practice/)]  
>   
>   
> ~~~html

<!--[if lt IE 7]>  

>   <style type="text/css">@import url(style_iex.css);

      Extra-Stylesheet für IE? Schlecht, hoher Wartungsaufwand, zusätzlicher HTTP-Overhead. Notiere Anpassungen für IE besser per 7 per '*+html'-Hack in dem EINEN Stylesheet für alle Browser!

      <script type="text/javascript" …

      Der bessere Platz zur Einbindung externer JavaScripte ist als letztes im 'body'. ↗[PERFORMANCE-BP2]

      <div class="cplete">

      <div class="container">
          <div class="wrapper_menu">
            <div class="box_right_t">
              <div class="menu">
                Home</div>
              <div class="menu">
                <a href="projekte.html">Projekte</a></div>
              <div class="menu">
                <a href="wettbewerbe.html">Wettbewerbe</a></div>

      
>   
> Eine Klasse (hier: "menu") ist sinnlos, wenn ihr alle Geschwisterelemente angehören. Diese kannst du im Stylesheet per Nachfahren- oder Kindselektor ansprechen: '`box_right_t div`{:.language-css}' bzw. '`box_right_t>div`{:.language-css}'.  
>   
> Der Klassenbezeichner "box\_right\_t" ist schlecht. Wenn die Box einmal nicht mehr rechts stehen soll, passt er nicht mehr. Möchtest du etwa nochmal das Markup ändern, wenn sich die Darstellung ändern soll?  
>   
> Das Ganze ist aber kein sinnvolles XHTML, sondern üble div-Suppe. Wozu denkst du, so viele Container zu benötigen? ↗[[ZITAT1287](http://community.de.selfhtml.org/zitatesammlung/zitat1287)]  
>   
> Ein Menü ist eine Liste ist eine Liste: 'ul' bzw. 'ol' und 'li'.  
>   
>   
> ~~~html

<br />  

> <br/>  
> <br/>

      ↗[ZITAT1275]

      Alle 'br'-Elemente sind überflüssig. Alle. Auch die <br style="clear: both;"/>. Abstände gibst du im Stylesheet an.

      Ohne eine Art Firebug für den IE ist das auch verdammt nervig.

      Es gibt für IE 6 und 7 eine developer toolbar. Im IE 8 sind die Entwicklertools schon drin.

      Qapla'

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. DIV verschiebt sich Fensterskalierung (IE>=6)

        ChrisB
        – Informationen zu den Bewertungsregeln

        Hi,

        Vielen Dank für deine Anmerkungen, von denen ich manche kannte, aus einigen allerdings auch etwas gelernt habe.

        Lerne bitte http://de.wikipedia.org/wiki/TOFU kennen, und vor allem vermeiden, danke.

        (Dazu die Frage: was ist an den Keywords falsch?)

        Sie sind heutzutage reichlich überflüssig - Suchmaschinen schauen sich den Seiteinhalt an.

        Allerdings geht es hier spezifisch um eine Anpassung der Seite an Internet Explorer 5 und 6. Die Seite ist leider mit einem position: fixed Footer vorhanden, das können besagte Versionen eben nicht einfach so interpretieren.

        Per Hack in absolute oder ggf. auch statische Positionierung ändern, gut is'.

        MfG ChrisB

        --
        “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

      2. DIV verschiebt sich Fensterskalierung (IE>=6)

        Gunnar Bittersmann Homepage des Autors
        – Informationen zu den Bewertungsregeln

        @@Börg:

        nuqneH

        Dazu die Frage: was ist an den Keywords falsch?

        '&' nicht escapet [HTML401 §B.2.2]; 'meta'-Element nicht geschlossen. Das hätte dir der Validator auch gesagt.

        Ansonsten sind die Keywords wohl einfach überflüssig.

        Zumal der Besitzer der Seite diese so belassen will

        Das kann ich nicht glauben. Die Homepage sieht so aus:

        Links unnötiger Leerraum, der Inhalt ragt rechts aus dem Viewport heraus. Kein horizontaler Scrollbalken, "Veröffentlichungen" ist nur halb zu sehen, "Kontakt" und "Impressum" sind gar nicht zu sehen, was ein Verstoß gegen § 5 TMG ist. Will der Besitzer der Website eine Abmahnung riskieren?

        […] ohne dafür alles neuzuschreiben. Das würden derzeit weder meine Zeit noch sein Wille zulassen.

        Die DOCTYPE-Angabe und das <html>-Start-Tag zu berichtigen auf

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">

        ist Sekundensache.

        In IE 7+, FF, Opera, Safari, etc. sieht ja alles so aus wie es soll.

        Bist du *sicher*?

        @@Börg:

        nuqneH
        --8<--
        Qapla'

        Bitte kein TOFU!

        Qapla'

        --
        Volumen einer Pizza mit Radius z und Dicke a: pi z z a
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln