IE-Hacks

cebito · 31.01.2009

Bin grad am erstellen von 'nem Template, komm aber (das leidige Thema) mit dem IE nicht überein. Hab 'ne Navi und drunter ein (Anmelde)Formular. IE baut mir bei Mousover und zwischen Navi und Formular Lücken ein, die eigentlich nicht sein sollten und die auch keiner braucht. Hab nur überhaupt noch keine Ahnung von IE-Hacks, oder was speziell ich da angeben muß...

Firefox, so solls sein:

IE, so nicht - isses aber:

Der Bereich in der html-Datei:

HTML:

<div id="main">

<div id="left">
    <ul>
      <li><a href="template.html">Startseite</a></li>
      <li><a href="#">Der Verein</a></li>    
      <li><a href="#">Glaubensbekenntnis</a></li>
      <li><a href="#">Wirkungskreis</a></li>
      <li><a href="#">Bildergalerien</a></li>
      <li><a href="#">Kontakt</a></li>
      <li><a href="#">Impressum</a></li>
      <li><a href="#">usw.</a></li>
    </ul>
    
    <form action="" method="get" name="MemberAccess">        
        <table width="100%" border="0" cellspacing="0">
          <tr>
            <th colspan="2" style="text-align:left">Mitgliederbereich Login:</th>
          </tr>
          <tr>
            <td colspan="2" height="10px"></td>
          </tr>
          <tr>
            <td>Benutzername:</td>
            <td style="text-align:right"><input name="name" type="text" value="" size="15" maxlength="15" /></td>
          </tr>
          <tr>
            <td>Passwort:</td>
            <td style="text-align:right"><input name="psswrd" type="password" value="" size="15" maxlength="15" /></td>
          </tr>
          <tr>
            <td colspan="2" height="10px"></td>
          </tr>
          <tr>
            <td colspan="2" style="text-align:center"><input name="login" type="submit" class="button" value="login" /></td>
          </tr>
        </table>
    </form>
</div>

<div id="content">
<!--inhalt der Seite -->
</div>

Die css (Auszug) dazu:

Code:

#main {
margin: auto;
width: 900px;
background-color: #84874B;
}
#left {
margin: 0px;
padding: 0px;
float: left;
clear:left;
height: auto;
width: 210px;
}
#left  ul  {
margin: 0;
padding: 0;
list-style-type: none;
}
#left ul li {
margin: 0;
padding-left: 0px;
padding-right: 0px;
border-bottom: 1px solid #FFFFFF;
}
#left ul li a {
display: block;
padding: 5px;
height: 16px;
width: 200px;
font-size: 12px;
text-decoration: none;
color: #FFFFFF;
}
#left ul li a:hover {
color: #3D3E21;
background-color: #BFC36C;
}
#content {
margin-left: 210px;
width: auto;
height: auto;
padding: 20px;
padding-top: 5px;
background-color: #FFFFFF;
border-right: 1px solid #84874B;
font-size: 12px;
color:#333333;
}

Edit: Bevor jemand die Suchfunktion erwähnt - darüber komm ich auch nicht weiter.

feelx75 · 01.02.2009

AW: IE-Hacks

Hi

Stehe zugegebenermassen gerade am Berg und weiss nicht, weshalb der IE (welcher eigentlich, 6 oder 7, oder gar 8beta?) einen Abstand z.B. unterhalb von 'usw.' einbaut.
Allerdings gibts da wirklich immer wieder Probleme, gerade bei pixel-genauen Layouts, Abständen usw.
Bin kein Freund dieser Hacks, da man nie weiss, wie eine künftige Version der Browser damit umgeht. Schau dir doch mal die "Conditonal Comments" an. Mit diesen kannst du (standardkonform) spezielle CSS (und anderes) nur für IE browser nachladen und ggf. margins-/paddings/höhen/widths usw korrigieren. Dies sogar unterschiedlich je nach IE Version...

Schau mal hier: http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative

vllt hilft dir das etwas...
lg

cebito · 01.02.2009

AW: IE-Hacks

feelx75 schrieb:
Stehe zugegebenermassen gerade am Berg und weiss nicht, weshalb der IE (welcher eigentlich, 6 oder 7, oder gar 8beta?)

uups, vergessen, screen ist aus IE6...

feelx75 schrieb:
Allerdings gibts da wirklich immer wieder Probleme, gerade bei pixel-genauen Layouts, Abständen usw.

Das ist 'ne einfache Liste, nix Pixelgenaues...

feelx75 schrieb:
Schau dir doch mal die "Conditonal Comments" an. Mit diesen kannst du (standardkonform) spezielle CSS (und anderes) nur für IE browser nachladen und ggf. margins-/paddings/höhen/widths usw korrigieren. Dies sogar unterschiedlich je nach IE Version...

Werd ich mal tun..., danke.
Edit: sagt mir aber nicht wirklich, was ich speziell für den IE ändern muß (damit er's richtig darstellt), wie ich es einbinde weiß ich schon.

feelx75 · 01.02.2009

AW: IE-Hacks

ja ... ich meine nur mit pixel genau, dass Abstände vom IE (insb. IE6) teilweise anders interpretiert werden. Google sonst mal nach "IE6 Boxmodell" usw.

Aber bist du sicher, dass deine HTML Struktur ansonsten stimmt? Zumindest oben im Sourcecode ist ein <DIV>-Tag nicht geschlossen.

Ausserdem ist es komisch, dass FF offenbar das richtig anzeigt, denn laut deinem Stylesheet müsste diese grüne Fläche (#84874B) 900px breit sein, denn da definierst du Color zusammen mit width: 900px. Soll das so sein? In den Screenshots ist es jedenfalls nicht so.

Ich bins nochmal....

Okay der Abstand kommt deshalb, weil der IE6 automatisch einen gewissen Abstand beim Formular einfügt. Der FF macht dies nicht.
Du kannst mal oben ins stylesheet testweise einfügen:

Code:

FORM {
           padding: 0;
           margin: 0;
         }

Ich setze übrigens generell wegen solchen Problemen mal alle paddings und Margins auf 0 ganz am Anfang des stylesheets mit:

Code:

HTML, BODY
        {
           padding: 0;
           margin: 0;
         }

das reicht hier aber nicht, ausser du schreibst: "*, HTML, BODY {.... }" usw.. Aber das nur als Hinweis...

lg

cebito · 01.02.2009

AW: IE-Hacks

Der div-tag ist geschlossen (im

Code:

Auszug nicht zu sehn, hatte ich vergessen beim kopieren), und die grüne Fläche ist auch wirklich 900px breit, nur liegt der content drüber und macht es wieder weiß (kleiner Trick, damit die Spalten gleich lang sind...)

Hab der Form margin:0; gegeben, der Abstand ist weg. Übrig bleibt trotzdem dieser Pixelbreite dunkelgrüne Streifen/Schatten bei Mouseover... (siehe IE-Bild Kontakt)

xxsiv · 01.02.2009

AW: IE-Hacks

Ich setzte mit den css resets immer erstmal alles zurück und verhindere so schon viele Ungereimtheiten zw. den Browsern.

HTML:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    font: 95% Verdana, Arial, Helvetica, sans-serif;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

merkur7 · 01.02.2009

AW: IE-Hacks

schau dir mal das yaml framework an, die haben das genial gelöst

Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework da gibt es eine lösung für alle browser