Internet Explorer: margin-top & position:absolute Problem

Status
Nicht offen für weitere Antworten.
suntrop

suntrop

Erfahrenes Mitglied
Hallo,

ich habe bei einem Weblayout ein "seltsames Problem", zumindest kann ich es mir nicht erklären.

Folgendes Gerüst:
HTML: 
<div id="eins" style="position:absolute">
   <div style="position: absolute;top: 10px;left: -140px;margin:1px;width:400px;height:114px;><img src="" style="width:349px;height:114px;border:none;" /></div>
   <div style="margin-top:120px;>Mein Text</div>
</div>

Der IE schafft es nicht den zweiten DIV-Container 120px nach unten zu setzten. Wenn ich allerdings Text vor das entsprechende DIV setze oder <br /> oder <p></p>, dann setzt auch der IE - wie sonst jeder andere Browser auch - den Container um 120px nach unten.

Wieso das? Ich kann mir das einfach nicht erklären. Wo liegt das Problem? Wäre ja nicht weiter schlimm, aber ich kann dort weder Text noch ein <br /> einsetzten. Mit <p></p> funktioniert es zwar, aber ich finde es sau blöd dort ein "unnötiges" Tag zu parken.

Jemand eine Idee wie ich es sonst noch umgehen kann oder weiß einen anderen Ausweg?

mfg -- suntrop
 
Hi,

schliess mal in den letzten beiden DIVs den style-Attributswert mit einem Anführungszeichen " ab.
 
an dem liegt es sicherlich nicht!

ich habe dasselbe problem...

fährt da der internet explorer wieder ein sonderzüglein ?

gruss
 
Hi!

In dem obigen Quellcode liegt es sehr wohl an den fehlenden Anführungszeichen zum Ende der beiden style-Attribute, denn wenn ich den Code-Schnipsel in ein Dokument einfüge, und vom IE ausgeben lasse, bekomme ich das hier zu Gesicht:

<div style="margin-top:120px;>Mein Text
Zum Vergrößern anklicken....
Wenn ich die Anführungszeichen hinzufüge, wird das "Konstrukt" fehlerfrei dargestellt.

Wenn es bei dir dennoch Probleme gibt, solltest du hier deinen Quellcode zeigen, damit man darauf auch eingehen kann.

Und bitte beachte die Netiquette bzgl. der Groß- und Kleinschreibung.
 
Ok.. entschuldigung... aber die Gross und Kleinschreibung ist nicht meine stärke!

Bezüglich meinem Problem hier der Codeteil der Tabelle:
(Code ist aus meinem Template des CMS Joomla!;)



PHP: 
<body>

  <table width="700"  border="0" align="center" cellpadding="0" cellspacing="0" >
         <tr>
            
            
                 <td width="350" class="top1" ><?php mosPathWay(); ?></td>
            
                 <td width="350"  align="right"  class="top1" valign="middle">
				
			<form action="index.php" method="post" name="form" >
                  
                    <div >
                        <input class="searchbox" type="text" name="searchword" size="20"  value="<?php echo _SEARCH_BOX; ?>"  onblur="if(this.value=='') this.value='<?php echo _SEARCH_BOX; ?>';" onfocus="if(this.value=='<?php echo _SEARCH_BOX; ?>') this.value='';" />
				 </div>
				  <input type="hidden" name="option" value="search" />
                  </form>                
		   </td>
         </tr>

  </table>
  
    <table width="700"  border="0" align="center" cellpadding="0" cellspacing="0">
         <tr>
                 <td  width="700" align="center" class="topnav" valign="bottom">

                  <?php if (mosCountModules('user3')) { ?>
                    <div>
                        <?php mosLoadModules ( 'user3',-1 ); ?>
                    </div>
                     <?php } ?>                 
				</td>
        </tr>
  </table>


Hier der Teil der CSS Datei:

Code: 
td.topnav {
  position       : absolute;
  margin-top     : 280px;
  padding        : 0px;
  background     : url(../images/bg_top.png) repeat-x top left;
  width          : 700px;
  height         : 28px;
 }
td.top1{
margin: 0;
padding:  0;
height: 28px !important;
height: 28px;
padding-top:  0px !important;
padding-top:  3px;
background		: url(../images/shadow.jpg) #f1f1f1 repeat-x top;
}


Die Seite gibt es zu betrachten unter www.schenkerbau.ch/joomla

ich möchte erreichen dass die Links "Home, Kontakt, Admin" über dem Bild stehen!

Edit: Habe vergessen zu schreiben dass es überall geht sogar im Safari aber einfach im Internet Explorer nicht!

gruss
 
Zuletzt bearbeitet:
Hi,

hast Du schon versucht, die Tabelle selbst absolut zu positionieren und ihr den Abstand nach oben zuzuweisen?
Der Abstand in der Klasse topnav wird im Gegenzug auf Null gesetzt (im Codebeispiel über das style-Attribut).
Code: 
  <table width="700" style="position: absolute; margin-top: 280px;"  border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td  width="700" align="center" class="topnav" style="margin-top: 0 !important;" valign="bottom">
        <div>
          <ul id="mainlevel-nav">
            <li><a href="http://www.schenkerbau.ch/joomla/index.php?option=com_login&amp;Itemid=34" class="mainlevel-nav" >Admin</a></li>
            <li><a href="http://www.schenkerbau.ch/joomla/index.php?option=com_contact&amp;Itemid=3" class="mainlevel-nav" >Kontakt</a></li>
            <li><a href="http://www.schenkerbau.ch/joomla/index.php" class="mainlevel-nav" >Home</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </table>
Vielleicht hilft Dir das weiter.

Ciao
Quaese
 
Danke dir!

Sogar der IE schafft es ;)

habe es jetzt in ein <div style="position: absolute; margin-top: 280px"> tag gepackt und voila es klappt!


grüsse
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück