Nu har jag kommit över en mycket bra CSS-lösning för att (en gång för alla) lösa det eviga problemet med rundade hörn i olika webbläsare.
Så här ser CSS-lösningen ut:
.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
Vill man få det att funka i Internet Explorer behövs även filen ie-css3.htc som ni ser är inkluderad i CSS:en. Ladda ner den och placera den i rootkatalogen på din webbplats. IE väljer som bekant att gå sin egen väg och strunta i detta fall i standarder som relativa sökvägar.
Diven som ska få rundade hörn måste även ha ett högre z-index än omkringliggande element, samt ha position relative eller absolute.
Jag har under kvällen implementerat denna lösning på www.lübeck.nu och det funkar bra. Jag sparade dessutom 22kB i ren kod på hela sajten. Med min förra lösning bestod varje ruta av 3 st divar. Hoppas ni också har nytta av det. Måste dessutom ge cred till Kratz (som jag f.ö. hittade genom Snurra) och fetchak.com/ie-css3.
Det här måste jag testa på temat för webbhotellet där jag har bekymmer med rundade hörn i IE. Gäller bara att hitta tid för det också. :-)
Det där var snyggt, skönt om man kan slippa alla ful-lösningar med massa bilder och tusen div:ar som när man äntligen fått ordning på det i Firefox ser helt annorlunda ut i IE..
Det är helt klart riktigt skönt att ha en lösning som funkar för alla webbläsare!
Det finns tyvärr fortfarande mycket kvar som kräver speciallösningar, främst till IE. Jag brukar lösa det med separata CSS:er beroende på vilken webbläsare som besökaren använder. Det löser jag på serversidan med följande ASP-kod.
<%Dim myUA,ua,browser
myUA = Request.ServerVariables(”HTTP_USER_AGENT”)
ua = lcase(myUA)
browser = instr(ua,”msie”)
If browser > 0 Then%>
<link href=”style_ie.css” type=”text/css” rel=”stylesheet”>
<%Else%>
<link href=”style.css” type=”text/css” rel=”stylesheet”>
<%End If%>
Så, hur tycker du snurra.se fungerar nu då? :)
Vad jag kan se har jag inte fått några besökare än. Vet du om besökarna kommer från Snurra eller den aktuella bloggen som hänvisade besökaren? Det borde ju vara från Snurra eftersom besökarna dirigeras om via dem.
Hej och tack för din kommentar till mitt blogginlägg om CSS3 i IE. Dock håller jag inte med dig om att dividern måste ha högre z-index och ha position:absolute eller position:relative. Det fungerar ändå. I alla fall för mig på de webbplatser jag har implementerat lösningen på. Har du andra erfarenheter?
I IE7 fungerade det först när jag lade till position: relative; och körde ett högre z-index på den aktuella boxen. Kommer inte ihåg vilket av dem som gjorde susen, eller om det var båda, men det funkade efter det. Innan lade sig boxen över sitt eget innehåll.
Bra tips! Redan implementerat lite här å där på mina sajter ;)
Nu har även Bilsemester.net fått denna lösning. Det tog lite tid och tristess att gå igenom alla divar som ska tas bort eller bytas ut + lite pill i CSS:en.
Tackar! Har inget behov av det just nu vad jag vet men detta har bokmärkts =)