✔ Unschönheit bei DIV-Positionierung im IE

[Kryptaesthesie]

Guten Morgen

Wie ihr seht, habe ich ein DIV-Konstrukt, das per Ajax nachgeladen wird und über allem anderen angezeigt wird. Soweit so gut. Das funktioniert.
Nur sieht das Ganze im IE ein bisschen anders aus. Man sieht das neben dem roten Schließen-Button. Da ist ein Abstand, der da im FF nicht ist.
Wie kriege ich diese Unschönheit weg?

HTML-Code:

        <div id="<%= nameOfDiv %>" class="kolliMemoEditDIV">
            <div style="width: 100%; background-color: #0086d6; text-align: right;">
                <img src="img/pic_dele.gif" onclick="$('#<%= nameOfDiv %>').fadeOut();" />
            </div>
            <div style="width: 100%; padding: 2px;">
                <div>
                    <strong>Memo ändern:</strong><br />
                    <textarea id="txtnewmemo_<%= nameOfDiv %>" name="newmemo_<%= nameOfDiv %>" rows="6" cols="28"><%= oldVal %></textarea>
                </div>
                <div>
                    <input type="button" value="speichern" onclick="saveChanges();" />
                </div>
            </div>
        </div>

CSS:

div.kolliMemoEditDIV {
    position: absolute;
    width: 250px;
    height: 180px;
    border: 2px coral solid;
    background-color: #f7fbff;
    z-index: 1000;
}

Danke euch schon mal für eure Hilfe
Das inline-CSS kommt da noch raus

Gruß
Gerrit

 

[Maik]

Mahlzeit

Nimm hier mal die width:100%-Deklaration raus:

<div style="width: 100%; padding: 2px;">

und erweiter das Stylesheet mit folgender Regel, damit der IE die Whitespaces vor/hinter dem <img>-Tag nicht interpretiert, was zu dem vertikalen Abstand unterhalb des Grafikelements führt:

div.kolliMemoEditDIV img { display:block; }

mfg Maik

 

[Kryptaesthesie]

Wie bekomme ich dann das Schließen-X wieder rechtsbündig?

Aber danke schon mal

Gruß
Gerrit

 

[Maik]

div.kolliMemoEditDIV img { float:right; }

anstelle von

div.kolliMemoEditDIV img { display:block; }

Und zum "Clearen" des Floats:

<div style="width: 100%; background-color: #0086d6; text-align: right;" class="clearfix">

.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */

mfg Maik

 

[Kryptaesthesie]

Cool ;-) vielen Danke, das war ja einfach.
Funktioniert!


Gruß
Gerrit