Anzeige:
Ergebnis 1 bis 4 von 4

Thema: 1 Pixel hohe weiße Zeile im IE zwischen Hintergrundgrafiken

  1. #1
    Registrierter Benutzer
    Registriert seit
    07.05.2003
    Beiträge
    127

    1 Pixel hohe weiße Zeile im IE zwischen Hintergrundgrafiken

    Hallo,
    ich habe eine Navigationsleiste, die ich mit kleinen gifs abgerundet habe. Dazu habe ich das gesamte div in drei Bereiche geteilt:
    Code:
    <div id="spezifikumNavigation" >
    		<div class="navigationTop">
                        die top-Grafik, ein 200px breiter, 15px hoher Balken, an den Ecken rund.
    		</div>
    		<div class="navigationMiddle">
                         Als Hintergrund ein 200px breiter Balken.
                         Navigationsleiste steht hier (ul/li)
    		</div>
    		<div class="navigationBottom">
                        die Bottom-Grafik, fast genau wie top,  nur anders herum.
    		</div>		
    	</div>
    Zwischen dem mittleren Teil und dem Oberen ist im IE6 ein ein Pixel hoher, weißer Streifen zu sehen. Im IE 7 übrigens nicht, genausowenig im FF >= 1.5.
    Die divs sind im CSS so definiert:
    Code:
    #html, body {
       margin:0; 
       padding:0; 
       height:100%;
    }
    
    body {
       background-color:white;
       color:black;
       font-family:Verdana,sans-serif;
    }
    
    .navigationBottom {
      position:absolute;
      top:490px;
      left:11px;
      width:250px;
      height:55px;
      display: block;
      background-image: url(navigationBottom.gif);
      background-repeat: no-repeat;
      background-position: 0 0;
    }
    
    .navigationMiddle {
      position:absolute;
      top:15px;
      left:0px;
      width:250px;
      display: block;
      color:rgb(160,32,160);
    }
    
    .navigationTop {
      position:absolute;
      top:0px;
      left:0px;
      width:250px;
      height:15px;
      display: block;
      background-image: url(naviagtionTop2.gif);
      background-repeat: no-repeat;
      background-position: 0 0;
    }
    
    #spezifikumNavigation {
      position:absolute;
      top:86px;
      left:5px;
      width:250px;
      height:500px;
      overflow:hidden;
      background-image: url(navigationMiddle.gif);  
      background-repeat: repeat-y;
      background-position: 11px;
      background-color:rgb(255,255,255);
      color:rgb(160,32,160);
      text-indent: 15px;
    }
    Darf man hier eigentlich URLs posten? http://http://www.tanzschule-hellwig...chule-hellwig/
    Kann mir jemand einen Hinweis darauf geben, was ich falsch gemacht habe? Hätte ich irgendwo die "line-height" setzen müssen, oder woran mag das liegen?

    Danke,
    mamue

  2. #2
    Registrierter Benutzer
    Registriert seit
    02.07.2004
    Beiträge
    456
    Woran das jetzt im Detail liegt, kann ich dir so auf die Schnelle nicht sagen, aber eines ist sicher. Der IE ist für's standardkonforme Webdesign völlig ungeeignet, da er, wie es Software von MS so oft gern tut, in Sachen Web-Standard sein eigenes Süppchen kocht.
    Anwendungsentwickler; ehem. Siemens, jetzt Nokia Siemens Networks GmbH. & CO KG
    C/C++;C#;VB;ASP.NET;Ajax;MSSQL
    Webentwicklung/Design; privat
    PHP;MySQL;HTML;XML;Typo3;Photoshop;ASP.NET;Ajax;MS SQL

  3. #3
    Registrierter Benutzer Avatar von undefined
    Registriert seit
    01.03.2004
    Beiträge
    1.255
    Genauso schaut's aus. Der IE Interpretiert deine CSS nicht Vollständig weil er Probleme mit CSS2 hat.
    z.B: ist background-position und text-indent CSS2

    Du hast aber eine Möglichkeit.
    PHP-Code:
    <head>
    <
    title></title>
       <!--[
    ifltIE6]>
          <
    style type="text/css">
             
    /* <![CDATA[ */
             /* ]]> */
          
    </style>
       <![endif]-->
    </
    head
    nur der IE reagiert darauf.
    mfg undefined
    --
    Undefined Behavior (undefiniertes Verhalten) bedeutet meistens etwas ungültiges.
    xhtml Debugger

  4. #4
    Registrierter Benutzer
    Registriert seit
    07.05.2003
    Beiträge
    127
    Besten Dank!
    Irgendwie ist das Problem jetzt scheinbar weg. Ich glaube, es lag möglicherweise an einem fehlenden "display: block;". Ich sage "scheinbar" deshalb, weil ich nur über wenige verschiedene Browser verfüge (IE 6/7 & FF 1.5/2).

    mamue

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •