Pasi: Problem

Hi!

Ich hab da mal ne Frage. Und zwar hab ich in meinem Stylesheet folgendes stehen:

  a.box { color:#cdc9a5; text-decoration:none; }  
  a.box:hover { color:#fffacd; }  
  a.box span { visibility:hidden; position:fixed;  
    top:45%; left:20%; width:400pt; padding:5px; text-decoration:none; }  
  a.box:hover span, a.box:focus span, a.box:active span {  
    visibility:visible; border:4pt outset #fff; font-face:verdana; color:#ffffff; background:#1f1a17; }  
  
    <!--[if IE 5]>  
  a.box span { display:none; }  
  a.box:hover span { display:block; }  
<![endif]-->

Jetzt hab ich aber das Problem, dass mir das im Internet Explorer eine riesen Lücke erzeugt und wenn ich dann über den Text fahre, den ich verlinkt habe, mir das in der Seite eingebunden angezeigt wird und nicht sozusagen als "Overlay" (ich kenn die Fachausdrücke nicht). In Firefox ist es aber richtig, so wie ich es auch haben will. Es hat aber auch im Internet Explorer funktioniert, aber anscheinend habe ich irgendwas geändert und weiß nichtmehr, was es war.

Kann mir jemand sagen, wo der Fehler liegt?

Danke im Vorraus

LG Pasi

  1. 1. font-family, nicht font-face
    2. Ein Link oder ein komplettes Stück Code?

    1. Ok danke, funzt trotzdem mit font-face =D

      1. Ein Link oder ein komplettes Stück Code?

      komplettes Stück

        1. Ein Link oder ein komplettes Stück Code?
          komplettes Stück

        ?

        1. Öh, ich glaub, dann hab ich nich verstanden, was Du meinst =D

          Falls Du das meinst:
          <a class="box" href="#">...<span>:::</span></a>

          LG

          1. Öh, ich glaub, dann hab ich nich verstanden, was Du meinst =D

            Falls Du das meinst:
            <a class="box" href="#">...<span>:::</span></a>

            LG

            Nee :)

            Ich meine ein funktionierendes Stück Code, oder eben einen Link dorthin.

            1. Aah, jetzt^^

              Das ist die Seite

              <!--INC:"default-header.inc","01.12.2008 02:06:54"-->  
              <!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" xml:lang="de" lang="de">  
              <html>  
              <head>  
               <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
               <meta name="language" content="German, de, deutsch">  
               <meta name="author" content="Pascal Schneider">  
               <meta name="publisher" content="Pascal Schneider">  
               <meta name="copyright" content="Roland Hotz, Felix Hotz, Pascal Schneider">  
               <meta http-equiv="Content-Style-Type" content="text/css"  
               <link rel="shortcut icon" type="image/x-icon" href="media/img/design/favicon.ico">  
               <link rel="author" title="Impressum" href="impressum.html">  
               <link rel="stylesheet" type="text/css" href="css/design.css">  
              <!--/INC:"default-header.inc"-->  
                
              <title>Tournee</title>  
              </head>  
              <body>  
                
              <div id="topictext" style="position:absolute; top:124pt; left:200px;">  
              <img src="media/img/design/logo_small.gif" alt="" border="0"> Tournee  
              </div>  
                
              <div id="maintext" style="position:absolute; top:155pt; left:174pt;">  
               <table id="maintext" align="center" border="0" width="97%" cellpadding="6" cellspacing="4">  
                
               <tr align="center">  
                <td id="yeartext" bgcolor="#464646"><a name="2008">Jahr 2008</a></td>  
                <td id="topictext" bgcolor="#363636">Programm</td>  
                <td width="20pt"></td>  
               </tr>  
                
               <tr height="5px"></tr>  
                
               <tr align="center">  
                <td id="yeartext" bgcolor="#464646"><a name="2009">Jahr 2009</a></td>  
                <td id="topictext" bgcolor="#363636">Programm</td>  
               </tr>  
                
               <tr height="5px"></tr>  
                
               <tr align="center">  
                <a name="02022009"><td bgcolor="#464646"><br>02. - 04. Februar 2009<br><br>Rüsselsheim<br><br>Vorverkauf:<br><a class="box" href="#">Rüsselsheimer Echo<span><br><big>Rüsselsheimer Echo<br>Frankfurter Str. 2<br>65428 Rüsselsheim</big><br><br>Tel. 06142 - 828515<br><br>öffnungszeiten:<br>Mo. - Mi. 8:00-17:00 Uhr<br>Do. 8:00 - 18:00 Uhr<br>Fr. 8:00 - 16:00 Uhr<br>Sa. 8:00 - 11:00 Uhr<br><br></span></a><br><a class="box" href="#">Mainspitze Rüsselsheim<span><br><big>Mainspitze Rüsselsheim<br>Friedensplatz 12<br>65428 Rüsselsheim</big><br><br>Tel. 06142 - 8550<br><br>öffnungszeiten:<br>Mo. - Do. 9:00-17:00 Uhr<br>Fr. 9:00-16:00 Uhr<br>Sa. 9:00-12:00 Uhr<br><br></span></a><br><a class="box" href="#">Stadtbüro<span><br><big>Stadtbüro<br>Dicker Busch II<br>Virchowstr. 5-7<br>65428 Rüsselsheim</big><br><br>Tel. 06142 - 832900<br><br>öffnungszeiten:<br>Mo., Di,. Do. 7:30-18:00 Uhr<br>Sa. 7:00-16:00 Uhr<br><br></span></a><br><a class="box" href="#">Hotel-Restaurant Eichsfeld<span><br><big>Hotel-Restaurant Eichsfeld<br>Rheinstr. 7<br>65428 Rüsselsheim</big><br><br>Tel. 06142 - 91060<br><br>öffnungszeiten:<br>Mo. - Fr. 7:00-19:00 Uhr<br>Sa. 7:00-16:00 Uhr<br>So. 8:00-13:00 Uhr<br><br></span></a><br><br></td></a>  
                <td bgcolor="#363636">Siegfrieds Nibelungenentzündung</td>  
               </tr>  
                
              </table>  
              <P id="smalltext"><I><a name="hinweise">Hinweis: Für nähere Kontaktangaben fahren<br>Sie mit der Maus über die Vorverkaufsstellen<br>Hinweis: Karten für alle Vorstellungen sind<br>auch über den <a href="kontakt.html#vorverkauf">Vorverkaufsservice</a><br>erhältlich</I></a></P><P align="left" id="datetext">Zuletzt aktualisiert am <!--DATE-->30.11.2008, 15:35 Uhr<!--/DATE--></P>  
              <!--INC:"footer.inc","01.12.2008 01:27:18"-->  
              <script type="text/javascript">  
              function UP () {  
                window.scrollTo(0, 0);  
              }  
              document.write('<br><div align="center"><a href="javascript:UP()"><img src="media/img/design/up.gif" alt="nach oben" border="0"></a></div>')  
              </script>  
              <br><br>  
              <!--/INC:"footer.inc"-->  
              </div>  
                
              </body>  
              </html>
              

              und der CSS kram

                body {  
                  background-image:url(../media/img/design/headmotto.gif);  
                  background-repeat:repeat-x;  
                  background-attachment:unfixed; padding:0px;  
                  background-color:#1f1a17;  
                }  
                
                #nav {  
                  font: normal 14pt verdana; color:#ffffff;  
                }  
                
                #topictext {  
                  font: normal 14pt verdana; color:#fffacd;  
                }  
                
                #maintext {  
                  font: normal 12pt verdana; color:#ffffff;  
                }  
                
                #smalltext {  
                  font: normal 10pt verdana; color:#ffffff;  
                }  
                
                #yeartext {  
                  font: normal 14pt verdana; color:#ff0000;  
                }  
                
                #monthtext {  
                  font: normal 12pt verdana; color:#cdc9a5;  
                }  
                
                #datetext {  
                  font: normal 10pt verdana; color:#464646;  
                }  
                
                #onlinebookingtext {  
                  font: normal 10pt verdana; color:#000000;  
                }  
                
                #availabletext {  
                  font: italic 12pt verdana; color:#4cff00;  
                }  
                
                #scarcetext {  
                  font: italic 12pt verdana; color:#ffd800;  
                }  
                
                #soldtext {  
                  font: italic 12pt verdana; color:#ff0000;  
                }  
                
                #marqueetext {  
                  font: normal 18pt verdana; color:#ff0000;  
                }  
                
                a:link {  
                  color:#cdc9a5; text-decoration:none;  
                }  
                
                a:visited {  
                  color:#cdc9a5; text-decoration:none;  
                }  
                
                a:hover {  
                  color:#fffacd; text-decoration:none;  
                }  
                
                a:focus {  
                  color:#cdc9a5; text-decoration:none;  
                }  
                
                ul#Navigation {  
                  width: 130pt;  
                  margin: 0pt; padding: 0pt;  
                  border: 0px solid black;  
                  background-color: #1f1a17;  
                }  
                * html ul#Navigation {  /* Korrekturen fuer IE 5.x */  
                  width: 0em;  
                  w\idth: 0em;  
                  padding-left: 0;  
                  padd\ing-left: 0em;  
                }  
                ul#Navigation li {  
                  list-style: none;  
                  margin: 0pt; padding: 2pt;  
                }  
                
                ul#Navigation a {  
                  display:block;  
                  padding: 3pt;  
                  text-decoration: none; font-weight: normal;  
                  border: 0px solid #1f1a17;  
                  border-left-color: #1f1a17; border-top-color: #1f1a17;  
                  color: #fffacd; background-color: #1f1a17;  
                }  
                * html ul#Navigation a {  /* Breitenangaben nur fuer IE */  
                  width: 100%;  
                  w\idth: 130pt;  
                }  
                ul#Navigation a:hover {  
                  border-left-color: #1f1a17; border-top-color: #1f1a17;  
                  color: #fffacd; background-color: #464646;  
                }  
                
                a.box { color:#cdc9a5; text-decoration:none; }  
                a.box:hover { color:#fffacd; }  
                a.box span { visibility:hidden; position:fixed;  
                  top:45%; left:20%; width:400pt; padding:5px; text-decoration:none; }  
                a.box:hover span, a.box:focus span, a.box:active span {  
                  visibility:visible; border:4pt outset #fff; font-family:verdana; color:#ffffff; background:#1f1a17; }  
                
                  <!--[if IE 5]>  
                a.box span { display:none; }  
                a.box:hover span { display:block; }  
              <![endif]-->
              
              1. Hi,

                und der CSS kram
                [...]
                    <!--[if IE 5]>
                  a.box span { display:none; }
                  a.box:hover span { display:block; }
                <![endif]-->[/code]

                Damit meinst du jetzt aber nicht, dass du die CCs in die externe Stylesheet-Datei mit reingeschrieben hast - oder ...?

                Und waehle doch das naechste Mal bitte einen vernuenftigen Thread-Titel - einen, der dein Problem knapp umreisst, und nicht nur mitteilt, *dass* du ein Problem hast.

                MfG ChrisB

                --
                „This is the author's opinion, not necessarily that of Starbucks.“
                1. Hi,

                  und der CSS kram
                  [...]
                      <!--[if IE 5]>
                    a.box span { display:none; }
                    a.box:hover span { display:block; }
                  <![endif]-->[/code]

                  Damit meinst du jetzt aber nicht, dass du die CCs in die externe Stylesheet-Datei mit reingeschrieben hast - oder ...?

                  doch mein ich, wieso?

                  Und waehle doch das naechste Mal bitte einen vernuenftigen Thread-Titel - einen, der dein Problem knapp umreisst, und nicht nur mitteilt, *dass* du ein Problem hast.

                  Das Problem ist nur, dass ich keinen Plan hab, was ich da für nen Titel nehmen soll weil ich keine Ahnung hab, wie mein Problem heißt.

                  LG Pasi

                  1. Hi,

                    Damit meinst du jetzt aber nicht, dass du die CCs in die externe Stylesheet-Datei mit reingeschrieben hast - oder ...?

                    doch mein ich, wieso?

                    Und was glaubst du, haben HTML-Kommentare dort zu suchen?

                    Das Problem ist nur, dass ich keinen Plan hab, was ich da für nen Titel nehmen soll weil ich keine Ahnung hab, wie mein Problem heißt.

                    Dann ueberlege das naechste Mal bitte etwas grunedlicher, wie es sich in Kurzform beschreiben liesse.

                    MfG ChrisB

                    --
                    „This is the author's opinion, not necessarily that of Starbucks.“
                    1. Hi,

                      Damit meinst du jetzt aber nicht, dass du die CCs in die externe Stylesheet-Datei mit reingeschrieben hast - oder ...?

                      doch mein ich, wieso?

                      Und was glaubst du, haben HTML-Kommentare dort zu suchen?

                      Oh, ich schätze mal, dass du mir damit sagen willst, dass es deshalb nich "funktioniert"?
                      Es ist nur so: Ich hatte das vorher auch schon so und es hat funktioniert. Dann habe ich irgendwas verändert, frag mich nicht, was das war, sodass es jetzt nichtmehr "funktioniert".

                      Das Problem ist nur, dass ich keinen Plan hab, was ich da für nen Titel nehmen soll weil ich keine Ahnung hab, wie mein Problem heißt.

                      Dann ueberlege das naechste Mal bitte etwas grunedlicher, wie es sich in Kurzform beschreiben liesse.

                      Ja ist ja ok.

                      LG

                      1. Hi

                        Oh, ich schätze mal, dass du mir damit sagen willst, dass es deshalb nich "funktioniert"?

                        Ja, das will er

                        Es ist nur so: Ich hatte das vorher auch schon so und es hat funktioniert. Dann habe ich irgendwas verändert, frag mich nicht, was das war, sodass es jetzt nichtmehr "funktioniert".

                        Wahrscheinlich hattest du den Code direkt in der HTML-Datei, dann funktioniert es auch. Wenn du den Code aber in eine externe CSS-Datei umbaust, parst noch nicht einmal der IE deine HTML-Kommentare - denn das sind Conditional Comments letztendlich.
                        nimm eine zweite Css-Datei für alle IE-Styles, binde diese dann innerhalb von CCs ein.

                        mfg
                        Felix

                        1. @@Felix:

                          nimm eine zweite Css-Datei für alle IE-Styles, binde diese dann innerhalb von CCs ein.

                          Lass deine Regeln für IEs dort, wo sie sind, aber verwende http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks.

                          Und warum willst du noch den IE 5 unterstützen?

                          Live long and prosper,
                          Gunnar

                          --
                          Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
                          1. Lass deine Regeln für IEs dort, wo sie sind, aber verwende http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks.

                            religionskrieg ;)

                            hacks waren noch nie eine gute lösung, da sie bewusst bugs ausnutzen, die unter bestimmten umständen unkontrollierbar reagieren können

                            conditional comments sind so ziemlich das einzige, was im ie zuverlässig funktioniert :D

                            1. @@suit_:

                              religionskrieg ;)

                              Bin konvertiert. ;-)

                              hacks waren noch nie eine gute lösung

                              ACK. Aber vielleicht doch die bessere.

                              Bei 'p\roperty' biegen sich auch meine Fußnägel, aber gegen '* html' ist doch eigentlich nichts zu sagen.

                              conditional comments sind so ziemlich das einzige, was im ie zuverlässig funktioniert :D

                              '* html' funktioniert auch. Die Notwendigkeit, IE 5.0, 5.5, 6.0 auseinanderzuhalten sehe ich nicht; wer noch mit einem 5er unterwegs ist, ist selber schuld. Dito IE auf Macs.

                              Live long and prosper,
                              Gunnar

                              --
                              Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
                              1. '* html' funktioniert auch. Die Notwendigkeit, IE 5.0, 5.5, 6.0 auseinanderzuhalten sehe ich nicht; wer noch mit einem 5er unterwegs ist, ist selber schuld. Dito IE auf Macs.

                                ja, aber du kannst eben nie sicher sein, dass nicht auch ein moderner browser aus irgendwelchen unerfindlichen gründen auf den selben bug reinfällt

                                bzw was ist mit in xml eingebetten xhtml-dokumenten?

                                da wäre * html doch ein gültiger selektor?

                                  
                                <foo>  
                                  <bar>  
                                    <html />  
                                  </bar>  
                                </foo>
                                

                                oder ist das wunschdenken? ;)

                        2. Hi,

                          Wahrscheinlich hattest du den Code direkt in der HTML-Datei, dann funktioniert es auch. Wenn du den Code aber in eine externe CSS-Datei umbaust, parst noch nicht einmal der IE deine HTML-Kommentare - denn das sind Conditional Comments letztendlich.
                          nimm eine zweite Css-Datei für alle IE-Styles, binde diese dann innerhalb von CCs ein.

                          Also es hat auch funktioniert, als ich es nicht in der HTML-Datei hatte. Ich weiß nur nicht, was ich verändert habe.

                          Also auf welche Weise soll ich es denn jetzt machen? Und wie geht diese Weise? =D

                          Ich hab einfach keine Ahnung davon, deshalb bin ich gerade auch etwas überfragt, was diese Hacks sind.

                          LG Pasi

                          1. Ich hab einfach keine Ahnung davon, deshalb bin ich gerade auch etwas überfragt, was diese Hacks sind.

                            das ist gut, bleib bei conditional comments - diese sind für normale menschen einfacher verständlich und imho kontrollierbarer

                            mit hacks ist in diesem kontext das gezielte ausnutzen von bugs oder falscher interpretation von css-informationen gemeint, wenn man nicht weiß was man tut: finger weg ;)

                  2. Hi,

                    Das Problem ist nur, dass ich keinen Plan hab, was ich da für nen Titel nehmen soll weil ich keine Ahnung hab, wie mein Problem heißt.

                    Ich schon. Aber wenn ich das jetzt hier schreibe, ist das schlechtes Karma. Also lass ich es und verweise dich auf Felix' Post.

                    --
                    "Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
                          - T. Pratchett
  2. Ich hab da mal ne Frage.

    und mal als Tipp, wenn du einen aussagekräftigeren Titel wählst, gucken sich vielleicht mehr Leute den Thread an.
    Ich wollte den Thread grad' ausblenden, aber ich dachte ich schreibe dir diesen netten Tipp noch.

    Struppi.