# Internet Explorer: margin-top & position:absolute Problem



## suntrop (27. Januar 2007)

Hallo,

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

Folgendes Gerüst:

```
<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


----------



## Maik (27. Januar 2007)

Hi,

schliess mal in den letzten beiden DIVs den style-Attributswert mit einem  Anführungszeichen *"* ab.


----------



## philschenker (26. März 2007)

an dem liegt es sicherlich nicht!

ich habe dasselbe problem...

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

gruss


----------



## Maik (26. März 2007)

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


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.


----------



## philschenker (26. März 2007)

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!




```
<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:


```
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


----------



## Quaese (26. März 2007)

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).

```
<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


----------



## philschenker (26. März 2007)

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


----------

