HP funzt nur auf Firefox nicht auf IE :(

MrDeluxe · 25 September 2007

Seite heißt: www.electrikk.de

kleine demo:

so sollte es normalerweise aussehen... keine kommentare erwünscht

Firefox

so sollte es nicht aussehen:
IE7:

Code:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.electrikk.de</title>
<style type="text/css" media="all">
#nav {
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
    text-decoration: none;
    }

    #nav li { /*float the main list items*/
    float: left;
    display: block;
    padding-right: 15px;
    background-color: #000000;
    border-top-color: #990000;
    border-right-color: #990000;
    border-bottom-color: #990000;
    border-left-color: #990000;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    }

    #nav li ul {
        display: none;
    }

    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
    position: absolute;
    top: 50px;
    left: 10px;
    padding-top: 10px;
    height: 28px;
    width: 639px;
    }

    #nav li a {
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    height: 35px;
    width: 110px;
    border: 2px solid #990000;
    padding: 5px;
    float: left;
    clear: none;
    }

    #nav li.on a {
    color: #FFFFFF;
    border: 2px solid #990000;
    }

    #nav li.on ul a, #nav li.off ul a {
    float: none; /*ie doesn't inherit the float*/
    border: 0;
    color: #FFFFFF;
    width: auto;
    margin-right: 15px;
    }

    #nav li.on ul {
        display: block;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
                }

    #nav li.off a:hover, #nav li:hover a {
    color: #FFFFFF;
    background-color: #990000;
    }
p {margin-left:0px;}
<!--
#apDiv1 {
    position:absolute;
    left:178px;
    top:323px;
    width:446px;
    height:355px;
    z-index:1;
}
.Stil1 {
    color: #000000;
    font-size: larger;
}
body,td,th {
    background-image: url(../Background/backgroundblitzschwarz.gif);
}
body {
    background-color: #000000;
    background-image: url(../Background/backgroundblitzschwarz.gif);
}
#apDiv2 {
    position:absolute;
    left:-49px;
    top:246px;
    width:174px;
    height:123px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:43px;
    top:43px;
    width:33px;
    height:47px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:33px;
    top:49px;
    width:65px;
    height:36px;
    z-index:3;
}
#apDiv5 {
    position:absolute;
    left:95px;
    top:202px;
    width:63px;
    height:53px;
    z-index:3;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #0000FF;
}
a:active {
    text-decoration: none;
    color: #00CCFF;
}
a {
    font-family: "Embryonic Outside";
}
#apDiv6 {
    position:absolute;
    left:2px;
    top:221px;
    width:163px;
    height:173px;
    z-index:4;
}
.Stil5 {color: #FFFFFF}
.Stil9 {color: #990066}
-->
</style>
<script src="../SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(objId); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
  }
}
function MM_effectAppearFade(targetElement, duration, from, to, toggle)
{
    Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>
<body>
<ul id="nav">
    <li class="off">
      <div align="center"><a href="#">Test1</a>
         <ul>
            <li><a href="#">Test13</a></li>
            <li><a href="#">Test14</a></li>
            <li><a href="#">Test15</a></li>
            <li><a href="#">Test16</a></li>
            <li><a href="#">Test17</a></li>
        </ul>
      </div>
    </li>
<li class="off">
  <div align="center"><a href="#">Test2</a>
    <ul>
      <li><a href="#">Test18</a></li>
      <li><a href="#">Test19</a></li>
      <li><a href="#">Test20</a></li>
      <li><a href="#">Test21</a></li>
    </ul>
  </div>
</li>
    <li class="on">
      <div align="center"><a href="#">Test3</a>
          <ul>
              <li><a href="google.html" target="Fenster">Test22</a></li>
            <li><a href="#">Test23</a></li>
            <li><a href="#">Test24</a></li>
            <li><a href="#">Test25</a></li>
            <li></li>
        </ul>
      </div>
    </li>
<li class="off">
  <div align="center"><a href="#">Test4</a>
    <ul>
      <li><a href="#">Test27</a></li>
      <li><a href="#">Test28</a></li>
      <li><a href="#">Test29</a></li>
      <li><a href="#">Test30</a></li>
      <li><a href="#">Test31</a></li>
    </ul>
  </div>
</li>
<li class="off">
  <div align="center"><a href="#">Test5</a>
    <ul>
      <li><a href="#">Test32</a></li>
      <li><a href="#">Test31</a></li>
      <li><a href="#">Test33</a></li>
      <li><a href="#">Test34</a></li>
      <li><a href="#">Test35</a></li>
    </ul>
  </div>
</li>
</ul>
<div class="Stil1" id="apDiv1">
  <iframe style="height:335px;width:425px;"
    src= "ComingSoon.html" name="Fenster" width="425" height="325"
        marginheight="10" marginwidth="10" align="right">
  <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen</p>
</iframe>

 
</div>

<div id="apDiv5">
  <div align="center"><a href="google.html" target="Fenster" class="Stil9">Home</a></div>
</div>
<p>
  <script language="JavaScript" src="ieHover.js"></script>
  </head>
</p>
<p>&nbsp;</p>
<p align="center">
  <script src="http://layer-ads.de/la-43951.js" type="text/javascript"></script>
</p>
<p align="right">&nbsp;</p>
<p align="right">&nbsp;</p>
<p align="right">&nbsp;</p>
<p align="center"><span class="Stil1"><img src="../Pictures/turntable2.gif" alt="Turntable" width="850" height="667" /></span></p>
<form id="form1" name="form1" method="post" action="">
  <label></label>
</form>
<p>&nbsp;</p>
</body>
<script src="http://layer-ads.de/la-43951.js" type="text/javascript"></script>
</html>

FRAGE: Wie bekomme ich es beim IE7 so wie beim Firefox hin?

WhispR · 26 September 2007

bei sovil fehlern würd ichs nochmal aufbauen, und bei jedem schritt auch in den ie schauen, und falls was nicht stimmt gleich wegmachen.

Wenn dus auf die Hau-Ruck Methode versuchst, wünsch ich dir viel spaß ;-)

Körnerbrötchen · 26 September 2007

Ochnee... doch nicht neu machen. Zumindest nicht ganz.
Bau für den IE einfach nen eigenen Stylesheet.

HTML:

  <!--[if IE]>
    <style type="text/css">@import url(styleIE.css);</style>
  <![endif]-->

Das fügst du einfach in den Quellcode ein und baust dann unter dem Dateinamen styleIE.css einen eigenen Stylesheet für den IE.

MrDeluxe · 26 September 2007

so da ich mit Dreamweaver arbeite und ich vllt. ein bisschen zu verwöhnt bin wegen des leichten arbeitens fällt mir das mit dem coden hier schon ein wenig schwer...

ich habs so gemacht:

Code:

:.:anderes Zeugs:.:
}
.Stil5 {color: #FFFFFF}
.Stil9 {color: #990066}
 <!--[if IE]> <style type="text/css">@import url(styleIE.css);</style> <![endif]-->
 
-->
</style>

so und wie erstelle ich jetzt das korrekte css? ich hab die Funktion ein neues CSS Dokument zu erstellen, dann kommt das hier:

Code:

@charset "utf-8";
/* CSS Document */

bloß wie prüf ich denn ob es nun geklappt hat?

Problem ist... wenn ich Vorschau im Browser mache mit IE dann wird es tadelos angezeigt, lad ich es aber hoch kommt nur Mist... bin voll am verzweifeln

papillona · 26 September 2007

Problem ist... wenn ich Vorschau im Browser mache mit IE dann wird es tadelos angezeigt, lad ich es aber hoch kommt nur Mist... bin voll am verzweifeln

Ich hatte das mal bei Bildern, dass sie lokal richtig angezeigt wurden, aber dann nach dem hochladen nicht mehr. Letzlich lag es daran, dass der wincommander die Endungen aus Klein- in Großbuchstaben umgewandelt hat. Vielleicht macht da dein FTP-Programm auch so komische Sachen, dass es dir da was im Quellcode verändert... Viel Erfolg bei der Fehlersuche. ;-)

LG Papillona

MrDeluxe · 26 September 2007

ich hab diesen hier immernoch nicht ganz verstanden... wo genau muss ich den hin machen? wie erstelle ich eine CSS Datei für IE



Körnerbrötchen · 27 September 2007

Okay... so langsam muss ich dir leider sagen, dass man mit einem Programm wie Dreamweaver eben nicht alles kann. Am besten schaust du dich mal nach einem Programm wie Notepad++ um. Am Anfang tuts aber auch der bloße Editor von Windows (aber wirklich nur für den Anfang!).
Damit öffnest du die Seite und fügst direkt nach dem <head>-Tag meinen geposteten Code ein. Wenn du das gemacht hast klaubst du dir folgendes:

HTML:

#nav {
        margin: 0;
        padding: 0;
    }

    #nav li.on ul, #nav li.off ul {
        margin: 0;
        padding: 0;
    }

    #nav a {
    text-decoration: none;
    }

    #nav li { /*float the main list items*/
    float: left;
    display: block;
    padding-right: 15px;
    background-color: #000000;
    border-top-color: #990000;
    border-right-color: #990000;
    border-bottom-color: #990000;
    border-left-color: #990000;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    }

    #nav li ul {
        display: none;
    }

    #nav li.off ul, #nav li.on ul { /*put the subnav below*/
    position: absolute;
    top: 50px;
    left: 10px;
    padding-top: 10px;
    height: 28px;
    width: 639px;
    }

    #nav li a {
    color: #FFFFFF;
    font-weight: bold;
    display: block;
    height: 35px;
    width: 110px;
    border: 2px solid #990000;
    padding: 5px;
    float: left;
    clear: none;
    }

    #nav li.on a {
    color: #FFFFFF;
    border: 2px solid #990000;
    }

    #nav li.on ul a, #nav li.off ul a {
    float: none; /*ie doesn't inherit the float*/
    border: 0;
    color: #FFFFFF;
    width: auto;
    margin-right: 15px;
    }

    #nav li.on ul {
        display: block;
    }

    #nav li.off:hover ul {
        display: block;
        z-index: 6000;
                }

    #nav li.off a:hover, #nav li:hover a {
    color: #FFFFFF;
    background-color: #990000;
    }
p {margin-left:0px;}
<!--
#apDiv1 {
    position:absolute;
    left:178px;
    top:323px;
    width:446px;
    height:355px;
    z-index:1;
}
.Stil1 {
    color: #000000;
    font-size: larger;
}
body,td,th {
    background-image: url(../Background/backgroundblitzschwarz.gif);
}
body {
    background-color: #000000;
    background-image: url(../Background/backgroundblitzschwarz.gif);
}
#apDiv2 {
    position:absolute;
    left:-49px;
    top:246px;
    width:174px;
    height:123px;
    z-index:2;
}
#apDiv3 {
    position:absolute;
    left:43px;
    top:43px;
    width:33px;
    height:47px;
    z-index:3;
}
#apDiv4 {
    position:absolute;
    left:33px;
    top:49px;
    width:65px;
    height:36px;
    z-index:3;
}
#apDiv5 {
    position:absolute;
    left:95px;
    top:202px;
    width:63px;
    height:53px;
    z-index:3;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #000000;
}
a:hover {
    text-decoration: none;
    color: #0000FF;
}
a:active {
    text-decoration: none;
    color: #00CCFF;
}
a {
    font-family: "Embryonic Outside";
}
#apDiv6 {
    position:absolute;
    left:2px;
    top:221px;
    width:163px;
    height:173px;
    z-index:4;
}
.Stil5 {color: #FFFFFF}
.Stil9 {color: #990066}

Und öffnest danach ein neues Dokument im Editor. Dort fügst du dann den obigen Code ein speicherst das ganze als styleIE.css und öffnest deine Homepage dann im Internet-Explorer. Dann fängt das große Rätsel-Raten an. Du musst den obigen Code so verändern, dass die Website im IE korrekt dargestellt wird. Und das nennt man dann echte Websitegestaltung...

HP funzt nur auf Firefox nicht auf IE :(

MrDeluxe

Neues Mitglied

WhispR

Mitglied

Körnerbrötchen

Aktives Mitglied

MrDeluxe

Neues Mitglied

papillona

Neues Mitglied

MrDeluxe

Neues Mitglied

Körnerbrötchen

Aktives Mitglied

Neueste Beiträge