4. CSS Probleme mit dem IE

CSS Probleme mit dem IE

  • T

    Moin moin

    ich versuch mich seit langem mal wieder mit HTML und CSS (und langsam wei ich auch wieder wieso ich aufgehört hab)

    ich hab folgendes vor. Mein Menue befindet sich am Kopf der Seite, es besteht im wesentlichen aus 7 Kugeln, die wie eine art Torbogen halbrund aufgereit sind. In der mitte drunter befindet sich ein "Schild" auf dem dann die Buttenüberschriften erscheinen, sobald man über einen Butten kommt. Das ganze dann noch kombiniert mit einem mousover efekt für den Butten selber.

    Das ganze hab ich eigentlich soweit alles hinbekommen, nur das es bisher nur auf Fierfox und Operea gescheit läuft. der IE macht da irgendwie komische sachen.

    1. beim a:over wird bei width und height eine mischung aus a:hover und a:hover span verwendet, was bei meiner momentanen bildgestaltung etwas verwirrend ist, da ein zugrosses bildstück kopiert wird, und somit auch andere buttons teilweise überzeichnet werden. Gibts dafür irgend eine lösung, oder muss ich die Bilder für den hover entsprechend vorbereitet, das der zu grosse bildausschnit keine probleme mehr macht?

    <HTML>
  <HEAD>
    <TITLE>Main</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <style type="text/css">
    <!--
b,p,i,a,all { color:#000000; font-family:Arial; font-size:12pt; font-weight:400; width:540; text-align:justify; }
h1  { color:#000000; font-family:Arial; font-size:22pt; font-weight:800; width:540; text-align:justify; }
h2  { color:#000000; font-family:Arial; font-size:20pt; font-weight:800; width:540; text-align:justify; }
h3  { color:#000000; font-family:Arial; font-size:18pt; font-weight:800; width:540; text-align:justify; }
h4  { color:#000000; font-family:Arial; font-size:16pt; font-weight:800; width:540; text-align:justify; }
h5  { color:#000000; font-family:Arial; font-size:14pt; font-weight:800; width:540; text-align:justify; }
h6  { color:#000000; font-family:Arial; font-size:12pt; font-weight:800; width:540; text-align:justify; }

/* ---------- Ende Text ---------- */
img.image{ display: none; }

dl#menue{
   margin: 0;
   padding: 0;
   background: transparent url(images/Homepage.jpg) top left no-repeat;
   height: 200px;
   width: 540px;
   position: relative;
}

dt { margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd { margin: 0; padding: 0; position: absolute;  font-size: 85%; }

a:hover span 
{
 display: block;  
 text-indent: 0;

 vertical-align:middle;
 text-align:center;
 font-family:Verdana;
 font-weight:bold; 

 margin: 0px;
 padding: 0px;

 width: 352px;
 height: 49px;

 position: relative; 

 color: #284696;
 background-color:#72767D;
}

a:hover span#two {
 line-height:23px;
 font-size:18px;
}

a:hover span#one {
 line-height:49px;
 font-size:32px;
}

span#two hr
{
   color:#284696;
   background-color:#284696;
   width:352px;
   border:0px; 
   height:3px; 
   margin:0px; 
   padding:0px; 
}

/* ---------- Menue ---------- */

dd#a1{ top: 135px; left: 14px; }
dd#a1 a{ position: absolute; width: 50px; height: 50px; text-decoration: none; }
dd#a1 a:hover{ background: transparent url(images/Homepage.jpg) -14px -335px no-repeat; }
dd#a1 a span{ display: none; }
dd#a1 a:hover span{
   display: block; 
   top: 8px;
   left: 79px;
}
dd#a2{ top: 55px; left: 65px; }
dd#a2 a{ position: absolute; width: 72px; height: 72px; text-decoration: none; }
dd#a2 a:hover{ background: transparent url(images/Homepage.jpg) -65px -255px no-repeat; }
dd#a2 a span{ display: none; }
dd#a2 a:hover span{
   display: block; 
   top: 88px;
   left: 28px;
}
dd#a3{ top: 15px; left: 145px; }
dd#a3 a{ position: absolute; width: 72px; height: 72px; text-decoration: none; }
dd#a3 a:hover{ background: transparent url(images/Homepage.jpg) -145px -215px no-repeat; }
dd#a3 a span{ display: none; }
dd#a3 a:hover span{
   display: block; 
   top: 128px;
   left: -52px;
}
dd#a4{ top: 5px; left: 234px; }
dd#a4 a{ position: absolute; width: 72px; height: 72px; text-decoration: none; }
dd#a4 a:hover{ background: transparent url(images/Homepage.jpg) -234px -205px no-repeat; }
dd#a4 a span{ display: none; }
dd#a4 a:hover span{
   display: block; 
   top: 138px;
   left: -141px;
}

dd#a5{ top: 15px; left: 323px; }
dd#a5 a{ position: absolute; width: 72px; height: 72px; text-decoration: none; } 
dd#a5 a:hover{ background: transparent url(images/Homepage.jpg) -323px -215px no-repeat; }
dd#a5 a span{ display: none; }
dd#a5 a:hover span{
   display: block; 
   top: 128px;
   left: -230px;
}

