Dropdown-Menü im Layer

Martys · 14. Juni 2004

Hallo,

habe eine Seite mit Layern layoutet. Funktioniert auch soweit ganz gut, allerdings macht der IE 6 nach einfügen eines DropDown-Menüs ein paar Probleme.

Zwei Layer, die eigentlich keinen Abstand haben sollten, haben jetzt im IE 6 einen, im Firebird und NS 7 ist alles in Ordnung.

Habe mal Screenshots des Fehlers angehängt.

Kennt jemand dieses Problem und kann mir einen Tipp geben?

Danke schon mal,

Martys

BugsBastard · 15. Juni 2004

Hi,

wie hast Du denn die Layer eingebunden? Mit festen Angaben oder variabel? Sind das Tabellen in den Layern oder einfach Container?

Am besten wär ein bisschen Quelltext

Gruss,

Bugs

Martys · 15. Juni 2004

Stimmt, Quelltext wäre sinnvoll! Leider ist dieser etwas umfangreicher, sorry.

Hier die html-Datei:

PHP:

<!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" xml:lang="de" lang="de">
  <head>
         <title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="Javascript" src="menu.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  </head>
  <body>
<div id="container">    
<div id="header">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
<form name="form1">
<table width="720" border="0" cellspacing="0" cellpadding="0">
    <tr> 
      <td><img src="pics/space.gif" width="460" height="70" border="0" alt="" /></td>
      <td valign="top"><img src="pics/space.gif" width="150" height="44" border="0" alt="" /><br /> 
<a href="index.php?section=kontakt" onmouseover="pixchange(2,highpix1);window.status='Home'; return true" onmouseout="pixchange(2,normal1)"><img src="pics/bt_kontakt.gif" alt="Kontakt" border="0" /></a><img src="pics/head_space.gif" width="13" height="17" border="0" alt="" /><a href="index.php?section=impressum" onmouseover="pixchange(4,highpix2);window.status='Home'; return true" onmouseout="pixchange(4,normal2)"><img src="pics/bt_impressum.gif" alt="Impressum" border="0" /></a> 
         </td>
      <td valign="top"><img src="pics/space.gif" width="134" height="40" border="0" alt="" /><br />
<select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
          <option value="#" selected>Gehe direkt zu  ..</OPTION>
		  <option value="index.php?section=home">Home</option>
          <option value="index.php?section=news">News</option>
          <option value="index.php?section=verein">Verein</option>
          <option value="index.php?section=team">Team</option>
          <option value="index.php?section=galerie">Galerie</option>
          <option value="index.php?section=sponsoren">Sponsoren</option>
          <option value="index.php?section=gbook">G&auml;stebuch</option>
        </select></td>
    </tr>
  </table>
</form>
</div>
<div id="content">
<div id="titel"><a href="index.php?section=home">Home</a><br />
<a href="index.php?section=news">News</a><br />
<a href="index.php?section=saison">Saison</a><br />
<a href="index.php?section=verein">Verein</a><br />
<a href="index.php?section=team">Team</a><br />
<a href="index.php?section=galerie">Galerie</a> <br />
<a href="index.php?section=sponsoren">Sponsoren</a><br />
<a href="index.php?section=shop">Shop</a><br />
<a href="index.php?section=gbook">G&auml;stebuch</a></div>
<div id="inhalt"> 
<p class="gross">F***</p>
<p class="normal">Fast wäre diese Page fertig gewesen, aber auch nur fast.</p>
<p class="normal">Wie ihr sehen könnt ist sie es aber bald, also keine Panik.</p>
</div>
</div>
 <div id="footerhome">&nbsp;</div>
</div>
</body>
</html>

und hier die css-Datei:

PHP:

body  {
            margin : 0;
            padding : 0;
            margin-left : auto  ;
            margin-right : auto  ;
            text-align : center;
            font-family : Verdana, Helvetica, Arial;
            background-color : #d7cfbf;
      }
    #content {
            width : 764px;
            padding : 4px 10px 0;
            text-align : left;
            overflow : auto  ;
            background-image : url(pics/bg.gif);
            background-repeat : repeat-y;
      }
    #header {
            width : 764px;
            height : 70px;
            margin : 0 ;
            background-image : url(pics/header.gif);
                        font-family : Verdana;
            font-size : 10px;
            text-align : left;
      }
    #footerhome {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerhome.jpg);
      }
    #footernews {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerhome.jpg);
      }
    #footersaison {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerteam.jpg);
      }
    #footerverein {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerverein.jpg);
      }
    #footerteam {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerteam.jpg);
      }
    #footergalerie {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerverein.jpg);
      }
    #footersponsoren {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerhome.jpg);
      }
    #footergbook {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerteam.jpg);
      }
    #footershop {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerhome.jpg);
      }
          #footerimpressum {
            width : 764px;
            height : 194px;
