• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Ankerpositionierung im IE falsch

Status
Für weitere Antworten geschlossen.
P

Peter

Neues Mitglied
Hallo Leute,

ich hab ein sehr seltsames Problem,

Auf meiner HP werden Anker unter dem Internet Explorer nicht korrekt dargestellt....
Das heisst: Die Positionierung des Ankers ist entgegen der Angabe

Text-align:center

nicht mittig im DIV, sondern direkt links anliegend zum danebenliegenden div, obwohl das Mutterelement 20% abstand zu diesem hat (der Text liegt sozusagen ausserhalb des ihn umgebenden Divs....)

Jetzt kommt der Hammer: Die Anker haben einen CSS Hover Effekt. Wenn man mit der Maus über den Anker fährt, wird der Hover Effekt aktiviert und der Link rutscht plötzlich dahin, wo er soll, nämlich schön in die Mitte.....

Drückt man beim Explorer auf die Aktualisierentaste, rutscht der Link wieder nach links.

Wenn man die Fenstergröße verändert wird der Link auch mittig gesetzt....

hier mal schauen

Ante Portas

Das phänomen ist mir ein Rätsel.....
Ich vermute, es liegt unter Anderem an meinem min-width workaround für den IE, den ich eingebettet habe (Ziemlich üble Verschachtelung) oder an der Tabelle, in der sich die Anker befinden.....

aber normaler Text wird korrekt gesetzt, nur nicht die Anker

Code: 
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
       <title>Ante Portas</title>
<style type="text/CSS">
   .bigfont {
   color:#222F2F;
      font-size:x-large;
   };
   .midfont {
   color:#222F2F;
      font-size:large;
   };
</style>
 
</head>
<body >
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
       <title>Frame- ANTE PORTAS</title>
 
<style type="text/css">
  body {
 height:100%;
    margin:0 auto;
    background-color:black;
  }
/* fuer alle Browser, die min-width verstehen */
.width {position:relative;Text-align:center;width:100%;min-width:800px;padding-bottom:0px; z-index:0;background-color:black}
.width2 {position:relative;width:100%; min-width:800px;margin:0 auto;z-index:10}
/* Workaround fuer IE6 Browser */
* html .minwidth {position:relative;border-left:800px solid #fff;  float:left; z-index:1;background-color:black}
* html .container {position:relative;text-align:center;margin-left:-800px; float:left; z-index:2;background-color:black}
 
.content {width:100%;border:1px solid blue;text-align:left; }
 
</style>
 
</head>
 
<body >
 
 
<div class="width" >
<div class="minwidth">
<div class="container">
<div class="content" >
<img src="walhalla.jpg" alt="walhalla" width="100%" cellpadding="1" cellspacing="0">
<div style="position:relative;width=100%;margin-top:-5px;z-index:0">
<div style="position:absolute;text-align:left;right:1%;width:15%;" >
<img src="saeulenkopf2_1.jpg" alt="Säule" width="100%" >
</div>
<div style="position:absolute;text-align:center;width:100%;z-index:2" >
<div style="position:relative;text-align:center;margin-left:20%;margin-right:20%;border:1px solid red;">
<table align="center" border="0" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td width="61">
       <img src="menueloewe1.jpg" alt="Säule" Style="width:61px;height50px;display:block">
    </td>
    <td style="background-image:url(menuehintergrund.jpg)" >
<div style="text-align:center;width:auto">
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
</style>
  <a style="position:relative;text-align:center" href="<A href="http://www.tagesschau.de/">ARD">http://www.tagesschau.de/">ARD Tagesschau</a> 
  <a style="position:relative;text-align:center" href="<A href="http://www.heise.de/newsticker/">Heise">http://www.heise.de/newsticker/">Heise Newsticker</a> 
</div>
    </td>
    <td width="61" >
       <img src="menueloewe2.jpg" alt="Säule" Style="width:61px;height50px;display:block">
    </td>
  </tr>
</table>
 
 
</div>
</div>
<div style="position:relative;text-align:center;left:1%;width:15%;" >
<img src="saeulenkopf1_1.jpg" alt="Säule" width="100%" >
</div>
</div>
 
<div style="position:relative;width=100%;margin-top:-7.4%;height:100%;overflow:hidden">
<div style="position:absolute;margin-top:6.7%;text-align:left;right:1%;width:15%;height:1000px;overflow:hidden">
<img src="saeulenbauch3.jpg" alt="Säule" width="100%" height="100%" >
</div>
<div style="position:absolute;margin-top:6.7%;text-align:center;left:1%;width:15%;height:1000px;overflow:hidden">
<img src="saeulenbauch2.jpg" alt="Säule" width="100%" height="100%">
</div>
 
<div style="position:relative;text-align:center;width:100%;overflow:visible;z-index:15">
<div style="position:relative;overflow:visible;margin-left:13%;margin-right:13%;margin-top:0%;margin-bottom:-2%;border:0px solid yellow;">
<table border="0" Width="100%" height="100%" cellpadding="0" cellspacing="0" >
  <tr>
    <td style="text-align:left;height:58px;width:58px">
      <img src="rahmen_obenlinks4.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(rahmen_obenmitte4.gif)">
    </td>
    <td style="text-align:right;height:58px;width:58px">
      <img src="rahmen_obenrechts4.gif" alt="Rahmen OR" style="display:block">
    </td>
  </tr>
  <tr>
    <td style="background-image:url(rahmen_mittelinks4.gif);background-position:0px">
    </td>
    <td >
    <div style="background-image:url(inhalt_hintergrund2.gif)">
    <br>
<p class="bigfont"> Willkommen auf der Homepage von </p>
<img src="anteportaslogo.gif" alt"Logo" align="center">
<div class="midfont"> Eine Spielergemeinschaft des Zirkel des Cenarius<br>
World of Warcraft Spielservers<br>
Diese Seite wird in der nächsten Zeit stetig erweitert :-)<br>
<br> 
</div>
    </div>
    </td>
    <td style="background-image:url(rahmen_mitterechts4.gif);width:58px;background-position:0px">
    </td>
  </tr>
  <tr>
    <td style="text-align:left;height:58px;width:58px">
      <img src="rahmen_untenlinks4.gif" alt="Rahmen UL" style="display:block">
    </td>
    <td style="background-image:url(rahmen_untenmitte4.gif)">
    </td>
    <td style="text-align:right;height:58px;width:58px">
      <img src="rahmen_untenrechts4.gif" alt="Rahmen UR" style="display:block">
    </td>
  </tr>
</table>
</div>
<div style="position:absolute;text-align:left;left:8%;width:18%;bottom:0px;margin-bottom:-11%;z-index:10">
<img src="baummensch2klein.gif" alt="Grünling" width="100%" >
</div>
<div style="position:absolute;text-align:left;right:8%;width:18%;bottom:0px;margin-bottom:-11%;z-index:10">
<img src="baummensch.gif" alt="Braunblatt" width="100%" >
</div>
</div>
 
<div style="position:relative;width=100%;margin-bottom:-1%;z-index:5">
<div style="position:absolute;text-align:left;right:1%;width:15%;">
<img src="saeulenfuss2.gif" alt="Säule" width="100%" >
</div>
<div style="position:absolute;text-align:center;width:100%;">
<div style="position:relative;z-index:5;margin-top:1%;margin-bottom:2%;margin-left:20.5%;margin-right:20.5%;border:0px solid red;background-color:gray">
 
<table border="0" Width="100%" height="100%" cellpadding="0" cellspacing="0" > 
  <tr>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_obenlinks.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(minirahmen_obenmitte.gif)">
    </td>
    <td style="text-align:left;height:10px;width:12px;">
      <img src="minirahmen_obenrechts.gif" alt="Rahmen OL" style="display:block">
    </td>
  </tr>
  <tr>
    <td style="background-image:url(minirahmen_mittelinks.gif);width:12px;background-position:0px">
   </td>
    <td style="background-image:url(inhalt_hintergrund2.gif)" >
