Text ausserhalb des Rahmens

[Sunny3380]

Hallo zusammen,
ich bräuchte mal wieder euere Hilfe. Bin am verzweifeln :(
Bitte schaut euch mal die Grafik im Anhang an. So schaut es aus, wenn ich mir das mit Fireburg unter Mozilla anschaue. Im Internet Explorer wird Der Text 'Login' nicht angezeigt.

Hier der folgende Code den ich dafür habe:

<div id="liferay-header-content">
 <div class="lfr-dock">
  <ul class="lfr-dock-list">
   <li class="sign-in">
    <a href="/c/portal/login?p_l_id=10123">
     <h2>Login</h2>
    </a>
   </li>
  </ul>
 </div>
</div>

Und das ganze ist noch von einem Wrapper (id="Header-wrapper") umgeben. Aber das dürfte ja eigentlich kein Problem mehr sein, da ja nur der Positionierungskontext zählt.

Hier noch die Style Eigenschaften aus custom.css:

div#liferay-header-content
{
    position: absolute;
    right: 20px;
    top: 20px;
    
    width: 250px;
    height: 150px;
}


.lfr-dock 
{
    position: absolute;
    left: 0;
    top: 0;
}

.lfr-dock h2
{
    font-size: 20px;
    color: #ffffff;
    text-align: right;
    padding: 0 20px;
}

.lfr-dock li {
    float: left;
    list-style-type: none;
}

Wieso sieht das so komisch aus. Der Text Login sollte doch im Positionierungskontext, also in diesem blauen Rahmen sein oder ?
Und vorallem wieso bekomme ich nur im Firefox den Text angezeigt und nicht im IE?

Vielen Dank im voraus für euere Bemühungen
Grüsse
Sunny

 

[DD-Stylz]

vllt. liegt es dadran dass du überall position: absolute angegeben hast, bei absolute werden die Elemente über den normalen textfluss gelegt, deshalb geht das Login nach hinten.

versuche mal mit position: relative oder position ganz weglassen.

wenn du sie ganz wegläst musst du top und right auch wegmachen, dafür kannst du dann margin verwenden.


naja bin kein html prof, vllt kann ein Profil mich verbessern falls ich falsch liegen sollte.

 

[Sunny3380]

Danke dir für die Antwort.
Ich werde das mal versuchen. Allerdings habe ich da wohl ein anderes Problem gehabt. Irgendwo wurde die Line-height auf 0px gesetzt. Wieso auch immer.
Und das hat dann wohl solch schreckliche Wirkung :(

Aber nun sieht es erstmal OK aus.
thx

 

[Gilles]

Wie DD-Stylz schon sagte: Das Ganze Absolut zu machen ist nicht das Wahre
Nehm das mal raus und ersetze left und right durch margin-left und margin-right. Du kannst für das Login auch den line-height wieder höher setzen. Alles kein problem :)