dd#a6{ top: 55px; left: 403px; }
dd#a6 a{ position: absolute; width: 72px; height: 72px; text-decoration: none; }
dd#a6 a:hover{ background: transparent url(images/Homepage.jpg) -403px -255px no-repeat; }
dd#a6 a span{  display: none; }
dd#a6 a:hover span{
   display: block; 
   top: 88px;
   left: -310px;
}

dd#a7{ top: 135px; left: 475px; }
dd#a7 a{ position: absolute; width: 50px; height: 50px; text-decoration: none; }
dd#a7 a:hover{ background: transparent url(images/Homepage.jpg) -475px -335px no-repeat; }
dd#a7 a span{ display: none; }
dd#a7 a:hover span{
   display: block; 
   top: 8px;
   left: -382px;
}

                    //-->
    </style>
  </HEAD>
  <BODY BGCOLOR=#7F7F7F>

     <DIV border="0" align="center">

     <dl id="menue">
      <dt>1. External Floppy Drive</dt>
      <dd id="a1"><a href="#"><span id="one">Floppy Drive</span></a></dd>

      <dt>2. External Floppy Drive</dt>
      <dd id="a2"><a href="#"><span id="one">Ancient... I know!</span></a></dd>

      <dt>3. External Floppy Drive</dt>
      <dd id="a3"><a href="#"><span id="two">Floppy Drive. <hr /> Ancient... I know!</span></a></dd>

      <dt>4. External Floppy Drive</dt>
      <dd id="a4"><a href="#"><span id="two">Floppy Drive. <hr /> Ancient... I know!</span></a></dd>

      <dt>5. External Floppy Drive</dt>
      <dd id="a5"><a href="#"><span id="one">Floppy Drive</span></a></dd>

      <dt>6. External Floppy Drive</dt>
      <dd id="a6"><a href="#"><span id="two">Floppy Drive <hr /> Ancient... I know!</span></a></dd>

      <dt>7. External Floppy Drive</dt>
      <dd id="a7"><a href="#"><span id="one">Floppy Drive</span></a></dd>

   </dl>

      <DIV>
        <p>la le lu nur der man im mond schaut zu wenn die kleinen schaefchen schlafen drumm brumm auch du. ddddddddddddddddddd adsf j ajk jk kjl; ;kjl ;lkj lkj lkj kj kj kjkjl lkj lkj lkj lkj kj lkj lkj  kj jlkdddddddddddd ddddddddddd dddddddddd ddddddddd dddddddddd</p>
        <H1>Das ist die Vorlage</H1>
        <p>Der text wird dann hier eingef&uuml;gt wenn es was zum einfuegen gibt. dsfaa asdf asdf asdf asdf asdf asdf asdf asf asfd asdf asdf asdf asdf asdf adsf afd afd adsf asdf asfd saf asdf asdf afd dsaf af asf dsaf asf asdf asf asf asf asf asdf asdf  </p>
        <p>Der text wird dann hier eingef&uuml;gt wenn es was zum einfuegen gibt.</p>

        Floppy Drive <hr /> Ancient... I know!

      </DIV>
    </DIV>
  </BODY>
</HTML>

    2. auf dem Schild möchte ich auch 2 Zeilig schreiben, und zwischen den 2 zeilen einen horizontalen strich ziehen, die möglichst dicht unter der 1. Zeile verläuft. ich hab das wie man oben sieht mit einem HR versucht zu lösen. Fierfox macht das auch anstandslos. nur der IE meint er müsse dafür immer eine komplette Zeile verbraten. womit des span dan zu gross für das schild wird. Ist das ein problem des IE das man die ZeilenHöhe für einen HR nicht angeben kann? was für alternativen gibt es?

    Gruss Termite

    ps. standards sind was schönnes, wenn sie jeder anders interpretieren kann.

    0
Anmelden zum Antworten