CSS Blog

IE7 und hr

Im HTML steht ein <hr> um die Elemente zu trennen. Er soll jedoch nicht sichtbar sein. Damit der IE7 nicht eine Linie rendert, benötige ich die zoom: 25% ; Angabe.Detaillierte hier!hr.myHr {float: left;width:100%;clear: both;background: transparent;padding: 0;margin: 0;border: 0 none;}.ie7 hr.myHrzoom: 25%;}

Sibling Selection

Das Element .SubNavigationTags ist ein Geschwister von h1 und ein Kind in #MainContent. Es kann an mehreren Orten erscheinen, jedoch wenn es nach dem h1 kommt, soll die margin-top 18px betragen. .DetailPageWithoutTopImage #MainContent h1+.SubNavigationTags{ margin-top: 18px; }

Attribute Selection

An dieser Stelle wird die attribute selection, bei einer zusätzliche Klasse,  geschrieben: .ResultItems a.Title, a span.icon { background: transparent url(/_layouts/project/images/file.png) no-repeat left; } .ResultItems a.Title[href$=’.aspx’], a.aspx span.icon { background: transparent url(/_layouts/project/images/aspx.png) no-repeat left; }

Flash und z-index

Video Player liegt in Explorer (7-9) über der Megadropdown.Lösung: das den Object Tag umschliessende Element mit position:releative und z-index:0 definieren.Dazu im Object Tag selber wmode transparent einfügen (ohne dies gehts nicht).Weiter führender Link: http://manisheriar.com/blog/flash_objects_and_z_index​

LESS

Wer viel CSS schreibt, wie ich, der soll sich unbedingt mit SASS oder LESS beschäftigen. Während SASS vor allem in der ruby Welt angewendet (mit dem Mac ist ruby sowieso schon vorinstalliert), ist LESS ‘universaler’. Es gibt php LESS Compiler, auch dotless für .net sowie Javascript Lösungen. Noch besser ist meiner Meinung nach, mit Codekit LESS lokal zu compilieren und danach nur nach das CSS hochzuladen. Die lokale Entwicklung ist damit fast doppelt so schnell. Die verschieden Browser-Hersteller Prefixe zum Beispiel, können mit mixins vordefiniert werden. Ebenfalls super ist die Möglichkeit, Variablen zu definieren! Links: LESS SASS Codekit

HTML5 und Meta X-UA compatible

Mit IE8 führte MS den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ein, um den IE8 mit der Rendering Engine des IE7 laufen zu lassen. Im Moment ist es jedoch nicht möglich, eine HTML5 Seite mit diesem Meta Tag zu valideren. In HTML5 Boilerplate wird zum Beispiel <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> verwendet, mit dem Hinweis, dies besser Server seitig auszugeben.Nun, “edge” begreife ich definitiv nicht. Dann kann der Tag ganz weggelassen werden, edge würde ja bedeuten, dass jeder IE in seiner neuest möglichen Engine rendert. Das Chrome Frame macht schon einen gewissen Sinn. Edge bedeutet für mich aber viel Risiko, wir kennen ja die IE8 “Qualitäten” beim nur schon beim rendern von CSS 2.1.Dann würde ich eher den Meta Tag <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" > bevorzugen.Weiterführende Links zu diesem Thema:http://www.alistapart.com/articles/beyonddoctypehttp://stackoverflow.com/questions/6665312/w3c-markup-validator-html5-meta-problemhttp://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/

box-shadow auch in IE 6-8 ohne JS

Useragentman zeigt in seinem Blogeintrag, wie box-shadow auch in den Versionen 6-8 des Internet Explorers erstellt werden kann. Guter Lösungsvorschlag! http://www.useragentman.com/blog/2011/08/24/how-to-simulate-css3-box-shadow-in-ie7-8-without-javascript/ Einzig würde ich die Reihenfolge hier andern: /* CSS3 Box-shadow code: */ box-shadow: 5px 5px 0px #ff0000; -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000; in /* CSS3 Box-shadow code: */ -webkit-box-shadow: 5px 5px 0px #ff0000; -moz-box-shadow: 5px 5px 0px #ff0000; box-shadow: 5px 5px 0px #ff0000;

Dropdownlist im Firefox

Dropdownlist funktionierte nicht mehr im Firefox. In anderen Browser jedoch schon. Lösung: auf dem umfassenden Div (label und select) war ein self clearing drauf : div.Dropdonlist:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } Das geht nicht mit dem Firefox, zumindest nicht mit dem 9er. Nachdem Entfernen des self clearing funktioniert das select wieder.

Responsive Web Design

Empfehlenswerte Literatur über Responisve Web Design von Ethan Marcotte. Auf a list apart und als Buch

Youtube Video überdeckt Flyout Menu (Chrome und IE)

In Chrome und in IE werden die Flyout (oder Dropdown) Menus vom eingebetteten Youtube Video überdeckt. Nach diesem Thread ( http://www.google.com/support/forum/p/Chrome/thread?tid=314ebf3e9e1902b6&hl=en ) habe ich beim eingebettetem Video folgenden Code eingefügt: <param name="wmode" value="opaque"></param> und in <embed noch wmode="opaque" Dies hat im Chrome und im IE geholfen.

Zur Erinnerung

Chris Seal at design festiva: Better Semantics with CSS Combinators & Selectors http://designfestival.com/better-semantics-with-css-combinators-and-selectors/

Print Layout wird verkleinert

Ausgangspunkt: Das Print Layout wurde bei identischem Print.css verschieden gross ausgegeben. Also nicht nur der Text bekam unterschiedliche Grössen, sondern auch die Bilder (bzw vor allem das als Bilddatei geladene Logo) Abklärungen Quelltext valid, CSS valid, Javascript iO Lösung: Es wurde eine URL als Quelle generiert und je nach Pfadlänge konnte diese natürlich nicht umbrechen und hat damit die ganze Ausgabegrösse beeinflusst. Entweder diese Angabe wird ausgeblendet, was wenig Sinn macht, oder das umschliessende Element wird mit einem overflow: hidden; versehen. Ein word-break gibt es (leider?) nicht …

z-index in automatisch generiertem Formular

Ausgangslage:Im IE fällt der Hilfe span unter das nächste Element, welches position relative hat. Es nützt nichts, dem .Help span einen z-index von 1 zu verpassen (in allen andern Browser reicht das).Da das Formular generiert wird und nicht von ‘Hand’ programmiert wird, soll die Lösung möglichst auch ‘generiert’ sein.Lösung:Mit jQuery das Elternelement des .Help spans suchen und bei hover eine Klasse vergeben, die dann mit position: relative; und z-index: 1; im CSS versehen werden kann. Es ist damit auch kein zusätzlicher Quelltext nötig.Resultat:Alternativ, ohne jQuery;onmouseover="document.getElementById('myId1').style.visibility = 'visible';document.getElementById(myId1').parentNode.style.zIndex ='1';" onmouseout="document.getElementById('myId1').style.visibility = 'hidden';document.getElementById('myId1').parentNode.style.zIndex ='auto';" Wobei IE6 mit zIndex=‘auto’ Probleme hat und es besser mit zIndex=’‘ eingegeben wird (oder: .parentNode.style.removeProperty(‘zIndex’); -> nicht getestet!)

position fixed

Element (div.Skyscraper) im Header muss an Container entlang fliessen, Element wird dynamisch (JS) mit Inhalt gefüllt (div#google_ads_div_Skyscraper) #PrimaryHeader div.Skyscraper { position: absolute; right: -168px; top:-118px; float: left; width: 168px; z-index: 6000; } #PrimaryHeader div.Skyscraper a { display: block; position: fixed; } /*diese Definition funktioniert in allen Browser ausser IE*/ /*div#google_ads_div_Skyscraper { position: fixed; float:left; width:165px; z-index: 300; }*/

z-index zum zweiten

Immer Elternelement im Auge behalten – hier gibt es ein Spielwiese dazu http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp

z-index

z-index im IE ist immer eine etwas mühsame Sache. Problemstellung: Hauptnavigation, absolut im Header positioniert. Dropdown Menüs über einen im darunterliegenden Inhalt Div positionierten Inhalt verschwinden im IE 6 & 7, wenn der z-index des Headers und der Dropdowns “nur” positiv sind (auch z-index: 999999; bringt nichts. Die Lösung war in diesem Fall ein z-index:-1; im darunterligenden, absolut positionierten Inhalt: .threeColumnsAllImagesLeft #MainContent{ position: relative; z-index: -1; } .threeColumnsAllImagesLeft #MainContent div.Image { position: absolute; width: 210px; /*height: 140px;*/ max-height: 160px; overflow: hidden; margin: 0; padding: 0 !important; z-index: -8; }

verdoppelte Margin im IE6 und 7

Der IE 6 und IE 7 verdoppeln unter gewissen Umständen die margin. Ich hatte ein Formular mit einem solchen Problem. Alle Fixes haben nicht geholfen, am Schluss habe ich kurzerhand um textarea und input ein span eingefügt. Artikel dazu: http://www.positioniseverything.net/explorer/doubled-margin.html http://www.carcomplaints.com/test/ie-label-margin-bug.html

Input Submit Button

Input Submit button mit einem Image Replacement ersetzt und Value mit text-indent: -9999px; ausderückt. Funktioniert nicht in IE 6 und 7. Im 8er und in den andern Browser wie Safari/Firefox problemlos. Ok, dieses Feature gibts halt dann nur mit neueren Browser: :lang(de) #Selektor input

.group

Dan Cederholm regt in seinem Buch “Handcrafted CSS” den Gebrauch der CSS Klasse .group an. Die Idee ist bestechend… Hatten wir doch bisher am Ende eines Stylesheets lange Selektoren Listen mit dem self-clearing, bzw für IE 6 und IE 7 die % Höhen. Nun geht das viel eleganter, semantischer (und ohne in der Zukunft wahrscheinlich sinnlosen Klassen wie .clearfix etc): .group { clear: both; content: “.”; display: block; height: 0; visibility: hidden; } /* IE 6*/ html .group { height: 1%; } /* IE 7 */ *:first-child+html .group { min-height: 1%; }

background

Positionierter input: Im IE 7 und IE 8 (serverseits auf die IE7 engine gesetzt) war es unmöglich, den Cursor mit der Maus (beim vorherigen nicht positinierten input den Cursor mit der Maus einsetzen und dann mit der Tabulatortaste vorwärts springen ging). Es scheint so, dass diese beiden Browser einen definierten background oder zumindest eine background-color benötigen. In meinem Fall musste ich es mit einem transparenten Gif als background-image lösen. The return of the blank.gif!

Browser spezifische Hacks

http://css-tricks.com/snippets/css/browser-specific-hacks/

Attribut Selektoren

http://css-tricks.com/attribute-selectors/

jQuery Image width() und iOS

Diese Defintion funktioniert in iOS nicht (ich vermute, dass der Browser das Bild bereits skaliert hat)$('.Mobile .Image img').each(function(){if ($(this).width() === 1004) {$(this).remove();}});Dass ist die Lösung:$('.Mobile .Image img').each(function(){if ($(this).attr('width') === "1004") {$(this).remove();}});

Susy Toolkit

Die Entwickler von Susy reden bewusst  nicht von einem Framwork, wie zum Beispiel Twitter Bootstrap, sondern von einem Toolkit. Grids jeglicher Art sind schnell umgesetzt. Während bei den meisten Framework mit CSS Klassen gearbeitet werden muss, die im Markup engetragen werden, wird bei Susy natürlich mit Mixins gearbeitet. Klassen wie .col, .row etc. sind deshalb nicht nötig, sondern der Entwickler kann seine eigenen, und vor allem, hoffentlich semantischen Klassen verwenden. webbear.ch hat schon einige Webseiten umgesetzt mit Susy, so zum Beispiel natürlich diese, wie auch www.ildesiderio.ch, www.hansjakob-bollinger.ch. Grundsätzlich wird es bei uns immer eingebunden, da die Geschwindigkeit bei der Entwicklung heute eine Grunderfordernis ist.

css-tricks

Allmählich wird es Zeit, den CSS Blog abzuschliessen. So vieles wird gepostet in anderen Blogs, Foren etc. In meinem CSS Blog könnte ich da gar nicht mehr mithalten und ein einfaches reposten liegt mir nicht. Deshalb werde ich diesen Blog mit der Zeit deaktivieren bzw einfach nicht mehr weiterführen und verweise hier noch einmal an die für mich wichtigen Blogs wie: css-tricks.com w3cschools.com sass-lang.com susy Und seit Bootstrap auf SCSS umgestellt hat, wird es allmählich interessant. Foundation bleibt interessant

News und Tipps

PDF Funktion für Ihre Website
html2pdf generiert schnell und zuverlässig ein PDF aus der URL oder dem HTML, welche Sie diesem Dienst übermitteln. CSS wird optimal berücksichtigt - mit oder ohne Print Styles. http://www.html2pdf.solutions

Verbessern Sie die Verfügbarkeit Ihrer Website

  • Erhalten Sie Ausfallwarnungen per E-Mail, SMS und Push-Benachrichtigung.
  • Verfolgen Sie die Verfügbarkeit und Performance Ihrer Website.
  • Publlizieren Sie optional die Verfügbarkeits-Reports um die Verkaufszahlen zu steigern.

 

Wir überwachen Ihre Websites und Server rund um die Uhr über ein Netzwerk, welches aus über  Überwachungsstationen besteht. Mehr Infos/kostenlos testen unter http://monitoring.seven49.net/de/

Der Qualidator SiteAnalyzer hat die "Windows 8 App Certification" bestanden (Feb 2014)
Qualidator SiteAnalyzer auf Heft-DVD von Unternehmer WISSEN
In der aktuellen Ausgabe von "Unternehmer Wissen" finden Sie auf der beiliegenden DVD die aktuelle Version des Qualidator SiteAnalyzer. Das Magazin erscheint deutschlandweit im Bahnhofs- und Flughafenbuchhandel seit dem 18.02.2014. Mehr Informationen zum Magazin finden Sie unter: magazin.unternehmer.de
HTML5 Validator für SiteAnalyzer
Tipp: Beim Umstieg auf HTML 5 hilft Ihnen der SiteAnalyzer gerne weiter. Laden Sie dazu die aktuelle Version herunter um die ganze Website auf Fehler und Probleme zu prüfen.
Mehr Infos und Download
Brandneues SiteAnalyzer Video online
Lernen Sie den SiteAnalyzer (noch) besser kennen:
zum neuen Qualidator® SiteAnalyzer Video
Neues Forum auf XING
Neu gibt es zusätzlich zur Facebook Page auch ein Qualidator Forum auf XING. Wir freuen uns auf Ihr Feedback und spannende Kontakte.
https://www.xing.com/net/qualidator-projekt-forum
Entwickler gesucht
seven49.net/ Qualidator sucht laufend Software Engineer ASP.NET / Sharepoint wie auch Partnerfirmen, die solche Dienste anbieten.
Zum Stelleninserat
Facebook Page
Bist Du bereits ein Qualidator® -Fan?
Besuch uns auf Facebook!
HTTP Komprimierung testen
Die HTTP Komprimierung kann neu direkt im SiteAnalyzer getestet werden. Dies auch mit verschiedenen Browsern resp. User Agents. Mehr Infos und einen Screenshot finden Sie unter Know-how - HTTP Komprimierung Gzip/Deflate testen
Kantonsranking
Schweizer-Kantonsranking der Fachzeitschrift "Computerworld" mit Hilfe von Qualidator.
Zum Artikel
Zum Kantonsranking
Qualidator für SmartPhones
Die Website wurde in den letzten Monaten stetig weiter fürs iPhone und andere SmartPhones optimiert. Probieren Sie es aus. Feedback willkommen.
Generators
Weltweite Qualidator® Generator-Studie: Welche Generators (Content Management Systeme, Editoren und Wikis) führen zu erfolgreichen Webauftritten?
Zur Studie
Websites der öffentlichen Hand
2. Qualidator-Studie: Websites der öffentlichen Hand überzeugen mit Top-Qualität
Graubünden sticht im DACH-Vergleich Wien und Nordrhein-Westfalen aus
Zur Pressemeldung
Zweite Qualidator®-Studie: Die Webauftritte der eidgenössischen Departemente, der Kantone und der grössten Schweizerstädte im Vergleich zum deutschsprachigen Ausland
Download der Studie

Follow us on Twitter
Qualidator-Ranking der Firmenwebsites der registrierten "Swiss Made Software"- Mitglieder. Swiss Made Software ist ein Label für schweizerische Software-Unternehmen, initiiert von Luc Haldimann.
Exklusiv und kostenlos - Kennen Sie den neuen Qualidator HTML Optimizer bereits?
Ein weiteres hilfreiches Tool für Sie!
Schon gesehen? Neu gibt es auf Qualidator.com Branchen- und Gruppenratings. Diese werden nun laufend ausgebaut.

Empfehlung: Vertiefte Website-Qualitätsanalyse

Empfehlung: Uptime Monitoring

Partner

  • SwissMadeSoftware
  • ZTPrentner IT
Copyright © seven49.net GmbH
Quelle: http://www.qualidator.com/de/Know-how/CSS_Blog.htm
CMS Login schliessen

CMS Login

Melden Sie sich an, um die Inhalte der Website zu bearbeiten.
loading and processing data Verarbeite Anforderung ...