Broken background-images in IE7

Today I got a call from a customer who had a problem with broken background-images in Internet Explorer 7. Images that was in the bottom of the page where broken when the user scrolled down as show in the picture below.

brokenBackground

A quick tip for fixing this is to add the zoom property in the CSS-file. Just add the following code and the broken images will be fixed.

1
2
3
.teaser{
zoom: 1;
}

The result:
workingBackground

Utskrift i Chrome

Jag stötte på ett problem idag med Google Chrome och CSS för utskrift. Teckensnittstorleken var satt 11pt men envisades med att skrivas ut i 12pt.
Efter mycket googlande hittade jag felet. Chrome har en inställning för minimum teckensnittstorlek – vilket per standard är satt till just 12pt. Denna standardvärde kan ändras under ”Documents and Settings\User_Name\Local Settings\Application Data\Google\Chrome\User Data\Default\Preferences”. Chrome tar även hänsyn till eventuellt zoomläge som användaren har satt i sin webbläsare. Lite svårt att förklara detta för en besökare…
Det visade sig att zoomläget faktiskt kan vändas till en fördel! I CSS:en kan man ange det zoomläge som behövs för att ”härma” utseendet man skulle få med ett mindre teckensnitt. För att lägga till detta i body taggen kan du använda dig utav följande Chrome-specifika css.
//Chrome specific
body:nth-of-type(1) {
	zoom: 85%;
}

CSS hacks för InternetExplorer

Nedan finner du några av mina favorit CSS hacks för IE.
/* IE7, IE8 */
.startPageTeaserText 
{ 
	margin-top/*\**/: -75px\9; 
}

/* IE7 */
.startPageTeaserText 
{
	margin-top: -73px !ie; 
}

/* IE9 */
:root .startPageTeaserText
{ 
	margin-top: -70px \0/IE9;
}

Skapa vertikal meny

Det är rätt enkelt att skapa en vertikal meny med fast bredd.
/*1)*/
#navigation {
list-style-type: none; }

/*2)*/
#navigation li {
display: inline;
}

/*3)*/
#navigation li a{
width: 100px;
float: left;
border: 1px solid black;
color: black;
text-decoration: none;
text-align: center
}
1) Börja med att ta bort att ta bort punkterna framför länkarna i vår ul-li lista.
2) Därefter positionerar vi varje <li>-element på en egen rad, genom att göra dem till inline-element. (Detta för att få det att fungera i Internet Explorer)
3) Nu till själva magin. Genom att göra varje <a>-element ”flytande” kommer mellanrummet som finns mellan länkarna att tas bort och vi kan sätta en fast bredd på varje <a>-element.

Regex exempel

E-postadress (epostadress@doman.com): @^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$ Svenskt mobilnummer (070-1234567): @”^[0]{1}[7]{1}[0,2,3,6,9]{1}-[0-9]{7}$” Svenskt personnummer (ååååmmdd-nnnn): @”^[12]{1}[90]{1}[0-9]{6}-[0-9]{4}$”

WordPress klipp och klistra

Nedan finner du några bra snippets för WordPress. 12//Hämta bild url <img src="<?php echo get_template_directory_uri();?>/images/logo.png" alt="Logo">

Komplett metadata?

Jag har försökt saxa ihop en komplett lista på metadata som ska finnas på alla moderna webbplatser. 12345678910111213141516<meta name="description" content="" /> <link rel="author" href="https://plus.google.com/[din kod]/" /> <!– Open Graph metadata –> <meta property="og:title" content="" /> <meta property="og:type" content="[website/article]" /> <meta property="og:image" content="" /> <meta property="og:url" content="" /> <meta property="og:description" content="" /> <!– Twitter –> <meta […]

Aktivera cachning av blobs i EPiServer

Lägg till följande i web.config för att aktivera cachningen av alla mediafiler som kommer från EPiServer (Blobs). 123456<configuration>     <configSections>         <section name="staticFile" type="EPiServer.Framework.Configuration.StaticFileSection" />     </configSections> </configuration> <staticFile expirationTime="365.0:0:0" />

EPiServer 7.5 – Klipp och klistra

Nedan följer några bra klipp och klistra kodsnuttar för EPiServer 7.5. 1234/*  Tvinga användaren att endast kunna välja en viss sidtyp som ContentReference */ [Display(GroupName = SystemTabNames.Content, Order = 400)] [AllowedTypes(typeof(ProducerPage))] public virtual ContentReference ProducerPage { get; set; }