|
 |
  |
| Autor |
Nachricht |
Calimero78
Neuer [User]
Anmeldung: 08.03.05
Beiträge: 1
|
 Verfasst am: 08.03.2005, 13:16 Titel: 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 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!!
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...!
PS: Ich habs schon mit z-index im CSS bzw. im Quelltext probiert kein Erfolg,
ich hab es mit ALLOWTRANSPARENCY="true" ebenfalls kein Erfolg!! l
| Code: | <!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 src="images/toplogo+.jpg" width="342" height="87"></td>
<td width="34" rowspan="2"><img src="images/topmidspace.jpg" width="34" height="87"></td>
<td background="images/topbg.jpg"><img src="images/topbg.jpg" width="1" height="54"></td>
</tr>
<tr>
<td background="images/topnavbg.jpg">
<a href="Frame2.htm" target="I2">
<img src="images/btn_home.jpg" name="btn_home" width="55" height="33" border="0" id="btn_home" onMouseOver="MM_swapImage('btn_home','','images/btn_home_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
<img src="images/navspacer.jpg" width="1" height="33">
<a href="/Temp4/php/gbooke/gb.php" target="I2">
<img src="images/btn_about.jpg" name="btn_about" width="58" height="33" border="0" id="btn_about" onMouseOver="MM_swapImage('btn_about','','images/btn_about_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"></a>
<img src="images/navspacer.jpg" width="1" height="33">
<img src="images/btn_products.jpg" name="btn_contact" width="79" height="33" id="btn_contact" onMouseOver="MM_swapImage('btn_contact','','images/btn_products_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="images/navspacer.jpg" width="1" height="33">
<img src="images/btn_contact.jpg" name="btn_products" width="67" height="33" id="btn_products" onMouseOver="MM_swapImage('btn_products','','images/btn_contact_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="images/navspacer.jpg" width="1" height="33">
<img src="images/btn_support.jpg" name="btn_support" width="72" height="33" id="btn_support" onMouseOver="MM_swapImage('btn_support','','images/btn_support_dn.jpg',1)" onMouseOut="MM_swapImgRestore()">
<img src="images/navspacer.jpg" width="1" height="33">
<!-- <img src="images/btn_news.jpg" name="btn_news" width="50" height="33" id="btn_news" onMouseOver="MM_swapImage('btn_news','','images/btn_news_dn.jpg',1)" onMouseOut="MM_swapImgRestore()"> -->
</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 src="images/basebg2.jpg" width="1" height="9"></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">
<!-- Navigation -->
<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><A class=flyoutLinkRoot
onmouseover=autoOpenOver(this.parentNode,1);
onclick="toggle(this.parentNode,1);event.cancelBubble=true;return false;"
onmouseout=autoOpenOut(1); href="index.html">Drinks</A>
<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>
<A class=flyoutLinkRoot
onmouseover=autoOpenOver(this.parentNode,1);
onclick="toggle(this.parentNode,1);event.cancelBubble=true;return false;"
onmouseout=autoOpenOut(1); href="index.html">Die Zutaten</A>
<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><A class=flyoutLinkRoot
href="php/lexikon.php" target="I2">Mixology</A>
</DIV></SPAN></DIV></DIV>
<p><IMG height=1 alt="" src="js/s.gif" width=154>
</TD>
</tr>
<td><img src="images/arrow.jpg" width="20" height="10"><b><font color="#2271A0">News
/ Events</font></b></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="1" height="1">
<table width="229" border="0" cellspacing="0" cellpadding="0" height="307">
<tr>
<td width="20" rowspan="3" height="72"><img src="images/spacer.gif" width="20" height="1"></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
<br>
Easy Rider<br> <br>
<a href="#" class="sidelinks2">>> mehr</a></td>
</tr>
<tr>
<td rowspan="3" height="85" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
<td height="25" width="209"><br>
<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...
<br> <br>
<a href="#" class="sidelinks2">>> mehr</a></td>
</tr>
<tr>
<td rowspan="3" height="73" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
<td height="25" width="209"><br>
<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
<br> <br>
<a href="#" class="sidelinks2">>> mehr</a></td>
</tr>
<tr>
<td rowspan="3" height="77" width="20"><img src="images/spacer.gif" width="20" height="1"></td>
<td height="17" width="209"><br>
<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<br>[zensiert] on the Beach
<br>
<br>
<a href="" onClick="parent.I2.location='php/einzelanzeige.php?uebergabe=Campari Orange';return false;"onmouseover="on2();" onmouseout="off2()">>> mehr</a></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 src="images/navbasebg.jpg" width="1" height="29"></td>
</tr>
<tr>
<td width="30"> </td>
<td>
<!-- Anfang Großer Mittlerer Frame -->
<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 hier der Quelltext fürs CSS
| 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
} |
|
|
| Nach oben |
|
 |
JörgK
Beliebter [Mod]
Anmeldung: 09.04.04
Beiträge: 376
|
| Verfasst am: 09.03.2005, 17:02 Titel: |
|
|
Mit der HTML-Seite und der ersten CSS-Datei alleine lässt sich das Problem nicht reproduzieren. Kannst du den Inhalt der zweiten CSS-Datei css/datus.css hier auch noch posten?
_________________
 Webnotizen - Forum für XHTML, CSS und SEO - Bookmarks
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
