Archive for the ‘CSS’ Category

CSS: 100% divs links und rechts vom content

02. Juli 2014

Mein Header Element soll 980px breit sein und natürlich zentriert. Links und rechts brauche ich DIVs die den Rest des Platzes ausfüllen. Das ganze wollte ich ohne Tables, ohne JS nur mit CSS lösen, damit das Endergebnis so aussieht:

HTML:

  1. <div id="header_wrap">
  2. <div id="header_left"></div>
  3. <div id="header">
  4. <div class="row">
  5. <div class="col-md-4"><img src="img/links.png" alt="schleife links"></a></div>
  6. <div class="col-md-5"></div>
  7. <div class="col-md-3"><img src="img/logo.png"></div>
  8. </div>
  9. </div>
  10. <div id="header_right"></div>
  11. </div>

und das CSS:

  1. #header_wrap{width:100%;display:table;height:150px;margin:40px 0 60px 0}
  2. #header_left{display:table-cell;width:auto;background:url('img/bg_header.png') left top repeat-x}
  3. #header_right{display:table-cell;background:url('img/bg_header.png') left bottom repeat-x}
  4. #header{display:table-cell;margin:0;width:980px}

Dürfte natürlich im IE8 und drunter nicht gehen, da muss man sich dann eine Sonderlösung überlegen.

IE8 (WinXP) – in Passwort Feldern werden keine Punkte angezeigt

08. Mai 2014

Es is so traurig, dass es immer noch Leute mit IE8 auf Windows XP gibt, aber bei denen besteht wohl unter bestimmten Umständen das Problem, dass die Sterne / Punkte in Passwort Feldern nicht angezeigt werden.
Korrigieren konnte ich das, in dem ich den Feldern wieder eine Standardschrift (in dem Fall Arial) zugewiesen habe.

  1. input{ font-family:Arial; }

gestylter File Upload Button im IE8

19. September 2013

Ich brauchte einen komplett gestylten “Bild hochladen” Button und konnte daher das standard input type=”file” nicht verwenden. Bzw. habe ich es folgendermaßen ausgeblendet:

  1. input[type="file"]#imagefile{
  2. visibility:hidden;
  3. width:0;
  4. height:0;
  5. }

Mein gestylter Button war ein label mit for=”imagefile”, damit beim Klick auf denselben dann eh automatisch der Upload geöffnet wurde. Und da ich nach dem Upload automatisch das Formular abschicken wollte, hatte das input Element noch ein onchange Event:

  1. <input id="imagefile" type="file" name="imagefile" onchange="$('#formid').submit();" />

Damit wurde in allen normalen Browsern beim Klick auf das Label der Upload aufgerufen und nach dem Auswählen der Datei das Formular automatisch abgeschickt. Das klappte allerdings nicht im IE 8. Der wollte partout das Formular nicht abschicken, es gab keine Fehlermeldung, kein Anhaltspunkt was das Problem war.
Stellt sich raus, ein Label funktioniert nicht wie es soll im IE8, wenn das input Element auf hidden gesetzt ist. Daher habe ich width und height bei 0 gelassen, für den IE8 allerdings extra das Stylesheet geändert:

  1. input[type="file"]#imagefile{
  2. visibility:visible;
  3. }

Jetzt klappts auch mit dem Internet Explorer.

IE7 und display:inline-block

09. August 2013

Scheint als ob der gute alte Internet Explorer 7 mit display:inline-block nicht klarkommt, was aber grade für listen die als Navigation dienen total super ist. Aber ich habe auf Anhieb einen super fix gefunden auf dieser Seite:

  1. li {
  2. display: inline-block;
  3. zoom: 1;
  4. *display: inline;
  5. }

Geht schnell und funktioniert super! Offiziell unterstützt die Firma IE7 eh nicht mehr, aber wenn dann die Navi direkt unbrauchbar wird is das halt auch nix…:D

Facebook Scrollbar

27. Februar 2012

Plötzlich wollte die Scrollbar in meinem Facebook Tab nicht mehr verschwinden. Erst nach einer Weile wurde mir klar, dass es an dem clearfix Hack lag, der verträgt sich offenbar gar nicht mit Facebook. Ansonsten, zum Vermeiden der Scrollbars gehört dies ins Stylesheet:

  1. body, html {
  2.     overflow:hidden;
  3. }

und vor dem schließenden Body Tag folgendes:

  1. <div id="fb-root"></div>
  2. <script type="text/javascript" src="https://connect.facebook.net/de_DE/all.js"></script>
  3. <script type="text/javascript">
  4.         
  5.           FB.init({
  6.           appId  : 'APP_ID',
  7.           status : true,
  8.           cookie : true,
  9.           xfbml  : true,
  10.           oauth : true
  11.         });
  12.         $(document).ready( function(){
  13.             FB.Canvas.setSize({ height: $('body').height() });
  14.             FB.Canvas.scrollTo(0,0);
  15.         });
  16.         </script>

Ungewollter Bildabstand

08. September 2011

Wenn ich ein Bild von einem Link unschließe, entsteht eine merkwürdige kleine Lücke, der Link wird höher als das eigentliche Bild. Um dies loszuwerden, gibt man dem Bild um das es geht ein display:block mit.

jquery lightbox – Höhe im IE

28. März 2011

So hübsch die jquery lightbox auch ist, bei mir wollte sie mit dem Standard Stylesheet im Internet Explorer nicht die richtige Höhe annehmen. Kleiner CSS Fix für das Problem:

  1. #jquery-overlay {
  2. position: absolute;
  3. top: 0;
  4. left: 0;
  5. z-index: 90;
  6. width: 100%;
  7. height: 500px;
  8. background-color: #000;
  9. filter:alpha(opacity=60);
  10. moz-opacity: 0.6;
  11. opacity: 0.6;
  12. }
  13. body >#jquery-overlay {
  14. position: fixed;
  15. top: 0;
  16. left: 0;
  17. }

eine float:left Liste mit subnavigation zentrieren

21. Januar 2011

Ich habe eine ganze Weile gesucht und schließlich bei CSSplay die Lösung gefunden.

Man umschließt die betreffende Navigation mit einem div (in meinem Fall mit der Klasse “container”), dem man folgende Eigenschaften zuweist:

  1. .container { clear:both; float:left; width:100%;}

Der Liste gibt man folgende Eigenschaften:

  1. #menu2 {
  2. float:left;
  3. position:relative;
  4. left:50%;
  5. }
  6. #menu2 li {
  7. float:left; position:relative; right:50%;
  8. }

Und damit steht die Liste auch schon in der mitte. Einziges Problem ist, dass man dauerhaft eine scrollbar hat, aber die kann man im Normalfall ja sehr einfach deaktivieren:

  1. body{overflow-x:hidden;}

Das ganze Beispiel ansehen.

iframe Transparenz für IE

28. Juli 2010

Es ist traurig, dass ich überhaupt noch mit iframes arbeiten muss. Aber der Kunde wünschte auf seiner Typo3 Seite eine Möglichkeit, sich auf einer externen Seite einzuloggen. Mir fiel da beim besten Willen keine andere Möglichkeit ein, als auf der Typo3 Seite ein iframe reinzubasteln, dessen Inhalt bereits auf der externen Seite ist, auf der man sich einloggen will. Das  funktionierte auch einwandfrei – jedenfalls fast. Denn die olle Diva IE hat sich mal wieder quergestellt und statt eines transparenten Hintergrunds das iframe weiß unterlegt.

Meine 2 Sekunden andauernde Google Suche brachte mich erstmal zu selfHTML, wo die dort übliche Antwort zu der Frage natürlich ein “such mal” war, aber beim zweiten Treffer wurd ich dann fündig. Damit auch IE sich bequemt, das iframe durchsichtig zu machen, mache man folgendes:

1. allowtransparence auf true setzen

  1. <iframe src="login.html" frameborder="no" allowtransparency="true"></iframe>

2. dem Hintergrund der Seite, auf die das iframe verweist, sagen, er soll transparent sein.

  1. body{background: allowtranyparency: true}

Diese CSS Schreibweise kannte ich übrigens noch nicht, aber solang’s funktioniert…

Firefox 3.5 und seine Macken

11. November 2009

Ich weiß nicht, was sie sich dabei gedacht haben. Für den normalen User mag Firefox 3.5 ja toll sein und kaum ein Unterschied zu sonst bestehen. Aber als Programmierer verwandelt sich die aktuelle Version schnell in einen Alptraum. Um mal zu notieren, was mir bisher so aufgefallen ist:

Werte per Javascript eingefügter selects werden unterschlagen

Die Ausgangssituation: Man hat ein SELECT mit Mehrfachauswahl. Werden bestimmte Werte ausgewählt, sollen weitere SELECTS hinzugefügt werden. Ich programmier also gestern wunderschöne Javascript Funktionen und lade den Content mittels Ajax rein. Klappt auch alles, klickt man auf bestimmte Options, werden neue SELECTS hinzugefügt. Problem an der Sache: schicke ich das Formular dann am Ende ab, tauchen die hinzugefügten SELECTS nicht in den $_POST Variablen auf. GAAAAH!

Der Passwort Manager ruiniert Formulare

Letztens programmierte ich ein kleines User Formular… wo man Daten von Usern ändern und ihnen Passwörter zuweisen konnte. Gab es ein Passwort, funktionierte das auch bestens, ließ sich problemlos ändern. Hatte der User allerdings noch kein Passwort, standen in meinem Passwort Feld (das übrigens den Namen vpassword trug und damit nicht namentlich deckungsgleich mit anderen Passwortfeldern auf der Seite war) plötzlich 4 Zeichen, obwohl es eigentlich leer sein sollte. Beim Speichern wurde dann auch ein 4-buchstabiges Passwort in die DB eingetragen, das ich aber an ganz anderer Stelle bei einem anderen Formular gespeichert hatte. Damit wir also nicht zukünftig Anrufe von Kunden kriegen, die wütend sind, weil Passwörter “falsch” gespeichert werden, musste ich via Javascript sicherstellen, dass bei keinem Passwort auch nichts im Passwort Feld steht!

Ähnliches ist mir übrigens gestern beim Erstellen eines neuen phpBB Forums passiert. Ich wollte eine neue Kategorie erstellen und bekam eine merkwürdige Meldung beim Speichern. Da hatte Firefox lustigerweise meine admin Login Daten fürs phpBB in die Formularfelder “Avatar” und “Zeitzone” geschrieben. Macht ja auch Sinn…. NICHT!

open sidebar