Centrera ett html-objekt med negativa marginaler

Hittade en bra guide på Alsacreations som visar hur man kan centrera ett html-objekt med css. Här tänkte jag återpublicera ett av kodexemplena som visar hur man centrerar både horizontalt och vertikalt genom att använda negativa marginaler. Har testat så att det fungerar med IE6 och 7 samt Firefox 2.

Html-koden är simpel med endast en div som har id "content".

<body>
<div id="content">
This text will be centered.
</div>
</body>

Css-filen innehåller en del regler. Med denna teknik måste man ange fast bredd och höjd på elementet som ska centreras. Ta sedan dessa värden, halvera dem för att lägga in som negativa marginaler.

body {
margin: 0; /* to avoid margins */
text-align: center; /* to correct the centering IE bug*/
}


#content {
position:absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
margin-top: -100px; /* half of the height */
margin-left: -250px; /* half of the width */
border: 1px solid #000; /* temporary border */
text-align:center;
}

By Jesper Lind

Billigt webbhotell med lite mailstrul

Vi har tyvärr haft lite problem med att ta emot email den senaste veckan, fast bara på vår engelska domän (codeodyssey.com). Kontaktformuläret har dock inte fungerat på någon av våra två sajter, så har ni försökt ta kontakta det senaste så ber vi er försöka igen.

Det hela verkar bero på att vårt webbhotell, Web10.se, har en del problem när de genomfört ett byte av mailservrar. De har fortfarande inte löst det helt.

Men jag kan konstatera att det nya webbmail som är baserad på Sun Java System Communications Express 6 2005Q4 verkar riktigt bra. Förhoppningsvis ska mailen leveraras lite snabbare nu också. Innan har vi märkt en fördröjning på 10-20 minuter.

Sen verkar det som att vi äntligen fått en spamfilter på mailservern. Har sett att jobbiga mail markeras med [!RBLs] i ämnesraden. Har inte kollat något mer ingående på detta men ett spamfilter är verkligen uppskattat.

Om de även kan installera ASP.NET AJAX på servrarna, så kommer vi nog ligga kvar där ett tag till.

Kan verkligen rekommendera Web10.se för er som letar efter ett lite billigare webbhotell men ändå med väldigt bra support.

By Jesper Lind

Expressen pyntar om och lagar sina hål

Månhus rapporterar att Expressen.se har gjort om designen på sin sajt men man är inte imponerade. Det påpekas att URL-strukturen har gjorts om och att många gamla adresser inte fungerar längre. Något som W3C rekommenderar att man inte bör göra.

Vidare kan man läsa hos Beta Alfa att den nya sajten inte är helt klar och att man siktar på att ha den färdig tills på tisdag. Efter detta ska man släppa nya delar och förbättringar. I kommentarerna kan man även läsa att man använder XHTML Strict fast sidan validerar ej. Och även att det numera finns en version anpassad för mobiler.

Vi har tidigare klagat lite på Expressens röriga design när vi skrev om Bildtkriget. Nu har man fått till ett något mer samlat intryck, även fast det är lite väl packat med information och för lite luft emellan. Enligt min personliga smak alltså.

I samma veva upptäckte vi även ett XSS-hål på Expressens sida. Den 23 februari mailade vi deras nyhetsredaktion för att meddela om bristerna. Vi fick tyvärr aldrig något svar så vi vet inte om detta kan ha varit till någon hjälp.

Nu är i alla fall sårbarheten fixat. Man har flyttat sidan. Kan också konstatera att de nya inloggningsfunktionerna håller en högre säkerhetsstandard.

Tidigare var det riktigt dåligt. Man avslöjade alldeles för mycket av sin interna struktur och det var lätt att förstå hur deras inloggningsfunktioner till bloggarna var uppbyggda. Här publicerar jag nu den XSS-attackvektor som jag fann på Expressen innan ombyggnaden.

Länk till Expressens XSS-sårbarhet (sidan borttagen)

Hoppas att det kan hjälpa andra utvecklare att inte göra samma misstag. Bristen var av väldigt vanlig typ och ledde till att vem som helst kunde köra egna Javascript på Expressens domän.

By Jesper Lind

TinyMCE med AJAX och partial update

Uppdatering! Jag har nu gjort ett fullständigt exempel på hur man kan använda TinyMCE med Ajax. Länk finns här.

Har kört ASP.NET AJAX nu i en vecka och testat på UpdatePanels. Jag hade textruta med tillhörande html-editor (TinyMCE) och vid delvis uppdatering så laddades inte editorn igen. Lösningen som funkade för mig hittade jag på Moxiecode.

Först så laddar jag in själva biblioteket vid Page_Load()

//Ladda tinyMCE
HtmlGenericControl IncludeTinyMCE = new HtmlGenericControl("script");
IncludeTinyMCE.Attributes.Add("type", "text/javascript");
IncludeTinyMCE.Attributes.Add("src", "js/tiny_mce/tiny_mce.js");
this.Page.Header.Controls.Add(IncludeTinyMCE);

Efter partial upload på UpdatePanel så kallas följande funktion. Jag fick lägga anropet till den i en specialfunktion för animeringen av min UpdatePanel. Men hos Moxiecode föreslår de följande registrering.

ScriptManager.RegisterClientScriptBlock(UpdatePanel1, this.GetType(), "init", "InitTiny();", true);

I funktionen som ritar om text-editor fick jag även lägga till en extra rad som tar bort editorn efter den körs. Annars ritades en ny upp vid varje uppdatering. Det ser kanske konstigt ut att jag kör "mceRemoveControl" precis efter den lagts till men "mceAddControl", men det var det som funkade i mitt fall.

function InitTiny()
{
tinyMCE.execCommand('mceAddControl', false, 'ctl00$mainContentPH$productTabs$tpProductInfo$fvProduct$textBox');
tinyMCE.execCommand('mceRemoveControl', true, 'ctl00$mainContentPH$productTabs$tpProductInfo$fvProduct$textBox');
}

Sökvägen ser ganska lång ut men det beror på att min textarea låg inne i en Tabs-kontroll.

By Jesper Lind

Stapeldiagram formaterade med CSS

Jag och en kollega diskuterade lite igår om hur man kan rita upp stapeldiagram på bästa sätt. Vi pratade om Flash, Microsofts nya WPF/E-teknik eller att använda JavaScript.

Till mitt nöje ser jag idag att Marcus på media:screen, har skrivit lite om stapeldiagram med CSS. Detta inser man ju snabbt att det är ett väldigt intressant alternativ. Besökaren behöver inga extra tillägg i webbläsaren och rendereringen kommer bli väldigt effektiv eftersom det är i HTML.

Att göra det med CSS borde också vara bra för att få fina utskrifter på papper. Då kan man ju ange en speciell stilmall för utskrifter, där man t ex tar bort bakgrundsbilderna till staplarna.

Marcus har arbetat med Eric Meyers vertical bargraphs som utgångspunkt. Han har gjort en egen enklare variant av stapeldiagrammen som jag tycker blir riktigt bra. Snyggt jobbat!

Uppdatering: Nu har Marcus utökat exemplet med en utskriftsvänlig version.

By Jesper Lind

Små robotar ska minska behov av kirurgi

http://www.codeodyssey.se/upload/resource/blog/minibot.jpg

En liten robot med små klor är under utveckling. Denna ska minska behovet av kirurgiska ingrepp. Hittills har liknade robotar mest används för att skicka in små kameror. Denna är tänkt att användas till att ta prover och även utföra lättare behandlingar.

Nyheten fick mig att tänka på en action komedi från 1987 där folk krymptes och skickades in i kroppar. Hade glömt bort namnet men hittade den efter lite sökande. Kolla in trailer för InnerVision om du vill friska upp minnet. Vad hette den på svenska nu igen?

Vi skriver inte så ofta om robotar här, men kan inte hålla oss ibland. Vill du läsa mer på ämnet rekommenderar jag istället Robotnytt.

By Jesper Lind

Teleadress.se - sajten som vet allt om dig?

Genom Knuff såg jag att några bloggare hade länkat till en artikel på Aftonbladet som handlar om en sajt som vet allt om dig. Som vanligt har man länkfobi på Aftonbladet men man skriver åtminstone ut adressen till sidan man skriver om i ej klickbart format.

Det handlar om Teleadress.se. Just nu ligger sidan nere pga "tekniska problem" men ska kolla in den lite närmare en annan gång.

De som skrivit om den på bloggar meddelar att den verkar rätt ytliga uppgifterna. Man har tydligen någon slags statistisk grund till det hela och på Aftonbladet citeras företagets VD.

– Profilerna räknas ut med hjälp av statistiska undersökningar från bland annat Orvesto, säger vd Kent Edlund på Teleadress.

En annan sajt som visar personliga uppgifter och som väckt väldigt mycket motstånd är Ratsit.se. Här handlar det om kostnadsfri kreditupplysning på internet. Inte en helt trevlig utveckling med alla dessa offentliga register tycker jag. Som tur är funderar regeringen på att förbjuda liknade tjänster. Ett bra initiativ. Andra på nätet visar sitt missnöje med kampanj för att minska Ratsit's reklamintäkter.

Uppdatering: Nu har jag provat på Teleadress-tjänsten och tyckte inte den var något värst intressant. Uppgifterna man får fram är väldigt begränsade och kan i alla fall inte ses som något hot mot integritet. De är säkert användbara för direktmarknadsföring och massutskick. Det finns även en API som företag kan utnyttja när de t ex vill få fram telefonnummer till Callcenters. Här kan du se vilka typer av uppgifter det handlar om.

Märkte även en annan grej. Företaget är ett dotterbolag till Aftonbladet Hierta AB och innegår i den norska mediekoncernen Schibsted ASA. Inte konstigt att AF skrev så käckt om tjänsten, när det är ett företag inom egna koncernen.

By Jesper Lind

Visualisering av bloggosfärens utkanter

http://www.codeodyssey.se/upload/resource/blog/bloggo-edge.png

Genom ett inlägg på "Se till vänster, där går en arab" hittade jag till referens till en fantastiskt bild över bloggosfären. Bilden är skapad genom att renderat ett nätverk av blogglänkarna och sedan projekterat på en så kallat "hyperbolic surface" för att få 3D-effekten.

Data-grävaren Matt Matthew Hurst som ligger bakom forskningen och han visar även upp andra visuliseringar av bloggosfären i sitt galleri. Rekommenderas till alla som gillar tung statistik. Och vem gör inte det?

By Jesper Lind

Mer om det dåliga stödet för URL-omskrivning i Asp.Net

Jag älskar att utveckla i Asp.Net C# och kommer definitivt fortsätta att satsa på denna teknik. Men allt kan ju inte vara perfekt. Den största bristen i ramverket är enligt mig att det inte finns något inbyggt stöd för URL-omskrivning. Har skrivit lite om det tidigare.

Det är framför allt i IIS 6 som bristerna finns. I den nyare IIS 7 som kommer lanseras med Longhorn server kommer det finnas bättre möjligheter till att lägga in regler för URL-omskrivning. Det är ju dock en tag kvar tills det nya operativsystemet finns på marknaden så det hjälper oss inte just nu.

Det man kan göra i dagsläget är att använda ASAPI-filter men då förutsätts att du har en egen dedikerad server eller ligger på ett webbhotell som vill installera det åt dig. Jeff Atwood på Coding Horror skriver mer om de två vanligaste ASAPI-lösningarna för IIS.

En av de främsta kritikerna av situationen är nog Mike Schinkel. Detta är killen som ligger bakom initiativet wiki.welldesignedurls.org och den medföljande bloggen där man kan läsa mycket intressant på ämnet.

På sin personliga blogg sparar inte Mike på krutet. I en post nyligen med rubriken "IIS 7.0: Too Little, Too Late?" hoppar även en annan Mike (Program Manager för Microsoft’s IIS team) in i diskussionen och beklagar situationen.

Den första Mike fortätter i ett annat inlägg att lista upp alla alternativa server-tekniker och frågar sina läsare vilken han ska börja använda istället för Asp.Net. Han verkar ha tröttnat och det är lite tråkigt tycker jag.

Men bra att många uppmärksammar problemet. Microsoft har dock meddelat att IIS 7 kommer inte finnas tillgänglig för Windows 2003 och det är riktigt synd. De nya teknikerna är för djupt förankrade i Longhorns nya ramverk, menar man.

Men vem vet, efter alla böner från utvecklare kanske Microsoft kan avsätta lite resurser på det. Det skulle vara helt underbart. Mitt tips är att göra en lättare uppgradering till IIS 6 och försöka få till samma implementering av URL-omskrivning som i den kommande webbservern. Kalla den typ IIS 6.5.

By Jesper Lind

Stor utförsäljning av snowboards och vinterkläder

http://www.codeodyssey.se/upload/resource/blog/junkyard-vinter-sale-2007.gif

Brrr. Nu har kylan kommit tillbaks och det snöar här i Göteborg. Läste precis att det förväntas att bli snökaos till och med i södra delarna av landet. Om du sen av dig som jag och inte köpt någon vinterjacka i år, så kan jag rekommendera att kolla in super-rean på Junkyard.se.

Rean som har hållt på ett tag ökar med 2% varje dag. Just nu ligger den på 32% och med redan nedsatta priser kan man hitta fynd på upp till 75% rabatt. Men det gäller att vara snabb om du vill hitta ett fynd. Rean håller bara på tills på söndag och prylarna försvinner nu i ett rasande tempo.

Ska du upp till fjällen kan detta också vara ett ypperligt tillfälle att införskaffa den grymmaste utrustningen. Massor av snowboards, bindningar och boots från märken som Bataleon, Burton, Capita, Forum, Lib Tech, Rome m fl.

Hoppas ni får en riktigt skön vintersemester. Vi som jobbar med att utveckla sidan får tyvärr stanna hemma. Nu kommer vi jobba med att hålla sidan vid liv under reans sista dagar, och ber vi till servergudarna att sidan ska palla trycket in i det sista.

Natten kl 24 på söndagen den 25 stängs alltså shoppen i en vecka för underhåll.

Sen kan jag avslöja att vi har jobbat hårt på en liten nyhet till sidan. Förhoppningsvis ska denna vara klar inom några veckor.

Missa inte heller vår nyhetsdel som har fått en liten nytändning. Massor av coola actionsportklipp, reportage och vinterns händelser i kalendern.

By Jesper Lind