Problem mit sichtbarer Breite eines Dropdowns

Status
Nicht offen für weitere Antworten.
D

Dukeatcoding

Mitglied
Problem mit sichtbarer Breite eines Dropdowns. Das Problem was man auf dem folgenden Screenshot sieht, tritt nur beim IE auf, der FF zeigt alles korrekt an...

screentk.jpg


Beim IE wird, wie man sieht das Dropdown beschnitten... hab schon alle möglichen CSS Eigenschaften probiert.

Hier der HTML Code
Code: 
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
  
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>TK Finanzgruppe - Startseite</title>
                 <script language="JavaScript">
          <!--
                          setcss();
                       
          function QuickJump(Formular)
          {
              var Element = Formular.Ziel.selectedIndex;
              var Frameziel = Formular.Ziel.options[Element].frameziel;
          
                if (Formular.Ziel.options[Element].value != 0)
                {
                    if(Frameziel == "extern")
                    {
                        window.open(Formular.Ziel.options[Element].value);
                    }
                    else
                    {
                        location = Formular.Ziel.options[Element].value;
                    }
                }  
      
          }
          
          function QuickJumpB(Formular)
          {
              var Element = Formular.ZielB.selectedIndex;
              var Frameziel = Formular.ZielB.options[Element].frameziel;
          
                if (Formular.ZielB.options[Element].value != 0)
                {
                    if(Frameziel == "extern")
                    {
                        window.open(Formular.ZielB.options[Element].value);
                    }
                    else
                    {
                        location = Formular.ZielB.options[Element].value;
                    }
                }  
      
          }
          
          function BilderVorladen()
            {
                document.Vorladen = new Array();
            
                if(document.images)
                {
                    for(var i = 0; i < BilderVorladen.arguments.length; i++)
                    {
                        document.Vorladen[i] = new Image();
                        document.Vorladen[i].src = BilderVorladen.arguments[i];
                    }
                }
            }
            
          function setcss() {
            if (screen.width >= 1280) {
          document.write("<link rel='stylesheet' type='text/css' href='main1280.css' /><link rel='stylesheet' type='text/css' href='menu1280.css' />");
            } else {
            document.write("<link rel='stylesheet' type='text/css' href='main.css' /><link rel='stylesheet' type='text/css' href='menu.css' />");
            }
            }  
                     
            //-->
            </script>


        <!--[if IE 7]>
        <style type="text/css">
        .menu li {float:left;}
        * html #ansprechpartner { left: 620px; }
        </style>
        <![endif]-->
        

</head>

<body onload="BilderVorladen('images/buttons/ansprechpartner_hover.jpg','images/buttons/faq_hover.jpg','images/buttons/kontakt_hover.jpg','images/buttons/home_hover.jpg','images/buttons/presseartikel_hover.jpg','images/buttons/datenschutz_hover.jpg','images/buttons/seitedrucken_hover.jpg','images/buttons/seiteempfehlen_hover.jpg','images/buttons/impressum_hover.jpg');">
<noscript>
    <p><h2>Ihr Browser unterst&uuml;tzt kein Java-Skript, w&auml;hlen Sie bitte Ihre Aufl&ouml;sung.<h2></p>
      <p><a href="index.html?solution=2">1280x1024</a></p>
      <p><a href="index.html?solution=1">1024x768 (Wenn Sie nicht sicher sind w&auml;hlen Sie diese Aufl&ouml;sung)</a></p>
</noscript>
 
<noscript>
     <p><h2>Ihr Browser unterst&uuml;tzt kein Java-Skript oder es ist deaktviert. Aus diesem Grund funktionieren einige Funktionen dieser Website nicht richtig. Bitte aktivieren Sie Javaskript f&uuml;r diese Seite!<h2></p>
</noscript>

           
      <div id="main">
           <div id="topbuttons">
                <a class="buttonHome" href="index.html"></a>
                <a class="buttonKontakt" href="Kontakt.html" target=""></a>

                <a class="buttonFaq" href="FAQ.html" target=""></a>
                <a class="buttonAnsprechpartner" href="Ansprechpartner.html" target=""></a>
                <div id="ansprechpartner">
                 <form name="ansprechpartner">
                     <select name="Ziel" size="1" onchange="QuickJump(this.form);">
                         <option value="0">Bitte ausw&auml;hlen:</option>
                         <option></option>
                                                       
                          <option value="Thomas Kolkmann.html" frameziel="" >Thomas Kolkmann</option>

                                                        
                          <option value="Andreas Scholz.html" frameziel="" >Andreas Scholz</option>
                                                        
                          <option value="Volker Hanisch.html" frameziel="" >Volker Hanisch</option>
                                                        
                          <option value="Thomas Brandt.html" frameziel="" >Thomas Brandt</option>
                                                        
                          <option value="Hedwig Nachtigaeller.html" frameziel="" >Hedwig Nachtigäller</option>
                                                        
                          <option value="Silke Kersting.html" frameziel="" >Silke Kersting</option>
                                                        
                          <option value="Elisabeth Empting.html" frameziel="" >Elisabeth Empting</option>

                                                        
                          <option value="Michael Mueller.html" frameziel="" >Michael Müller (Limburg/Lahn)</option>
                                               </select>
                 </form> 
                </div> <!--  ansprechpartner --> 
           </div> <!-- topbuttons  -->
           <div id="navi">
                <div class="menu">
                           <ul>

                        <li class="sub"><a href="Start Privatpersonen.html?menu=privat">F&uuml;r Privatpersonen</a>
                                          
                        </li>
                        <li class="sub"><a href="Start Unternehmen.html?menu=unternehmen">F&uuml;r Unternehmen</a>
                                                   </li>
                        <li class="sub"><a href="Start Referenzen.html?menu=referenzen">Referenzen</a>
                                                
                        </li>

                        <li><a href="http://www.pro-depot.de" target="_blank">Pro!Depot</a></li>
                        <li><a href="CallBack.html" target="">Wir rufen Sie zur&uuml;ck!</a></li>
                        </ul>
                </div>
           <div id="presseartikel">
           <a class="presseartikelButton" href="Presseartikel.html"></a>
           <form name="presse">

                <select name="ZielB" size="1" onchange="QuickJumpB(this.form);">
                        <option value="0">Bitte ausw&auml;hlen:</option>
                        <option></option>
                                                         
                          <option value="file.php?id=16" frameziel="" >Dez 07 - Spende Lichtblicke</option>
                                                          
                          <option value="file.php?id=9" frameziel="" >Feb 07 - Fachmarkt DO-Holzen</option>
                                                          
                          <option value="file.php?id=8" frameziel="" >Sep 06 - Sanierung Bröcker</option>

                                                          
                          <option value="file.php?id=10" frameziel="" >Sep 06 - HCC Dortmund</option>
                                                          
                          <option value="file.php?id=13" frameziel="" >Mai 06 - Chancen Bioenergie</option>
                                                          
                          <option value="file.php?id=12" frameziel="" >Mär 06 - Finanzierung Technologie</option>
                                                          
                          <option value="file.php?id=11" frameziel="" >Nov 05 - Finanzierung Mittelstand</option>
                                          </select>
           </form>
           </div>

           </div>
           <div id="content">
               Sie befinden sich bei: TK Finanzgruppe - Startseite<br><br><br><p><font size="4" face="Arial"><strong>Herzlich willkommen auf unseren Internetseiten -&nbsp; <br />wir freuen uns, dass Sie den Weg zu uns gefunden haben!</strong></font></p>
<p><strong><font size="4" face="Arial"><font size="2">Die TK Finanzgruppe, bestehend aus der TK Finanzen &amp; Service GmbH &amp; Co. KG </font><font size="2">und der TK Finanzconsulting GmbH &amp; Co. KG, empfiehlt sich Ihnen als professioneller und erfahrener Partner. Wir lassen uns messen an der Qualit&auml;t unserer Dienstleistungen und Produkte, sowie an dem Vertrauen, welches unsere Kunden und Gesch&auml;ftspartner uns entgegenbringen.</font></font></strong></p>

<p><font size="4" face="Arial"> </font></p> <br><br>			
              <table width="90%" cellpadding="0" cellspacing="0" >
              <tr>
                <td><strong><font size="2" face="Arial">7. Januar 2008: Neue Homepage</font></strong>&nbsp;</td>
              </tr>
              <tr>
                <td><font size="2" face="Arial"><br />Neues Jahr, neue Homepage. Die letzten Monate des vergangenen Jahres haben wir genutzt, um unseren Internet-Auftritt an unserem aktuellen Beratungsangebot anzupassen. Die letzten zwei Jahre haben zahlreiche &Auml;nderungen mit sich gebracht, die wir Ihnen hier geb&uuml;ndelt pr&auml;sentieren m&ouml;chten. Leider k&ouml;nnen wir aber nicht unsere Arbeit in s&auml;mtlichen Facetten hier darlegen - daher freuen wir uns auf das gemeinsame Gespr&auml;ch mit Ihnen!</font>&nbsp;</td>

              </tr>
            </table>           </div>
           <div id="bottombuttons">
                <a class="buttonDatenschutz" href="Datenschutz.html" target="""></a>
                <a class="buttonSeiteDrucken" href="print.php?name=index&menu=" target="_blank"></a>
                <a class="buttonSeiteEmpfehlen" href="Empfehlen.html" target="""></a>
                <a class="buttonImpressum" href="Impressum.html" target="""></a>
           </div>

</div>
</body>
</html>

hier die menu1280.css

Code: 
.menu {
z-index:1000;
font-size:75%;
margin:25px 10 50px 0px;
padding-top: 10px;
top:100px;
}

.menu ul {
padding:0;
margin:0;
list-style-type:none;
width:161px;
font: 10px Verdana;
font-weight: bold;
}

.menu li {
background-image: url(images/button_a.gif);
background-repeat: no-repeat;
}

* html .menu li {
height: 20px;
}

.menu ul li ul li{
background-image: none;
font: 11px Verdana;
color: #fff;
}

.menu a {
font-family:verdana;
text-align: left;
display:block;
text-decoration:none;
line-height:38px;
width:161px;
color:#1c326c;
text-indent:32px;
border:1px solid #fff;
border-width:0px 0px 0px 0px;
}

.menu  ul li ul li a {
text-align: left;
text-decoration:none;
color:#fff;
height: 15px;
background-image: none;
border-width:0px 0px 0px 0px;
}

* html .menu  ul li ul li a {
line-height:20px;
}

.menu  ul li ul{
margin: -8px 0px 20px -20px;
}

* html .menu  ul li ul{
margin: 0px 0px 20px -20px;
}

.menu :hover > a {
z-index:1;
text-decoration: underline;
background-image: url(images/button_b.gif);
color:#1c326c;
}

.menu ul li ul li:hover > a {
text-decoration: underline;
background-image: none;
color: #fff;
}

Und noch die main1280.css
Code: 
#main {
        width: 1029px;
        height: 750px;
        background-repeat: no-repeat;
        background-image: url(images/main_1280.jpg);
        margin: auto;
}

body {

        background-color: #d7d7d7;
        background-image: url(images/background.jpg);
        background-repeat: repeat-x;

}

#content {
         color:#1c326c;
         font: 10px Verdana;
         position: relative;
         top: 145px;
         left: 45px;
         width: 820px;
         height: 500px;
         overflow: auto;
         float:left;
         z-index:1;
         margin: auto;
}

* html #content {
         top: 105px;
         left: 10px;
}

#content table {
         color:#1c326c;
         font: 10px Verdana;
         margin: auto auto;
}


#navi {
        position: relative;
        left: 8px;
        top: 120px;
        width: 140px;
        height: 500px;
        z-index:2;
        float:left;
}

* html #navi {
        top: 55px;
}

a.presseartikelButton {
        width: 161px;
        height: 52px;
        background-image: url(images/buttons/presseartikel.jpg);
}

a.presseartikelButton:hover {
        background-image: url(images/buttons/presseartikel_hover.jpg);
}

#presseartikel {
        background-image: url(images/buttons/presseartikel.jpg);
		background-repeat: no-repeat;
        font: 10px Verdana;
        position: relative;
        width: 161px;
        height:52px;
        top:-50px;
        color:#1c326c;
}

#presseartikel:hover {
        background-image: url(images/buttons/presseartikel_hover.jpg);
}



#presseartikel select {
		margin: 29px 0px 0px 28px;
		background-color: #1c326c;
		height: 16px;
		font: 9px Verdana;
		color: #fff;
		width: 120px;
}

* html #presseartikel select {
		margin: -56px 0px 0px 28px;
}

#topbuttons {
        margin: auto auto;
        position: relative;
        top: 115px;
        width: 1029px;
        height: 31px;
}

* html #topbuttons {
		left:90px;
}

a.buttonHome {
        display:block;
        width: 129px;
        height: 31px;
        background-image: url(images/buttons/home.jpg);
        float:left;
        padding-left: 57px;
        background-repeat: no-repeat;
}

a.buttonHome:hover {
        background-image: url(images/buttons/home_hover.jpg);
}

a.buttonKontakt {
        width: 130px;
        height: 31px;
        background-image: url(images/buttons/kontakt.jpg);
        padding-left: 57px;
        background-repeat: no-repeat;
}

a.buttonKontakt:hover {
        background-image: url(images/buttons/kontakt_hover.jpg);
}

a.buttonFaq {
        width: 130px;
        height: 31px;
        background-image: url(images/buttons/faq.jpg);
        padding-left: 57px;
        background-repeat: no-repeat;
}

a.buttonFaq:hover {
        background-image: url(images/buttons/faq_hover.jpg);
}

a.buttonAnsprechpartner {
        width: 353px;
        height: 31px;
        background-image: url(images/buttons/ansprechpartner.jpg);
}

a.buttonAnsprechpartner:hover {
        background-image: url(images/buttons/ansprechpartner_hover.jpg);
}

a.buttonHome,a.buttonKontakt,a.buttonFaq,a.buttonAnsprechpartner {
        height: 31px;
        float:left;
        margin-left: 22px;
}

* html a.buttonHome,* html a.buttonKontakt,* html a.buttonFaq,* html a.buttonAnsprechpartner {
        margin-left: 17px;
}

#ansprechpartner {
        color:#fff;
        position: relative;
        width: 230px;
        height:20px;
        top:-25px;
        left: 810px;
}

* html #ansprechpartner {
        color:#fff;
        position: relative;
        width: 230px;
        height:20px;
        top:-26px;
        left: 636px;
}

*+html #ansprechpartner { 
          left: 145px; 
}


#ansprechpartner select {
background-color: #1c326c;
height: 16px;
font: 10px Verdana;
color: #fff;
width: 180px;
}

#bottombuttons {
        margin: auto auto;
        position: relative;
        top: 157px;
        left: 23px;
        width: 880px;
        height: 31px;
}

* html #bottombuttons {
        top: 120px;
	left:100px;
}


a.buttonDatenschutz {
        width: 159px;
        height: 31px;
        background-image: url(images/buttons/datenschutz.jpg);
}

a.buttonDatenschutz:hover {
        background-image: url(images/buttons/datenschutz_hover.jpg);
}

a.buttonSeiteDrucken {
        width: 246px;
        height: 31px;
        background-image: url(images/buttons/seitedrucken.jpg);
}

a.buttonSeiteDrucken:hover {
        background-image: url(images/buttons/seitedrucken_hover.jpg);
}

a.buttonSeiteEmpfehlen {
        width: 245px;
        height: 31px;
        background-image: url(images/buttons/seiteempfehlen.jpg);
}

a.buttonSeiteEmpfehlen:hover {
        background-image: url(images/buttons/seiteempfehlen_hover.jpg);
}

a.buttonImpressum {
        width: 153px;
        height: 34px;
        background-image: url(images/buttons/impressum.jpg);
}

a.buttonImpressum:hover {
        background-image: url(images/buttons/impressum_hover.jpg);
}

a.buttonDatenschutz, a.buttonSeiteDrucken, a.buttonSeiteEmpfehlen, a.buttonImpressum {
        height: 40px;
        float:left;
}

Vielleicht hat ja jemand ne Idee
 
Hi,

gegenüber den anderen Browsern "trimmt" der IE das option-Element auf die fixe Breitenangabe des select-Elements, auch wenn die Einträge in der Auswahlliste tatsächlich breiter sind.

Meines Wissens bekommst du das leider nur in den Griff, wenn auf die Breitenangabe verzichtet, oder ein entsprechender Wert gewählt wird, der die Zeichenlänge der Einträge berücksichtigt.
 
Ok

Das kann ich mit meinen Praktischen Erfahrungen auch so bestätigen. Ich meine das Dropdown mit Ansprechpartner, was oben Rechts ist haben wir vergrößert und da gibts jetzt keine Probleme mehr.

IE ist schon nen misst Browser... ich meine es gibt ja auch so CSS Optionen wie

z-index

oder

overflow:visible;

die hier offensichtlich nicht greifen.... vielleicht ja doch noch jemand ne Idee den IE zu überlisten. Ich sitze in den letzten 2 Wochen nur noch daran so kleine Effekte von CSS oder so die im FF vernünftig laufen auf den IE zu portieren und langsam nervt es.
 
Dukeatcoding hat gesagt.:
Ich meine das Dropdown mit Ansprechpartner, was oben Rechts ist haben wir vergrößert und da gibts jetzt keine Probleme mehr.
Zum Vergrößern anklicken....
Wie ich eben schon schrieb:
Maik hat gesagt.:
Meines Wissens bekommst du das leider nur in den Griff, wenn [...] ein entsprechender Wert gewählt wird, der die Zeichenlänge der Einträge berücksichtigt.
Zum Vergrößern anklicken....
und das ist bei der "Ansprechpartner"-Auswahlliste der Fall, bei den "Presseartikeln" hingegen nicht.
 
Jo, ich hab gerade noch nen bissel probiert indirekt was zu erwzingen. Über ne Tabellen Zelle die drum ist... aber wie du schon sagtest es scheint alles nichts zu bringen....
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück