webbear.ch - bärenstarkes webdesign Bern

box-shadow auch in IE 6-8 ohne JS

2012-02-15T16:13:16+00:00

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;

/* 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

2012-01-21T10:27:24+00:00

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

2011-10-18T16:01:50+00:00

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

Youtube Video überdeckt Flyout Menu (Chrome und IE)

2011-06-28T15:59:37+00:00

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:

und in

noch wmode="opaque"



	Dies hat im Chrome und im IE geholfen.



Zur Erinnerung
2011-05-26T06:33:31+00:00
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
2011-04-07T07:54:16+00:00
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
2011-03-23T05:27:44+00:00
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
2010-10-19T21:47:59+00:00
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
2010-09-19T21:42:59+00:00
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
2010-08-08T22:40:35+00:00
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;
}