<img src="dummy.gif" width="2"; alt="Rahmen OL" style="display:block">
<marquee scrollamount="6" scrolldelay="160">
  <b>++++++ A N T E ° P O R T A S ++++++   Die WOW Gilde auf dem Zirkel des Cenarius Servers   ++++++</b>
  <b>Wir sind neu aber nicht lang ++++++ die Monster werden jetzt schon bang ++++++</b>
  <b>Also Leute, bleibt nicht "vor den Toren" ---- Enter de'Hütten :-) +++++++
</marquee>
    </td>
    <td style="background-image:url(minirahmen_mitterechts.gif);width:12px;background-position:0px">
    </td>
  </tr>
  <tr>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_untenlinks.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(minirahmen_untenmitte.gif)">
    </td>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_untenrechts.gif" alt="Rahmen OL" style="display:block">
    </td>
  </tr>
</table>
</div>
</div>
<div style="position:relative;text-align:center;left:1%;width:15%;">
<img src="saeulenfuss1.gif" alt="Säule" width="100%" >
</div>
</div>
 
 
 
</div>
</div>
</div>
</div>
 
 
 
</body>
</html>
</body>
</html>
 
Dieser Teil gehört in den HEAD-Bereich:
Code: 
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:#ff0; }
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
</style>


2. Beim DOCTYPE muß auf groß und kleinschreibung geachtet werden,
außerdem würde ich noch eine Verzeichnisangebe angeben:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Zum Vergrößern anklicken....
 
Außerdem ist der DOCTYPE 2 mal angegeben, ebenso der head inklusive beginnender body. Oder anders ausgedrückt: dein HTML-Code ist voller Fehler die jeder Browser momentan nur mit viel Glück richtig darstellt.
 
Meine Seite ist nun bis auf

Code: 
<marquee scrollamount="6" scrolldelay="160">
<b>++++++ A N T E ° P O R T A S ++++++ Die WOW Gilde auf dem Zirkel des Cenarius Servers ++++++</b>
<b>Wir sind neu aber nicht lang ++++++ die Monster werden jetzt schon bang ++++++</b>
<b>Also Leute, bleibt nicht "vor den Toren" ---- Enter de'Hütten :-) +++++++</b>
</marquee>

Valid...... (Bisher keinen Ticker gefunden, der auf meiner Seite richtig funzt, daher hab ich die recht brauchbare Marquee Funktion verwendet)

Problem besteht weiterhin.....

Ante Portas

neuer code:

Code: 
<!doctype html public "-//W3C//DTD HTML 4.0 STRICT//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
       <title>Ante Portas</title>
<style type="text/CSS">
   .bigfont {
   color:#222F2F;
      font-size:x-large;
   };
   .midfont {
   color:#222F2F;
      font-size:large;
   };
