Homepage selbermachen 7.852 Themen, 35.619 Beiträge

Verfolgung starten Optionen

Hässlicher 1px rand im IE

Yves3 / 4 Antworten / Baumansicht Nickles

Hallo,

Ich habe wieder mal ein lästiges Problem mit dem IE.
Am besten posten ich ein Beispiel:



Code:


<form name="form1">

<div style="

    vertical-align: bottom;

    background-color: #5677bb;

    width: 15%;

    padding: 0px;

    text-align: center;

    font-weight: bold;

    color: white;

    float:left;">Beispiel

    <br />

    <div style="

      border-style: solid; 

      border-color: #666666;

      border-width:1px;"

    >

      <input type="text" name="txtUserid" style="  width:100%;

        padding: 0px;

        margin:0px;

        border-width: 0px;

        background-color: #FFFFFF;"/>

    </div>

</div>

</form>


Hier ist im IE unter der Inputbox noch ein 1px breiter und sehr hässlicher Rand. Ich habe jetzt schon einiges ausprobiert und kann mir einfach nicht erklären woher der kommt oder wie ich ihn weg kriege.

Wäre wirklich sehr dankbar, wenn mir da jemand helfen könnte.
bei Antwort benachrichtigen
cfuture7 Yves3 „Hässlicher 1px rand im IE“
Optionen

Verdammt jetzt suche ich schon seit fast einer Stunde wie man hier auf Nickles Quellcode postet, hat einer nen Tip für mich ?? Würd mich auch mal interessieren wo man das hier nachlesen kann, ich find nix.

Bitteschön:




background-color: #5677bb;

width: 15%;

padding: 0px;

text-align: center;

font-weight: bold;

color: white;

">
Beispiel
border-color: #666666;
border-width:1px;">


style="width:100%;
padding: 0px;
margin:0px;
border-width: 0px;
background-color: #FFFFFF;"/>


Habe die Divs anders positioniert, bei deinem Konstrukt war es so das Du ein grosses Blaues Feld erzeugt hast und dort ein Textfeld hineingelegt hast. Unten blieb von deinem Grossen Blauen Feld aber noch 1px Rand übrig.
Achja: ich musste auch das "float:left;" rausnehmen, das verhindert nämlich das das Block Element

einen Zeilenumbruch erzeugt. Schau mal obs hinhaut....
Gruss Vibes

Denk dran die "----" zu löschen
bei Antwort benachrichtigen
Borlander cfuture7 „Verdammt jetzt suche ich schon seit fast einer Stunde wie man hier auf Nickles...“
Optionen

Einfach < durch > durch ihre Entitäten &lt; und &gt; ersetzen...

bei Antwort benachrichtigen
Yves3 Borlander „Einfach durch durch ihre Entitäten lt und gt ersetzen...“
Optionen

EDIT: --> Scheint noch nicht so ganz zu klappen... editiere es dann wieder hier rein, wenn es tatsächlich funktioniert.
EDIT2: --> So, das sollte jetzt die finale und endlich funktionierende Version sein. Ich musste das Padding noch dem div zuweisen. (Welcher Vollidiot kam auf die Idee, das Boxmodell so zu entwerfen, wie es ist?). Naja, mit ein paar Hacks geht alles...irgendwann.

Vielen Dank! Ich habe das jetzt noch ein kleines Bisschen umgeschrieben, damit es sich in den Rest auch gut integrieren lässt.





<form name="form1">

<div style="width: 15%; float: left;">

   <h3 style="vertical-align: bottom;

   background-color: #5677bb;

   margin: 0px;

   text-align: center;

   font-family: Arial, Verdana, Sans Serif;

   font-weight: bold;

   color: white;

   ">Beispiel</h3>

  <div style="border-style: solid;

  border-color: #666666;

  border-width:1px;

  padding: 0px;

  margin: 0px;

  padding-left: 4px;

  padding-right: 4px;">

    <input type="text" name="txtUserid"

    style="width:100%;

    margin:0px;

    border-width: 0px;

    background-color: #FFFFFF;"/>

  </div>

</div> 

</form>


Was das Posten von Code betriff:
Ich verwende zusätzlich noch das <pre>-Tag, damit die Formatierung erhalten bleibt. Leider fügt die Forensoftware überall noch einen zusätzlichen Zeilenumbruch ein. Wie man das umgehen kann, das habe ich noch nicht herausgefunden.
bei Antwort benachrichtigen
Aragorn75 Yves3 „Hässlicher 1px rand im IE“
Optionen

Das sind die kleinen Eigenarten des IE...

Bei FF ist diese nicht da.
Evtl. gibt´s irgendeinen IE Spezialbefehl, aber leider k.a.

bei Antwort benachrichtigen