margin : 0;
            padding : 0;
            background-image : url(pics/footerteam.jpg);
      }
          #footerkontakt {
            width : 764px;
            height : 194px;
            margin : 0;
            padding : 0;
            background-image : url(pics/footerkontakt.jpg);
      }
    #container {
            width : 764px;
            margin-left : auto  ;
            margin-right : auto  ;
            padding : 0;
            background-image : url(pics/bg.gif);
            background-repeat : repeat-y;
      }
    #inhalt {
            padding : 4px;
            font-family : Verdana;
            font-size : 10px;
            text-align : left;
            width : 520px;
            margin-left : 100px;
      }
    #titel {
            float : left;
            width : 100px;
            padding : 4px;
            font-family : Verdana;
            font-size : 10px;
            text-align : left;
      }
         .content {
            padding : 4px;
            font-family : Verdana;
            font-size : 10px;
            text-align : left;
            width : 520px;
      }
    .menu {
            padding : 4px;
            font-family : Verdana;
            font-size : 12px;
            text-align : left;
            line-height : 13pt;
      }
    .headfoot {
            padding : 0;
            text-align : left;
      }
    a:link {
            font-family : Verdana, HelveticAa, Arial;
            font-size : 11px;
            text-decoration : none;
            color : #000000;
      }
    a:visited {
            font-family : Verdana, Helvetica, Arial;
            font-size : 11px;
            text-decoration : none;
            color : #000000;
      }
    a:active {
            font-family : Verdana, Helvetica, Arial;
            font-size : 11px;
            text-decoration : none;
            color : #000000;
      }
    a:hover {
            font-family : Verdana, Helvetica, Arial;
            font-size : 11px;
            text-decoration : none;
            color : #ff9900;
      }
    a.hell:link {
            font-family : Verdana, Helvetica, Arial;
            font-size : 10px;
            text-decoration : none;
            color : #fdfdfd;
      }
    a.hell:visited {
            font-family : Verdana, Helvetica, Arial;
            font-size : 10px;
            text-decoration : none;
            color : #fdfdfd;
      }
    a.hell:active {
            font-family : Verdana, Helvetica, Arial;
            font-size : 10px;
            text-decoration : none;
            color : #fdfdfd;
      }
    a.hell:hover {
            font-family : Verdana, Helvetica, Arial;
            font-size : 10px;
            text-decoration : none;
            color : #e9e9e9;
      }
    .normal {
            font-family : Verdana, Helvetica, Arial;
            font-size : 11px;
            color : #000000;
            line-height : 13pt;
            text-align : justify;
      }
    .gross {
            font-family : Verdana, Helvetica, Arial;
            font-size : 14px;
            font-weight : bold;
            color : #000000;
      }
    .klein {
            font-family : Verdana, Helvetica, Arial;
            font-size : 8px;
            color : #cccccc;
      }
    .news {
            font-family : Verdana, Helvetica, Arial;
            font-size : 9px;
            color : #000000;
            line-height : 11pt;
      }
    input , select , textarea {
            font-size : 11px;
            font-family : Verdana;
            color : #000000;
      }
    .Feld {
            background-color : #fdfdfd;
            width : 300px;
            border : 1px solid #dddddd;
      }
    .Button {
            background-color : #fdfdfd;
            color : #aaaaaa;
            width : 140px;
            border : 1px solid #dddddd;
      }
    .mitte {
            text-align : center;
      }
    .links {
            text-align : left;
      }
          .rechts {
            text-align : right;
                        margin-right: 20px ;
      }

BugsBastard · 15. Juni 2004

Hallo nochmal,

wenn ich mich nich ganz irre dann liegt das entweder an dem Formular oder dem Absatz (aus Deinen Bildern kann ich leider nich erkennen wo der IE die Spalte hinzufügt). Bei beiden sorgt der IE meineserachtens dafür, daß eine Spalte oberhalb bzw. unterhalb frei bleibt. Da bin ich mir allerdings nich ganz sicher.

Ich würde die Layer am besten mit einer Fest-Definierten Angabe platzieren (in den Layer folgenden Code: style="visibility:hidden; position:absolute; z-index:100; top:15px; left:1px;" wobei top von oben und left von links gezählt wird) oder aber eine Tabelle um die Layer herum basteln die sie platziert.

Gruss,

Bugs

BugsBastard · 15. Juni 2004

Hallo nochmal,

wenn ich mich nich ganz irre dann liegt das entweder an dem Formular oder dem Absatz (aus Deinen Bildern kann ich leider nich erkennen wo der IE die Spalte hinzufügt). Bei beiden sorgt der IE meineserachtens dafür, daß eine Spalte oberhalb bzw. unterhalb frei bleibt. Da bin ich mir allerdings nich ganz sicher.

Ich würde die Layer am besten mit einer Fest-Definierten Angabe platzieren (in den Layer folgenden Code: style="visibility:hidden; position:absolute; z-index:100; top:15px; left:1px;" wobei top von oben und left von links gezählt wird) oder aber eine Tabelle um die Layer herum basteln die sie platziert.

Gruss,

Bugs

Dropdown-Menü im Layer

Martys

Erfahrenes Mitglied

Anhänge

BugsBastard

Erfahrenes Mitglied

Martys

Erfahrenes Mitglied

BugsBastard

Erfahrenes Mitglied

BugsBastard

Erfahrenes Mitglied

Neue Beiträge