zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Seitenspalten im IE unsichtbar

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.01.2005, 00:02
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2004
Beiträge: 34
manithu befindet sich auf einem aufstrebenden Ast
Standard Seitenspalten im IE unsichtbar

Hallo,

Ich habe dieses 3 Spalten Layout genommen, einiges geändert und jetzt wird der Inhalt der 2 Seitenspalten im IE unsichtbar, wenn man über sie fahrt, wird das Hintergrundbild verzerrt.
Ich glaube das ist der Guillotine Bug, habe 1 Stunde herumgetan aber es nicht wegbekommen.

Hier ist mein HTML:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="de" dir="ltr">
  <title>Go2WoW</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  
  <link rel="stylesheet" title="Normaler Stil" type="text/css" href="css/screen.css" media="screen, projection">
  <link rel="stylesheet" title="Druck Stil" type="text/css" href="css/print.css" media="print, embossed">
  <link rel="bookmark" title="Forum" href="/forum/">

  <script type="text/javascript" src="ResizeReloadNN4.js"></script>
  <!--{literal}<script type="text/javascript" src="js/popup.js"></script>{/literal}
  {popup_init src="js/overlib.js"}-->

  <div id="overall">
    [img]images/header.png[/img]
    <div class="columns">
      
      <div class="guillotine"></div>
      <div class="leftcolumn">
        <div class="borderleftheader"></div>
        <div class="leftpadding">
          <ul class="nav">[*]<div class="navheadline">Allgemeines</div>
              <div class="navblock">
                <ul>[*]News
                    <ul>[*]News melden[*]News Archiv[/list]                  [*]Forum
                    <ul>[*]Forenregeln[/list]                  [*]Artikel
                    <ul>[*]Artikel einsenden[/list]                  [*]Screenshots
                    <ul>[*]Screenshots einsenden[/list]                  [*]Wettbewerbe[*]Suche[/list]              </div>
              <div class="navfooter"></div>
            [/list]        </div>
      </div>
      <div class="rightcolumn">
        <div class="borderrightheader"></div>
        <div class="rightpadding">
          <ul class="nav">[*]<div class="navheadline">Login (manithu)</div>
              <div class="navblock">
                <ul class="nobold">[*]Forum[*]Dein Profil[*]Privatnachrichten[*]Logout[/list]              </div>
              <div class="navfooter"></div>
            [*]<div class="navheadline">Picture Of The Week</div>
              <div class="navblock">
                [img]http://www.go2wow.de/images/gallerie/18_thumb.jpg[/img]
              </div>
              <div class="navfooter"></div>
            [/list]        </div>
      </div>
      <div class="centercolumn">
        <div class="contentheader"></div>
        <div class="centerpadding">
          <ul class="content">[*]
              <div class="contentheadline">
                Neue Informationen zur Final Beta

                dieser Newseintrag wurde von am 02. Januar. 2005 um 15:15 hinzugefügt.
              </div>
              <div class="contentblock">
                


                  Vor wenigen Minuten hat sich Omega Skip auf der offiziellen Seite
                  zu Wort gemeldet und eine News gepostet, die nähere Infos zur Final
                  Beta enhält.
                </p>
                


                  Die schlechte Nachricht zuerst: Zwar konnte man es sich eigentlich
                  schon denken, nun haben wir allerdings die endgültige Bestätigung,
                  dass die Final Beta erst im Januar 2005 startet. Hier das
                  komplette Posting:
                </p>
                <blockquote>
                  <div>
                    Mit dem Start der finalen Phase des europäischen Betatests Januar
                    2005 wird jedem europäischen Realm eine bevorzugte Sprache
                    zugewiesen werden. Englisch, Französisch oder Deutsch werden zum
                    Start der finalen Phase des Betatests die bevorzugte Sprache von
                    jeweils mindestens zwei PvP- und zwei PvE-Servern sein. Im Lauf
                    der finalen Phase wird die Anzahl der Realms stetig erweitert, um
                    die wachsende Zahl der Spieler beherbergen zu können. Art und
                    Sprache der zusätzlichen Realms werden von der Nachfrage abhängig
                    sein, die sich im Lauf der Zeit abzeichnet.

                    Es ist zwar möglich, mit jeder Sprachversion des Clients auf jedem
                    Realm zu spielen, dennoch empfehlen wir, einen Client in der
                    Sprache des Realms zu verwenden, auf dem ihr spielen möchtet. Auf
                    den europäischen Realms muss jeglicher öffentlicher Chat und
                    sämtliche Anfragen an den Kundendienst in der Sprache des Realms
                    gehalten werden.
                  </div>
                </blockquote>
                


                  Ansonsten ist der Meldung zu entnehmen, dass die Final Beta mit
                  insgesamt 12 oder mehr Servern (darunter mindestens 2 PvP- und 2 PvE
                  Server pro Sprache) starten wird. Danach ist dann eine Ausweitung
                  der Kapazität geplant, die letztlich von der Nachfrage abhängt. Wenn
                  also beispielsweise die deutschen PvP-Server permanent voll sind,
                  wird Blizzard reagieren und weitere Server dieses Typs zur Verfügung
                  stellen. Die Serverbelegung während der Final Beta dürfte somit also
                  auch die endgültige Aufteilung der Server zum Release beeinflussen.
                </p>
              </div>
              <div class="contentfooter">
                Kommentare lesen (0) | Kommentar schreiben
              </div>
            [/list]        </div>
      </div>
     
    <div class="endcolumns"></div>
    </div>
    <div class="footer">
      Copyright&copy; go2wow.de 2005-06, 
      alle Rechte vorbehalten.

      Design by Tassadoom, Code by Taldoras &amp; manithu.
    </div>
  </div>
</html>
und die CSS Datei:

Code:
/* Common Style */

html, body {
    margin              : 0;
    padding             : 10px 0 0 0;
    background          : #012 url("../images/bg.jpg") no-repeat top center;
    font-size           : 11px;
    font-family         : Verdana, Tahoma, sans-serif;
    color               : #ccc;
    line-height         : 120%;
}

#overDiv {
    position            : absolute;
    visibility          : hidden; 
}

#overall {
    width               : 980px;
    margin              : auto;
    text-align          : center;
}

a {
    color               : #da2;
    background          : transparent;
    text-decoration     : underline;
}

p {
    margin              : 5px 0;
}

a:hover {
    color               : #f90;
}

h1, h2 {
    margin-top          : 0;
}

p {
    margin-bottom       : 0;
}

img {
    border              : none;
}

blockquote {
    padding             : 5px 5px 5px 10px;
    margin              : 5px auto;
    width               : 450px;
    background          : #012 url("../images/content_quote_border.png");
    border              : 1px solid #a71;
}

/* 3 Column Layout working for lots of browsers, see */
/* http://www.fu2k.org/alex/css/layouts/3Col_NN4_RWS_A.mhtml */

/* added by manithu */

/* funktioniert leider nicht */
.guillotine {
    clear               : both;
    height              : 1px;
    font-size           : 1px;
}
.borderleftheader , .borderrightheader , .contentheader {
    position            : relative;
    top                 : -2px;
}

/* Images */

.borderleftheader {
    background          : url("../images/border_left_header.png") no-repeat;
    height              : 36px;
}
.borderrightheader {
    right               : -2px;
    background          : url("../images/border_right_header.png") no-repeat;
    height              : 36px;
}
.contentheader {
    height              : 76px;
    /* IE Hack */
    left                : expression("-5px");
    background          : url("../images/content_header.png") no-repeat;
}
.endcolumns {
    clear               : both;
    background          : url("../images/footer.png") no-repeat;
    height              : 22px;
}

/* Navigation */

.nav , .nav li , .nav ul {
    margin              : 0;
    padding             : 0;
    list-style-type     : none;
}

.nav a {
    text-decoration     : none;
}

.navheadline {
    font-weight         : bold;
    text-align          : center;
    background          : url("../images/box_header.png") no-repeat;
    padding             : 15px 0 3px 0;
}

.navblock {
    background          : #111 url("../images/box_border.png") repeat-y;
    padding             : 0 10px;
}

.navfooter {
    background          : url("../images/box_footer.png") no-repeat;
    height              : 12px;
    margin-bottom       : 15px;
}

.nav * li {
    font-weight         : bold;
}

.nav * li {
    font-weight         : bold;
}

.nav ul * li {
    font-weight         : normal;
}

.nav ul * li {
    font-weight         : normal;
}

.nav ul * li a {
    color               : #ccc;
}
.nav ul * li a:hover {
    color               : #fc9;
}

.nav ul * ul {
    padding-left        : 10px;

}

/* Content */

ul.content {
    margin              : 0;
    padding             : 0;
    list-style-type     : none;
}

.contentheadline {
    background          : url("../images/content_box_header.png") no-repeat;
    height              : 50px;
    padding             : 15px 10px 0 40px;
}

.contentblock {
    background          : black url("../images/content_box_border.png") repeat-y;
    padding             : 5px 15px;
    margin-top          : -15px;
}
.contentfooter {
    background          : url("../images/content_box_footer.png") no-repeat;
    height              : 35px;
    padding             : 9px 10px 0 10px;
    margin-bottom       : 15px;
}
.contentfooter a {
    text-decoration     : none;
}


/*end added by manithu */

div {
    border              : none;
    margin              : 0;
    padding             : 0;
    text-align          : left;
}

