overflow: auto - und nun ist es vorbei mit dem Design?

[Tamara-Jasmin]

Hi,
bisher lief alles wunderbar (abgesehen davon das ein Pulldownmenü nicht möglich ist). Mittlerweile habe ich mich auch
damit abgefunden, das man Text nicht zentrieren oder andersweitig "bändigen" kann - warum habe ich bis heute nicht rausgefunden.
Aber gut - es lief - im IE8 wurde alles so angezeigt wie im FF8. Optimal - war also zufrieden.
Nun fügte ich einen etwas überlangen Text ein - und brauchte das Overflow: auto.

Also rein damit in das CSS. 2 Divs hatten sich nach unten verschoben - diese setzte ich einfach wieder im CSS 50px nach oben.
Top ...
Beim Upload kam dann das erwachen.
FF:
die 2 verschobenen DIVs sind da wo ich sie hingesetzt habe - das Text-Infofeld - absolut ohne Positionierung - rechtsbündig am Browser

Also rein in IE:
Das Textinfofeld da wo es hingehört - aber die 2 DIVs nun nach oben verschoben um die 50 px.
Hätte ich alles so gelassen, wäre es im IE so wie es sein sollte.

Aber was ich mit dem FF los?
warum schmeisst der wegen einem "overflow: auto" alles durcheinander?
Hat da irgendwer eine Idee?

Wie weit komme ich mit [IF IE - 50px wieder runter] ?
Ist das eine Lösung? Oder gibt es dann wieder andere Probleme?
Ich kann ja nicht für jeden Browser eine eigene CSS schreiben ....



Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Hier mal meine CSS:

html, body {
    background-image: url(website/hg/body/wand.jpg);
}

#header {
    width: 930px;
    height: 50px;
    background-image: url(website/hg/info/header-hg.jpg);
    margin: auto;
    padding: 15px 25px;
    z-index: 19;
}
#header h2{
    display: inline;
    color: #FF6600;
    text-decoration: underline;

}
#header .text{
    position: relative; left: 35px;
    color: #FF9933;
}

#impressum{
    position: relative; top: 270px; right: -820px;
    color: #FF9933;
    text-decoration: none;
    font-weight: bold;
    font-family: 'Comic sans MS';
    font-size: small;
}

a:link, a:visited{
    text-decoration: none;
    color: #FF9933;
}
td {
    width: auto;
}
.zr{
    width: 40px;
}
.zr-p{
    width: 20px;
}
.trcolor{
    color: #FF6633;
}
table {
    width: 450px;
}






/**************************/
/*Einstellungen des Menues*/
/**************************/

#menue {
    width: 950px;
    height: 50px;
    position: relative; top: -14px;
    margin: auto;
    z-index: 20;
}
#menue ul li{
    float: left;
    text-decoration: none;
    list-style: none;
}
#menue a:link, #menue a:visited {
    display: block;
    width: 109px;
    height: 50px;
    text-decoration: none;
}


/********************************/
/*Einstellungen der Menuebuttons*/
/********************************/


#but-index {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/index.png);
}
#but-index:hover{
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/index-hv.png);
}
#but-fw {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/fw.png);
}
#but-fw:hover{
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/fw-hv.png);
}
#but-vort {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/vort.png);
}
#but-vort:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/vort-hv.png);
}
#but-preise {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/preise.png);
}
#but-preise:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/preise-hv.png);
}
#but-rabatte {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/rabatte.png);
}
#but-rabatte:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/rabatte-hv.png);
}
#but-beisp {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/beisp.png);
}
#but-beisp:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/beisp-hv.png);
}
#but-best {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/best.png);
}
#but-best:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/best-hv.png);
}
#but-links {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/links.png);
}
#but-links:hover {
    display: block;
    width: 109px;
    height: 50px;
    background-image: url(website/buttons/links-hv.png);
}

.anim {
    position: relative; top: -315px; left: -110px;
}

#inhalt {
    width: 980px;
    height: 650px;
    background-image: url(website/hg/info/visitenk.png);
    position: relative; top: 70px;
    margin: auto;
}

#infotext{
    width: 480px;
    height: 290px;
    position: relative; bottom: -30px; left: 20px;
    font-family: 'Comic sans MS';
    font-size: small;
    color: #FF9933;
/*    overflow: auto;*/
}
#infotext h3{
    display: inline;
    color: #FF6600;
    text-decoration: underline;
}
#infotext strong{
    text-decoration: underline;
}


/*
#impressumbox, #agb-box{display:inline;}

#impressumbox span, #agb-box span{display:none;}

#impressumbox:hover span{
    display:block;
    width:350px;
    height: 350px;
    position: relative; bottom: 550px; left: 67px;
    background-image: url(website/hg/info/infobox-hg.png);
    border:1px dashed black;
    padding:10px;
    font:normal 10px verdana, sans-serif;
    color: #0000FF;

}
#agb-box:hover span {
    position: relative; bottom: 550px; left: -260px;
    display:block;
    width:350px;
    height: 350px;
    background-image: url(website/hg/info/infobox-hg.png);

    border:1px dashed black;
    padding:10px;
    font: normal 10px verdana, sans-serif;
    color: #0000FF;
}
*/

<!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">
<head>

/* Titel Metatags und der ganze Krempel ... */

<body>

<div id="header">
    <h2>"Bezeichnung"<br /></h2>
        <span class="text"><?php include("ok24daten/website/logotext.txt"); ?></span> /* hab ich eingefügt per PHP, weil wenn sich was ändert, brauch ich das nur einmal zu tun :) */

    <div id="menue">
        <ul>
            <li id="but-index"><img src="ok24daten/website/buttons/index-hv.png"/></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-fw"><a href="fuerwen.php"></a></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-vort"><a href="vorteile.php"></a></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-preise"><a href="preise.php"></a></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-beisp"><a href="beispiele.php"></a></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-best"><a href="bestellung.php"></a></li>
                <li><img src="ok24daten/website/buttons/zr-h.png"/></li>
            <li id="but-links"><a href="links.php"></a></li>
        </ul>
    </div>
</div>

<div id="inhalt">

    <div id="infotext">
        <h3>"Die Überschrift"</h3><br />
        Bla Bla Text ....... überlang ...
    </div>

        <span id="impressum"><a href="agbs.php"> AGBs</a> &bull; <a href="impressum.php"> Impressum</a></span> /* Diese 2 folgenden Divs haben sich verschoben ....*/
        <span class="anim"><img src="ok24daten/website/bilder/anim-startseite.gif" /></span>

</div>

</body>
</html>

[Tamara-Jasmin]

Ein reiner zufall heute.
Ein Kunde der gehobeneren Klasse wollte mir heute etwas auf seiner Website zeigen und war ganz aufgebracht, da sich sein Design total verschoben hat. Er hat noch nie von Problemen gehört, und somit habe ich den PC neu gestartet. Aber immer noch das selbe. Er telefonierte sofort mit den zuständigen Leuten (die haben eine eigene IT Abteilung), und die bestätigten kurz später, das in USA, Indien und Asien alles korrekt angezeigt wird.

KÖNNTE es sein, dass mein Tschechisches Betriebssystem den Fehler verursacht?
Das meine hier genannten Fehler gar keine sind? Wie soll ich dann hier sauber arbeiten?
Ich kann mir nicht vorstellen, dass dies an einem fremdsprachigem System liegen kann....

Liebe Grüsse:
Tammy

[MrD]

Schon mal an den Cache gedacht?

[Tamara-Jasmin]

Ja - sicher. Zwar nicht gestern bei dem Kunden - aber gerade eben erledigt - immer noch das selbe.

Bin gerade in meiner Kiste am suchen nach einer Festplatte - und hau da dann das 7Ult. drauf - deutsch. Vielleicht geht es ja dann.
Ansonsten nehm ich ein altes Laptop aus dem Lager nur für diese Arbeiten und hoffe das dann alles passt. Irgendwas muss jetzt passieren.
Trotzdem ist auf BEIDEN Browsern ein Unterschied - SEIT dem Overflow: auto.
Hat mal wer im Quelltext gestöbert? Ist der soweit OK?

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Der Fehler mit dem Kunden war wirklich einer. Hauptkasten Margin: auto, Bilder relative zum linken Rand. Da ich eine 1920-er Auflösung habe und er nur 1024 (und damit eingestellt), war die verzerrung natürlich extrem.

Aber zu meinem Code:
Ich komme absolut nicht weiter - sieht irgendwer den Fehler?

Nochmal:
Internetexplorer alles OK
FireFox - Text nach rechts verschoben (rechtsbündig). entferne ich overflow: auto
ist in beiden Browsern alles korrekt.

Alternativ bleibt mir nur noch alles per einzelne Grafik einzubinden und dann mit dem html "rect" zu arbeiten wo man klicken muss - und einzig den Überlangen Text mit CSS zu positionieren.

Liebe Grüsse:
Tammy

[Tamara-Jasmin]

Statt alles auf Grafiken zu ändern, habe ich Overflow: auto entfernt und den überlangen Text auf 3 weitere Seiten gesplittet, die der Gast nun mit "weiter" und "zurück" im Text anwählen kann. Lustig wird es erst mit den AGBs, das werden dann wohl 10 extraseiten
Scheint mir aber die einzige Lösung zu sein die funktioniert.

Thema abgeschlossen.

Liebe Grüsse:
Tammy