</style>
<style type="text/css">
a:link { text-decoration:none; font-weight:bold; color:#e00000; }
a:visited { text-decoration:none; font-weight:bold; color:#800000; }
a:hover { text-decoration:none; font-weight:bold; background-color:blue;}
a:active { text-decoration:none; font-weight:bold; background-color:#cff; }
a:focus { text-decoration:none; font-weight:bold; background-color:#080; }
</style>
<style type="text/css">
  body,html {
 height:100%;
    margin:0 auto;
    background-color:black;
  }
/* fuer alle Browser, die min-width verstehen */
.width {position:relative;Text-align:center;width:100%;min-width:800px;padding-bottom:0px; z-index:0;background-color:transparent}
.width2 {position:relative;width:100%; min-width:800px;margin:0 auto;z-index:10}
/* Workaround fuer IE6 Browser */
* html .minwidth {position:relative;border-left:800px solid #fff;  float:left; z-index:1;;background-color:transparent}
* html .container {position:relative;text-align:center;margin-left:-800px; float:left; z-index:2;background-color:transparent}
 
.content {width:100%;border:1px solid blue;text-align:left; border:0px solid red;;background-color:transparent}
 
</style>
 
</head>
<body >
 
<div class="width" >
<div class="minwidth" >
<div class="container" style=";background-color:black">
<div class="content" >
<img src="walhalla.jpg" alt="walhalla" width="100%" >
<div style="position:relative;width=100%;margin-top:-5px;z-index:0">
<div style="position:absolute;text-align:left;right:1%;width:15%;" >
<img src="saeulenkopf2_1.jpg" alt="Säule" width="100%" >
</div>
</div>
<div style="position:absolute;text-align:center;width:100%;z-index:2" >
<div style="position:relative;text-align:center;margin-left:20%;margin-right:20%;border:0px solid red;">
<table align="center" border="0" width="100%" cellpadding="0" cellspacing="0" >
  <tr>
    <td width="61">
       <img src="menueloewe1.jpg" alt="Säule" Style="width:61px;height50px;display:block">
    </td>
    <td style="background-image:url(menuehintergrund.jpg)" >
<div style="text-align:center;width:auto">
<br>
<div style="position:relative;text-align:center;width:100%;height:30px;">
  <a style="position:relative;width:100px;height:30px;text-align:center" href="index.php?section=news">News</a> 
  <a style="position:relative;text-align:center" href="index.php?section=gilde">Gilde</a> 
</div></div>
    </td>
    <td width="61" >
       <img src="menueloewe2.jpg" alt="Säule" Style="width:61px;height50px;display:block">
    </td>
  </tr>
</table>
 
 
</div>
</div>
<div style="position:relative;text-align:center;left:1%;width:15%;" >
<img src="saeulenkopf1_1.jpg" alt="Säule" width="100%" style="display:block">
</div>
</div>
 
<div style="position:relative;width=100%;top:-8%;margin-top:-6%;height:100%;overflow:hidden">
<div style="position:absolute;margin-top:6.0%;text-align:left;right:1%;width:15%;height:1000px;overflow:hidden;">
<img src="saeulenbauch3.jpg" alt="Säule" width="100%" height="100%" >
</div>
<div style="position:absolute;margin-top:6.0%;text-align:center;left:1%;width:15%;height:1000px;overflow:hidden">
<img src="saeulenbauch2.jpg" alt="Säule" width="100%" height="100%">
</div>
 
<div style="position:relative;text-align:center;width:100%;overflow:visible;z-index:15">
<div style="position:relative;overflow:visible;margin-left:13%;margin-right:13%;margin-bottom:-2%;border:0px solid yellow;">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%;" >
  <tr>
    <td style="text-align:left;height:58px;width:58px">
      <img src="rahmen_obenlinks4.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(rahmen_obenmitte4.gif)">
    </td>
    <td style="text-align:right;height:58px;width:58px">
      <img src="rahmen_obenrechts4.gif" alt="Rahmen OR" style="display:block">
    </td>
  </tr>
  <tr>
    <td style="background-image:url(rahmen_mittelinks4.gif);background-position:0px">
    </td>
    <td >
    <div style="background-image:url(inhalt_hintergrund2.gif)">
    <br>
<p class="bigfont"> Willkommen auf der Homepage von </p>
<img src="anteportaslogo.gif" alt="Logo" >
<div class="midfont"> Eine Spielergemeinschaft des Zirkel des Cenarius<br>
World of Warcraft Spielservers<br>
Diese Seite wird in der nächsten Zeit stetig erweitert :-)<br>
<br> 
</div>
    </div>
    </td>
    <td style="background-image:url(rahmen_mitterechts4.gif);width:58px;background-position:0px">
    </td>
  </tr>
  <tr>
    <td style="text-align:left;height:58px;width:58px">
      <img src="rahmen_untenlinks4.gif" alt="Rahmen UL" style="display:block">
    </td>
    <td style="background-image:url(rahmen_untenmitte4.gif)">
    </td>
    <td style="text-align:right;height:58px;width:58px">
      <img src="rahmen_untenrechts4.gif" alt="Rahmen UR" style="display:block">
    </td>
  </tr>
</table>
</div>
<div style="position:absolute;text-align:left;left:8%;width:18%;bottom:0px;margin-bottom:-11%;z-index:10">
<img src="baummensch2klein.gif" alt="Grünling" width="100%" >
</div>
<div style="position:absolute;text-align:left;right:8%;width:18%;bottom:0px;margin-bottom:-11%;z-index:10">
<img src="baummensch.gif" alt="Braunblatt" width="100%" >
</div>
</div>
 
<div style="position:relative;width=100%;margin-bottom:-1%;z-index:5">
<div style="position:absolute;text-align:left;right:1%;width:15%;">
<img src="saeulenfuss2.gif" alt="Säule" width="100%" >
</div>
<div style="position:absolute;text-align:left;width:100%">
<div style="position:relative;z-index:5;margin-top:1%;margin-bottom:2%;margin-left:20.5%;margin-right:20.5%;border:0px solid red">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%" >
  <tr>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_obenlinks.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(minirahmen_obenmitte.gif)">
    </td>
    <td style="text-align:left;height:10px;width:12px;">
      <img src="minirahmen_obenrechts.gif" alt="Rahmen OL" style="display:block">
    </td>
  </tr>
  <tr>
    <td style="background-image:url(minirahmen_mittelinks.gif);width:12px;background-position:0px">
   </td>
    <td style="background-image:url(inhalt_hintergrund2.gif)" >
       <img src="dummy.gif" width="2" alt="Rahmen OL" style="display:block">
       <marquee scrollamount="6" scrolldelay="160">
  <b>++++++ A N T E ° P O R T A S ++++++   Die WOW Gilde auf dem Zirkel des Cenarius Servers   ++++++</b>
  <b>Wir sind neu aber nicht lang ++++++ die Monster werden jetzt schon bang ++++++</b>
  <b>Also Leute, bleibt nicht "vor den Toren" ---- Enter de'Hütten :-) +++++++</b>
</marquee>    </td>
    <td style="background-image:url(minirahmen_mitterechts.gif);width:12px;background-position:0px">
    </td>
  </tr>
  <tr>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_untenlinks.gif" alt="Rahmen OL" style="display:block">
    </td>
    <td style="background-image:url(minirahmen_untenmitte.gif)">
    </td>
    <td style="text-align:left;height:10px;width:12px">
      <img src="minirahmen_untenrechts.gif" alt="Rahmen OL" style="display:block">
    </td>
  </tr>
</table>
</div>
</div>
<div style="position:relative;text-align:left;left:1%;width:100%;">
<img src="saeulenfuss1.gif" alt="Säule" width="15%" >
</div>
</div>
 
 
 
</div>
</div>
</div>
</div>
 
 
 
</body>
</html>
 
Warum/Wozu zwei verschiedene Style-Teile?

Marquee ist nie valide, weil es mal speziell für den Internet Explorer erstellt wurde, drum gehört es nicht zum W3C-Standard. Inzwischen können es aber auch andere Browser darstellen.
 
Maxi schrieb:
Warum/Wozu zwei verschiedene Style-Teile?
Zum Vergrößern anklicken....

Warum nicht ???

Maxi schrieb:
Marquee ist nie valide, weil es mal speziell für den Internet Explorer erstellt wurde, drum gehört es nicht zum W3C-Standard. Inzwischen können es aber auch andere Browser darstellen.
Zum Vergrößern anklicken....

Ich habe nie behauptet, das Marquee ein offizielles HTML Element ist.Ich habe den Marquee verwendet, weil zur Zeit KEIN anderer Ticker auf meiner Seite funktioniert. Javascript Versionen erzeugen immer Probleme (entweder gehen sie nicht in FF..... Positionierungsfehler IE..... Positionierungsfehler FF.......etc...)
Wozu extremo Javascript Jogging, wenn die beiden weltweit meistbenutzten Browser eine Funktion unterstützen, die sauber funktioniert und zugleich sogar noch nen schmalen Fuss macht ;-)

Aber auch ohne den Marquee-Ticker im Code werden die Links im Internet Explorer beim Erstaufruf oder beim Aktualisieren falsch positioniert. sobald der Hoover-Effekt aktiv wird, wird korrekt positioniert.....

sehr sehr seltsam.....
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben