Ergebnis 1 bis 4 von 4

Thema: Problem mit Navigation Firefox vs. IE

  1. #1
    Calimero78
    Gast

    Standard Problem mit Navigation Firefox vs. IE

    Hallo Leute,

    dies hier ist mein erster Thread und Ich hoffe hier Hilfe zu finden.

    Ich gestalte im Moment noch aus reinem Hobby Pages und bin gerde dabei meine eigene neu zu gestalten und habe folgendes Problem:

    Das Gerüst meiner neuen Page ist ausschließlich mit Tabellen aufgebaut worden. Dort wo ich meine Unterseiten anzeigen lassen möchte habe ich <iframes> eingefügt.

    Nun habe ich das Problem, dass die Navigation am Linkenrand im Firefox korrekt angezeigt wird, beim IE aber nicht, hier wird die Navigation (Flyout / Vertikal nach rechts) einfach vom iframe überlappt, sodass die Navigation nicht zu sehen ist!! (siehe Anhänge)

    Ich kann mir nicht vorstellen das es am CSS liegt da bei einem Trockentest also ohne Iframe alles korrekt angezeigt wird. Ehrlich gesagt habe ich aber noch wenig Ahnung um das zu beurteilen und hoffe auf eure Hilfe.

    Schon jetzt vielen Dank für eure Antworten...!
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Angehängte Grafiken Angehängte Grafiken

  2. #2
    Forum Guru
    Registriert seit
    14.06.2004
    Ort
    Schleswig-Holstein
    Beiträge
    5.439
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Moin!

    Nur anhand eines Screenshot wird dir keiner sagen können, was falsch ist.
    Wie wäre es mit einer URL damit man sich mal den Queltext ansehen kann?

    Fragt ...

    Ronald

  3. #3
    Calimero78
    Gast

    Standard

    HI,

    ne URL kann ich dir leider nicht geben, da noch nicht Online aber den Quelltext (stark aufs wesentliche reduziert)!! (dachte es wär ein Pauschal-Problem deshalb wollte ich euch nicht mit dem Quelltext zu schütten ) gebe ich euch gerne.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <html>
    <head>
    <meta http-equiv="Content-Language" content="de">
    
    <title>- .&#58;&#58; Welcome ² eDrinks &#58;&#58;.</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="keywords" content="Keywords here">
    <meta name="description" content="Description here">
    <META NAME="robots" CONTENT="index, follow">
    <META NAME="distribution" CONTENT="global"> 
    <META NAME="rating" CONTENT="general">
    <META NAME="Content-Language" CONTENT="english">
    
    <script language="JavaScript" type="text/JavaScript" src="js/datus.js"></script>
    <script type="text/javascript" src="js/mover.js"></script>
    
    <LINK href="css/flyouts.css" type=text/css rel=StyleSheet>
    
    
    </head>
    
    <link href="css/datus.css" rel="stylesheet" type="text/css">
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages&#40;'images/btn_home_dn.jpg','images/btn_about_dn.jpg','images/btn_contact_dn.jpg','images/btn_products_dn.jpg','images/btn_support_dn.jpg','images/btn_news_dn.jpg'&#41;">
    <table width="100%" height="582" border="0" cellpadding="0" cellspacing="0">
      <tr> 
        <td height="87"><table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr> 
              <td width="342" rowspan="2">
              [img]images/toplogo+.jpg[/img]</td>
              <td width="34" rowspan="2">[img]images/topmidspace.jpg[/img]</td>
              <td background="images/topbg.jpg">[img]images/topbg.jpg[/img]</td>
            </tr>
            <tr> 
              <td background="images/topnavbg.jpg">
              <a href="Frame2.htm" target="I2">
    		  [img]images/btn_home.jpg[/img]</a>
              [img]images/navspacer.jpg[/img]
              <a href="/Temp4/php/gbooke/gb.php" target="I2">
    		  [img]images/btn_about.jpg[/img]</a>
    		  [img]images/navspacer.jpg[/img]
    		  [img]images/btn_products.jpg[/img]
    		  [img]images/navspacer.jpg[/img]
    		  [img]images/btn_contact.jpg[/img]
    		  [img]images/navspacer.jpg[/img]
    		  [img]images/btn_support.jpg[/img]
    		  [img]images/navspacer.jpg[/img]
    		  
    		  </td>
            </tr>
          </table></td>
      </tr>
      <tr> 
        <td valign="top" height="478">
    <table width="100%" height="437" border="0" cellpadding="0" cellspacing="0" background="images/topnavbg.jpg">
            <tr> 
              <td height="11" colspan="2" background="images/basebg2.jpg">[img]images/basebg2.jpg[/img]</td>
            </tr>
            <tr> 
              <td width="150" rowspan="2" valign="top" height="426">
    		    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td valign="top">
                      
                    <TR>
    		          <TD height="1" COLSPAN=1 width="150"></td>
                   </tr>
                  </TD>
           	     </TR>
               <table width="150" cellpadding="0" cellspacing="0" height="34">
              <tr>
             <TD valign=top width=150 height="50" >
    
          <SCRIPT src="js/flyouts.js" type=text/javascript></SCRIPT>
    
          <DIV class=contentForSupported>
    	  <DIV class=one><SPAN class=flyoutRoot>
          <DIV class=hiddenFlyout>Drinks
          
          <DIV class=setOrigin>
          <DIV class=flyoutDiv onmouseover=flyoutOver&#40;this,1,event&#41;; onclick=event.cancelBubble=true; onmouseout=flyoutOut&#40;1&#41;;>
          <DIV class=flyoutBackground><A class=LinkInFlyoutBold title="">Drinks</A>
    
          </DIV></DIV></DIV></DIV></SPAN></DIV>
    
          <DIV class=one>
    	  <SPAN class=flyoutRoot>
          <DIV class=hiddenFlyout>
    	  Die Zutaten
    
    	  <DIV class=setOrigin>
          <DIV class=flyoutDiv onmouseover=flyoutOver&#40;this,1,event&#41;;
          onclick=event.cancelBubble=true; onmouseout=flyoutOut&#40;1&#41;;>
          <DIV class=flyoutBackground><A class=LinkInFlyoutBold title="">Die Zutaten</A>
    
    
          </DIV></DIV></DIV></DIV></SPAN></DIV>
    
          <DIV class=one><SPAN class=flyoutRoot>
          <DIV class=hiddenFlyout>Mixology
    
          </DIV></SPAN></DIV></DIV>
         
        
    
    [img]js/s.gif[/img]
        </TD>
        </tr>
                  <td>[img]images/arrow.jpg[/img]<font color="#2271A0">News
                    / Events</font></td>
                  </tr>
                  <tr>
                    <td>[img]images/spacer.gif[/img]
                      <table width="229" border="0" cellspacing="0" cellpadding="0" height="307">
                        <tr>
                          <td width="20" rowspan="3" height="72">[img]images/spacer.gif[/img]</td>
                        </tr>
                        <tr> 
                          <td class="sidelinks2" height="12" width="209">16.02.2005</td>
                        </tr>
                        <tr> 
                          <td class="sidelinks2" height="48" width="209">Neuer Cocktail
                          
    
                          Easy Rider
     
    
                            &gt;&gt; mehr</td>
                        </tr>
                        <tr>
                          <td rowspan="3" height="85" width="20">[img]images/spacer.gif[/img]</td>
                          <td height="25" width="209">
    
                            <span class="sidelinks">Buch Tip</span></td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="12" width="209">29.11.2004</td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="48" width="209"> 1000 Cocktails and more...
                          
     
    
                            &gt;&gt; mehr</td>
                        </tr>
                        <tr>
                          <td rowspan="3" height="73" width="20">[img]images/spacer.gif[/img]</td>
                          <td height="25" width="209">
    
                            <span class="sidelinks">Statistik</span></td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="12" width="209">27.11.2004</td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="36" width="209">aktuelle Pagestatistik
                          
     
    
                            &gt;&gt; mehr</td>
                        </tr>
                        <tr>
                          <td rowspan="3" height="77" width="20">[img]images/spacer.gif[/img]</td>
                          <td height="17" width="209">
    
                            <span class="sidelinks">Aktuelles</span></td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="12" width="209">22.11.2004</td>
                        </tr>
                        <tr>
                          <td class="sidelinks2" height="48" width="209">
                          Cocktail of the Moment
    Sex on the Beach
                          
    
                          
    
                            &gt;&gt; mehr</td>
                        </tr>
                      </table></td>
                  </tr>
                </table></td>
              
              <td valign="top" bgcolor="#FFFFFF" height="454"> 
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="29" colspan="3" background="images/navbasebg.jpg">[img]images/navbasebg.jpg[/img]</td>
                  </tr>
                  <tr>
                    <td width="30"></td>
                    <td>
                    
                     <iframe name="I2" width="750" height="401" src="Frame2.htm" marginwidth="0" marginheight="0" scrolling="no" noresize border="0" frameborder="0">
                         Ihr Browser unterstützt Inlineframes nicht oder zeigt sie in der derzeitigen Konfiguration nicht an.</iframe>
                     </td>
                    <td width="20"></td>
                  </tr>
                </table></td>
            </tr>
            <tr>
              <td bgcolor="#FFFFFF" height="1"></td>
            </tr>
          </table></td>
      </tr>
      <tr> 
        <td height="1" background="images/basebg1.jpg"></td>
      </tr>
      <tr>
        <td height="1" valign="top" background="images/basebg2.jpg">
        <table width="100%" border="0" cellspacing="0" cellpadding="0" height="16">
          <tr>
            <td height="16" class="baseline">© Copyright 2004 eDrinks.de All Rights
            Reserved.</td>
            <td align="right" class="baseline" height="16"></td>
          </tr>
        </table></td>
      </tr>
    </table>
    </body>
    </html>
    und das von der CSS-Datei

    Code:
    .setOrigin &#123;
    	Z-INDEX&#58; 2; LEFT&#58; 0px; POSITION&#58; relative; TOP&#58; 0px
    &#125;
    .flyoutDiv &#123;
    	BORDER-RIGHT&#58; #000000 1px solid; BORDER-TOP&#58; #000000 1px solid; BORDER-LEFT&#58; #000000 1px solid; WIDTH&#58; 240px; BORDER-BOTTOM&#58; #000000 1px solid; POSITION&#58; absolute; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .flyoutest &#123;
    	BORDER-RIGHT&#58; #000000 1px solid; BORDER-TOP&#58; #000000 1px solid; BORDER-LEFT&#58; #000000 1px solid; WIDTH&#58; 40px; BORDER-BOTTOM&#58; #000000 1px solid; POSITION&#58; absolute; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .one .flyoutDiv &#123;
    	LEFT&#58; 151px; TOP&#58; -21px
    &#125;
    
    .one2 .flyoutest &#123;
    	LEFT&#58; 151px; TOP&#58; -21px
    &#125;
    .two .flyoutDiv &#123;
    	LEFT&#58; 234px; TOP&#58; -15px
    &#125;
    
    .two2 .flyoutest &#123;
    	LEFT&#58; 234px; TOP&#58; -15px
    &#125;
    
    
    .flyoutBold .flyoutDiv &#123;
    	TOP&#58; -20px
    &#125;
    
    .flyoutBoldt .flyoutest &#123;
    	TOP&#58; -20px
    &#125;
    
    .hiddenFlyout .flyoutDiv &#123;
    	DISPLAY&#58; none
    &#125;
    
    .hiddenFlyout .flyoutest &#123;
        DISPLAY&#58; none
    &#125;
    
    
    .flyoutLink &#123;
    	BACKGROUND-POSITION&#58; 230px 50%; MARGIN-TOP&#58; 0px; DISPLAY&#58; block; MARGIN-BOTTOM&#58; 0px; BACKGROUND-REPEAT&#58; no-repeat; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; TEXT-DECORATION&#58; none
    &#125;
    .flyoutLinkBold &#123;
    	BACKGROUND-POSITION&#58; 230px 50%; MARGIN-TOP&#58; 0px; DISPLAY&#58; block; MARGIN-BOTTOM&#58; 0px; BACKGROUND-REPEAT&#58; no-repeat; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; TEXT-DECORATION&#58; none
    &#125;
    .flyoutLinkRoot &#123;
    	BACKGROUND-POSITION&#58; 230px 50%; MARGIN-TOP&#58; 0px; DISPLAY&#58; block; MARGIN-BOTTOM&#58; 0px; BACKGROUND-REPEAT&#58; no-repeat; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; TEXT-DECORATION&#58; none
    &#125;
    .flyoutLinkRoot &#123;
    	BACKGROUND-POSITION&#58; 147px 50%
    &#125;
    .flyoutLinkRoot &#123;
    	PADDING-LEFT&#58; 7px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 11px; MARGIN-LEFT&#58; 0px; COLOR&#58; #FFFFFF; PADDING-TOP&#58; 3px; BORDER-BOTTOM&#58; #cccccc 1px solid; HEIGHT&#58; 22px
    &#125;
    .hiddenFlyout .flyoutLinkRoot &#123;
    	PADDING-LEFT&#58; 7px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 11px; MARGIN-LEFT&#58; 0px; COLOR&#58; #FFFFFF; PADDING-TOP&#58; 3px; BORDER-BOTTOM&#58; #cccccc 1px solid; HEIGHT&#58; 22px
    &#125;
    .hiddenFlyoutt .flyoutLinkRoot &#123;
    	PADDING-LEFT&#58; 7px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 11px; MARGIN-LEFT&#58; 0px; COLOR&#58; #FFFFFF; PADDING-TOP&#58; 3px; BORDER-BOTTOM&#58; #cccccc 1px solid; HEIGHT&#58; 22px
    &#125;
    .flyoutLink &#123;
    	PADDING-LEFT&#58; 7px; FONT-SIZE&#58; 10px
    &#125;
    .flyoutLinkBold &#123;
    	PADDING-LEFT&#58; 7px; FONT-SIZE&#58; 10px
    &#125;
    .flyoutLink &#123;
    	PADDING-TOP&#58; 1px; HEIGHT&#58; 15px
    &#125;
    .flyoutLinkBold &#123;
    	FONT-WEIGHT&#58; bold; PADDING-TOP&#58; 3px; HEIGHT&#58; 19px
    &#125;
    .hiddenFlyout .flyoutLink&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    .hiddenFlyout .flyoutLinkBold&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    .hiddenFlyout .flyoutLinkRoot&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    .visibleFlyout .flyoutLink &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .visibleFlyout .flyoutLinkBold &#123;
    	coLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .visibleFlyout .flyoutLinkRoot &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .hiddenFlyout .flyoutLink &#123;
    	COLOR&#58; #000000; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .hiddenFlyout .flyoutLinkBold &#123;
    	COLOR&#58; #000000; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .flyoutLinkBold &#123;
    	FONT-WEIGHT&#58; bold; COLOR&#58; #000000; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .hiddenFlyout .flyoutLinkBold &#123;
    	FONT-WEIGHT&#58; bold; COLOR&#58; #000000; BACKGROUND-COLOR&#58; #cccccc
    &#125;
    .moreLink &#123;
    	DISPLAY&#58; block; PADDING-LEFT&#58; 6px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 10px; COLOR&#58; #000000; PADDING-TOP&#58; 3px; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; HEIGHT&#58; 20px; TEXT-DECORATION&#58; none
    &#125;
    .moreLink&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    .linkInFlyout &#123;
    	DISPLAY&#58; block; PADDING-LEFT&#58; 6px; FONT-SIZE&#58; 10px; MARGIN-BOTTOM&#58; 0px; PADDING-BOTTOM&#58; 3px; COLOR&#58; #000000; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; TEXT-DECORATION&#58; none
    &#125;
    .linkInFlyoutBold &#123;
    	DISPLAY&#58; block; PADDING-LEFT&#58; 6px; FONT-SIZE&#58; 10px; MARGIN-BOTTOM&#58; 0px; PADDING-BOTTOM&#58; 3px; COLOR&#58; #000000; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; TEXT-DECORATION&#58; none
    &#125;
    .linkInFlyout &#123;
    	MARGIN-TOP&#58; 2px; MARGIN-BOTTOM&#58; 2px; LINE-HEIGHT&#58; 80%
    &#125;
    .one .linkInFlyout&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .one2 .linkInFlyout&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .two .linkInFlyout&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    
    .two2 .linkInFlyout&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #666666
    &#125;
    .linkInFlyoutBold &#123;
    	FONT-WEIGHT&#58; bold
    &#125;
    .linkInFlyoutBold&#58;hover &#123;
    	COLOR&#58; #ffffff; BACKGROUND-COLOR&#58; #A2A2A2
    &#125;
    .bar &#123;
    	BORDER-TOP&#58; #666666 1px solid; WIDTH&#58; 100%
    &#125;
    .bar2 &#123;
    	BORDER-TOP&#58; #666666 1px solid; WIDTH&#58; 100%
    &#125;
    .halfBar &#123;
    	MARGIN&#58; 0px 10%; HEIGHT&#58; 7px
    &#125;
    .halfBar2 &#123;
    	MARGIN&#58; 0px 10%; HEIGHT&#58; 7px
    &#125;
    
    .linkRoot &#123;
    	MARGIN-TOP&#58; 0px; DISPLAY&#58; block; PADDING-LEFT&#58; 7px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 11px; MARGIN-BOTTOM&#58; 0px; COLOR&#58; #333333; PADDING-TOP&#58; 5px; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; HEIGHT&#58; 18px; TEXT-DECORATION&#58; none
    &#125;
    .noFlyout &#123;
    &#125;
    .non-flyoutLinkRoot &#123;
    	MARGIN-TOP&#58; 0px; DISPLAY&#58; block; PADDING-LEFT&#58; 7px; FONT-WEIGHT&#58; bold; FONT-SIZE&#58; 11px; MARGIN-BOTTOM&#58; 0px; MARGIN-LEFT&#58; 0px; COLOR&#58; #990000; PADDING-TOP&#58; 3px; BORDER-BOTTOM&#58; #cccccc 1px solid; FONT-FAMILY&#58; Verdana,Arial,Helvetica,sans-serif; POSITION&#58; relative; HEIGHT&#58; 22px; TEXT-DECORATION&#58; none
    &#125;
    .non-flyoutLinkRoot&#58;hover &#123;
    	COLOR&#58; #ffffff; BORDER-BOTTOM&#58; #ffcccc 1px solid; BACKGROUND-COLOR&#58; #666666
    &#125;
    .flyoutDiv .flyoutDiv &#123;
    	BACKGROUND&#58; url&#40;/swa/i/spacer_grey.gif&#41;
    &#125;
    .flyoutest .flyoutest &#123;
    	BACKGROUND&#58; url&#40;/swa/i/spacer_grey.gif&#41;
    &#125;
    .flyoutBackground &#123;
    	PADDING-TOP&#58; 1px; BACKGROUND-COLOR&#58; #cccccc
    &#125;

  4. #4
    Interessierte/r
    Registriert seit
    17.02.2004
    Beiträge
    120
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Die Dateien "datus.js" und "mover.js" solltest du auch posten.

Ähnliche Themen

  1. IE/Firefox-Problem & Navigation
    Von Klara im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 17.06.2007, 21:11
  2. Problem bei der Verlinkung in der Navigation
    Von Angelhunter im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 23.05.2007, 09:07
  3. navigation mit banner in ie anders als im firefox
    Von PatSind im Forum HTML & CSS Forum
    Antworten: 0
    Letzter Beitrag: 11.03.2007, 16:08
  4. Problem mit Navigation
    Von Gastmann im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 01.05.2006, 21:55
  5. Problem mit Navigation
    Von Basti_rsl2 im Forum HTML & CSS Forum
    Antworten: 32
    Letzter Beitrag: 27.01.2006, 02:55

Stichworte

Berechtigungen

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