Problem mit Navigation Firefox vs. IE

Calimero78

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...!

Ronald

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

Calimero78

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.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>
<head>
<meta http-equiv="Content-Language" content="de">


<title>- .:: Welcome ² eDrinks ::.</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('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')">
<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>[url='index.html']Drinks[/url]

      <DIV class=setOrigin>
      <DIV class=flyoutDiv onmouseover=flyoutOver(this,1,event); onclick=event.cancelBubble=true; onmouseout=flyoutOut(1);>
      <DIV class=flyoutBackground><A class=LinkInFlyoutBold title="">Drinks</A>


      </DIV></DIV></DIV></DIV></SPAN></DIV>


      <DIV class=one>
	  <SPAN class=flyoutRoot>
      <DIV class=hiddenFlyout>
	  [url='index.html']Die Zutaten[/url]


	  <DIV class=setOrigin>
      <DIV class=flyoutDiv onmouseover=flyoutOver(this,1,event);
      onclick=event.cancelBubble=true; onmouseout=flyoutOut(1);>
      <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>[url='php/lexikon.php']Mixology[/url]


      </DIV></SPAN></DIV></DIV>




[img]js/s.gif[/img]
    </TD>
    </tr>
              <td>[img]images/arrow.jpg[/img][b]<font color="#2271A0">News
                / Events</font>[/b]</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
 


                        [url='#']&gt;&gt; mehr[/url]</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...

 


                        [url='#']&gt;&gt; mehr[/url]</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

 


                        [url='#']&gt;&gt; mehr[/url]</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



                      


                        [url='']&gt;&gt; mehr[/url]</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>

Alles anzeigen

und das von der CSS-Datei

Code

.setOrigin {
	Z-INDEX: 2; LEFT: 0px; POSITION: relative; TOP: 0px
}
.flyoutDiv {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 240px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #cccccc
}
.flyoutest {
	BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 40px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; BACKGROUND-COLOR: #cccccc
}
.one .flyoutDiv {
	LEFT: 151px; TOP: -21px
}


.one2 .flyoutest {
	LEFT: 151px; TOP: -21px
}
.two .flyoutDiv {
	LEFT: 234px; TOP: -15px
}


.two2 .flyoutest {
	LEFT: 234px; TOP: -15px
}




.flyoutBold .flyoutDiv {
	TOP: -20px
}


.flyoutBoldt .flyoutest {
	TOP: -20px
}


.hiddenFlyout .flyoutDiv {
	DISPLAY: none
}


.hiddenFlyout .flyoutest {
    DISPLAY: none
}




.flyoutLink {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkBold {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkRoot {
	BACKGROUND-POSITION: 230px 50%; MARGIN-TOP: 0px; DISPLAY: block; MARGIN-BOTTOM: 0px; BACKGROUND-REPEAT: no-repeat; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.flyoutLinkRoot {
	BACKGROUND-POSITION: 147px 50%
}
.flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.hiddenFlyout .flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.hiddenFlyoutt .flyoutLinkRoot {
	PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-LEFT: 0px; COLOR: #FFFFFF; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; HEIGHT: 22px
}
.flyoutLink {
	PADDING-LEFT: 7px; FONT-SIZE: 10px
}
.flyoutLinkBold {
	PADDING-LEFT: 7px; FONT-SIZE: 10px
}
.flyoutLink {
	PADDING-TOP: 1px; HEIGHT: 15px
}
.flyoutLinkBold {
	FONT-WEIGHT: bold; PADDING-TOP: 3px; HEIGHT: 19px
}
.hiddenFlyout .flyoutLink:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.hiddenFlyout .flyoutLinkBold:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.hiddenFlyout .flyoutLinkRoot:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.visibleFlyout .flyoutLink {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.visibleFlyout .flyoutLinkBold {
	coLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.visibleFlyout .flyoutLinkRoot {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.hiddenFlyout .flyoutLink {
	COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.hiddenFlyout .flyoutLinkBold {
	COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.flyoutLinkBold {
	FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.hiddenFlyout .flyoutLinkBold {
	FONT-WEIGHT: bold; COLOR: #000000; BACKGROUND-COLOR: #cccccc
}
.moreLink {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #000000; PADDING-TOP: 3px; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; HEIGHT: 20px; TEXT-DECORATION: none
}
.moreLink:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.linkInFlyout {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 3px; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.linkInFlyoutBold {
	DISPLAY: block; PADDING-LEFT: 6px; FONT-SIZE: 10px; MARGIN-BOTTOM: 0px; PADDING-BOTTOM: 3px; COLOR: #000000; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; TEXT-DECORATION: none
}
.linkInFlyout {
	MARGIN-TOP: 2px; MARGIN-BOTTOM: 2px; LINE-HEIGHT: 80%
}
.one .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.one2 .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.two .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}


.two2 .linkInFlyout:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #666666
}
.linkInFlyoutBold {
	FONT-WEIGHT: bold
}
.linkInFlyoutBold:hover {
	COLOR: #ffffff; BACKGROUND-COLOR: #A2A2A2
}
.bar {
	BORDER-TOP: #666666 1px solid; WIDTH: 100%
}
.bar2 {
	BORDER-TOP: #666666 1px solid; WIDTH: 100%
}
.halfBar {
	MARGIN: 0px 10%; HEIGHT: 7px
}
.halfBar2 {
	MARGIN: 0px 10%; HEIGHT: 7px
}


.linkRoot {
	MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; COLOR: #333333; PADDING-TOP: 5px; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; HEIGHT: 18px; TEXT-DECORATION: none
}
.noFlyout {
}
.non-flyoutLinkRoot {
	MARGIN-TOP: 0px; DISPLAY: block; PADDING-LEFT: 7px; FONT-WEIGHT: bold; FONT-SIZE: 11px; MARGIN-BOTTOM: 0px; MARGIN-LEFT: 0px; COLOR: #990000; PADDING-TOP: 3px; BORDER-BOTTOM: #cccccc 1px solid; FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif; POSITION: relative; HEIGHT: 22px; TEXT-DECORATION: none
}
.non-flyoutLinkRoot:hover {
	COLOR: #ffffff; BORDER-BOTTOM: #ffcccc 1px solid; BACKGROUND-COLOR: #666666
}
.flyoutDiv .flyoutDiv {
	BACKGROUND: url(/swa/i/spacer_grey.gif)
}
.flyoutest .flyoutest {
	BACKGROUND: url(/swa/i/spacer_grey.gif)
}
.flyoutBackground {
	PADDING-TOP: 1px; BACKGROUND-COLOR: #cccccc
}

Alles anzeigen

stefan999

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

Tags