/* -21px is for who? Netscape 4, I would guess - er yes */
.columns {
    margin              : 0;
    margin-top          : -21px;
    padding             : 0;
    color               : inherit;
    background          : #012 url("../images/content_bg.png");
}
/* NB - OmniWeb displays the 1px space as looking somewhat thicker, but set it to 0px and there is no space */
/* IE5 gets the spacing all wrong: -18px puts it right. Then use the tantek-family hack to make everything right again */
/*/*/
.columns {
    margin-top          : -18px;
    font-family         : "\"}\"";
    font-family         : inherit;
    margin-top          : -4px;
}
/* */
/* empty required to get IE5 vback on track */
#empty{}

.leftcolumn {
    float               : left;
    left                : 0;
    width               : 197px;
    margin              : 0;
    margin-top          : -11px;
    padding             : 0;
    color               : inherit;
    background-color    : transparent;
}
.leftcolumn {
/*/*/
    margin-top          : 0;
/* */
}

/*
make sure that the hack widths equals the value of .centercolumn's margin-right
the initial width is for NN4 - experiment and set to what seems best
*/
.rightcolumn {
    position            : static;
    float               : right;
    width               : 197px;
    margin              : 0;
    padding             : 0;
    z-index             : 3;
    color               : inherit;
    background-color    : transparent;
}

/* 
For NN4, -25px is the margin-left setting to make the centercolumn column but up against the left column. (OmniWeb is much the same, but this stylesheet makes no allowances for it).
For other browsers, the equivalent margin-left setting is equal to the width of the left column.
margin-right is set to the value of the overriding values for .rightcolumn's width. 
A margin can be created between these two columns either by changing these values, or by setting the padding of the relevant #...padding divs.
margin-top is set to -1px to make NN4 line up correctly.
*/
.centercolumn {
    margin              : 0;
    padding             : 0;
    color               : inherit;
    background-color    : transparent;
    z-index             : 4;
}
.centercolumn {
    margin-right        : 0;
    margin-top          : -1px;
    margin-bottom       : 0;
    margin-left         : -25px;
}
/* IE5 once again goes awry - shift it down (29px is right for this layout but no doubt the exact value will vary [sigh]) and then zap 
empty because otherwise IE5 goes rampaging on */
/*/*/
.centercolumn {
    margin-right        : 195px;
    margin-left         : 195px;
    margin-top          : 29px;
    font-family         : "\"}\"";
    font-family         : inherit;
    margin-top          : 0;
}
#empty{}
/*  */

/* following bit only necessary if OmniWeb to be handled - the .fake bit is only picked up by OmniWeb, IE and, er, Amaya
see  http://www.fu2k.org/alex/css/test/OmniWebInlineHack.mhtml
But exclude it from IE5/mac */
/*\*/
.fake.centercolumn {
    margin-right        : 1px;
    margin-left         : 1px;
}
/* this bit resets for IE */
* html .centercolumn {
    margin-right        : 195px;
    margin-left         : 195px;
}
/* End of OmniWeb shenanigans */

.footer {
    clear               : both;
    margin-top          : -11px;
    padding             : 12px;
    width               : 100%;
    color               : inherit;
    text-align          : center;
    background-color    : transparent;
}
.footer {
/*/*/
    margin-top          : 0px;
/* */
}


.clear {
    clear               : both;
    font-size           : 1px;
    line-height         : 0;
}


.leftpadding, .rightpadding {
    margin              : 0;
    padding             : 10px 28px;
}

.centerpadding  {
    margin-top          : -35px;
    padding             : 5px 33px;
}


Ich hoffe ihr könnt mir irgendwie helfen


manithu
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.01.2005, 09:26
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.11.2004
Beiträge: 34
manithu befindet sich auf einem aufstrebenden Ast
Standard

Habs geschafft, mit
Code:
/* Hides from IE5-mac \*/
* html .centercolumn {
    height              : 1%;
}
/* End hide from IE5-mac */
.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.01.2005, 23:04
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 18.01.2005
Beiträge: 696
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

[ot] kann man bei sowas nicht mal ein online-beispiel bereitstellen, anstatt mehrere meter code zu posten ...? [/ot]
Mit Zitat antworten
Antwort


Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Seitenspalten mit BG und variabler width nach Platzangebot skone CSS 3 29.03.2010 20:58
container automatisch unsichtbar behohaus Javascript & Ajax 7 13.06.2009 14:45
HTML Mailto auch im Quelltext unsichtbar? webseite_freaky (X)HTML 17 02.09.2008 21:29
Übergeordnete Box unsichtbar Ulan_Bator CSS 3 02.06.2008 06:56
IE: Mit hover Bildkommentar unsichtbar machen sgtlenz CSS 9 09.01.2008 13:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:52 Uhr.