2011 18 februari 2011

IE Javascript Fel: Objektet stöder inte egenskapen eller metoden

Hade denna märkliga fråga, där en del av Javascript fungerade bra i alla webbläsare ans som vanligt bar IE :) ... Enkelt det var, men eftersom skriptet inte skrevs av mig, det tog ett tag att felsöka detta "Objektet stöder inte den här egenskapen eller metoden" error som bara IE kastade upp. Förmodligen! Om jag skulle skriva manus, skulle jag inte ha fått detta fel alls, liksom inte blanda mina variabelnamn med fältet Ids :).

Problem: Objektet stöder inte egenskapen eller metoden (på linje 3)

function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

Lösning:
Felet alstras på thirdrow i exemplet ovan (linje 3 ... "shortdesc = document.getE ...."). Jag försökte alla slags dumma saker, att jag inte ens är värt att nämna här och äntligen gissa vad! bara ändra shortdesc var till något annat blivit av felet. I grund och botten! Variabelnamnet fick skiljer sig från den fieldID


2009 7 November 2009

CSS ZOOM - Yet Another IE sarkasm, The 3 pixelförskjutning

Tid och om igen, när alla andra webbläsare ses att bete sig som sagt av W3C reglerna IE spiraler dig av utvecklingen anden genom att kasta en ilska, verkar det inte ha en fix. Just en sådan man är denna fråga i IE7.

Problem Uttalande:
Jag och så kanske många av de andra allvarliga webbutvecklare har sett mer än många gånger, att när det kapslade flyter i utförandet, om hover över några länkar (ankare taggar), verkar som innehåller behållaren för att flytta några pixlar åt höger . Jag har försökt att google lösningar för denna fråga, men har knappast hittat någon rimligt svar på varför och när den inträffar (som kan hjälpa till att förhindra det här problemet från att hända), så jag har aldrig hittat en klar lösning på problemet heller ...

Möjlig lösning:
Av erfarenhet har jag märker 90% procent av tiden, dvs att denna fråga är fixerad genom att lägga till en zoom fastighet i CSS definitionen av MIS-beter container ...

 # Somediv {
       zoom: 1;
 }

återigen orsakerna är tvetydiga ... prova det här ...
Vissa element i IE har en "hasLayout" egendom, som är "sant" som standard. Många visuella CSS beteenden, till exempel arbetar en alfa-filter endast en faktor som hasLayout. och {Zoom: 1} verkar ge mål element som hasLayout fastigheten .... Användbart? Jag tror inte så ...

Zoom Fastigheten är verkar också stöds av Chrome, men dess användning uppkomsten verkar göra mycket negativ effekt på min layout ... prova det, om det fungerar för dig ... om det inte gör det bokmärke denna sida under "CSS craps"


2008 10 oktober 2008

INTE för IE Only - CSS barn Selectors fungerar inte i IE

CSS för icke-IE-webbläsare: Det ingen nyhet för CSS utvecklare att CSS barn Selectors som exemplet nedan, inte verkar arbeta i IE.

t.ex. div> span {vissa css}, som betyder "när en span element är ett barn (och inte ett barnbarn eller barnbarns barn osv) för en division element".

Men vi använde denna CON till vår fördel. Historiskt har barnet väljaren använts för att dölja CSS kommandon från IE. Helt enkelt genom att placera html>body framför ett CSS-kommandot IE ignorerar det:

html>body .foo { CSS commands go here ;}

Detta fungerar eftersom <body> är alltid ett barn av <html> - det kan ju aldrig vara ett barnbarn eller barnbarnsbarn till <html> .

Nu när IE 7 förstår barnet väljaren, måste du sätta en tom kommentar tagg i direkt efter större än-tecken IE 7 då inte förstå detta val (som vet varför?) Och kommer därför helt ignorera detta CSS kommando.:

html> /**/ body .foo { CSS commands go here ;}

Om inte redan sett dessa tidigare har en läsa igenom följande som också


2008 4 oktober, 2008

Försvinner HTML / DIV element i Internet Explorer [IE]

Som vanligt, en av de många konstiga problem med IE och detta måste rankas i topp 10 i IE Quirks.

Problemformuleringen (Detta var mitt problem, kanske du har liknande misbehaviors):
Jag har många DIV finns i sidan med klassen "sectionhead", som bara är titeln på ett avsnitt på sidan. Så jag har lite stil ser ut så här

. Sectionhead {font-size: 18px; Bakgrund: # cfcfcf; padding: 5px;}

Div är en ljusgrå bar med lite svart text. Vad händer i IE är en del av dessa avsnitt huvuden visas ok, men en del är osynliga, tills du bläddra sidan eller klicka något på sidan etc. Någon gång de tenderar att försvinna när du klickar på "Alt-tangenten när du sida ned eller bläddra med rullningslisten. De verkar ibland igen när du laddar (F5) sidan. Jag kort helt enkelt DIV med några enkla stil fungerar BAD.
Vad som kan orsaka en sådan oberäkneligt beteende? Tja! Ärligt talat, ingen aning!!

MÖJLIG LÖSNING:
Återigen frågar mig inte varför, men i många fall detta problem tenderar att försvinna när du lägger position: i förhållande till MIS beter elementen stil, så här

. Sectionhead {font-size: 18px; Bakgrund: # cfcfcf; padding: 5px; position: relativt}

Konstigt men vad man ska säga? Gud välsigne mig från IE!

OCH Delar MED OSS, om du hade liknande problem.


2008 15 juli 2008

IE 8 strikt läge och CSS opacitet ... Gå runt

Oh Well! I tidigare inlägg för några dagar tillbaka om Opacitet i IE8, glömde jag nämna en viktig punkt som "IE 8 strikt läge inte tillåter CSS opacitet".
För dem som donot förstår vad jag menar med strikt läge, här är snabb genomgång .

Ett arbete kring detta (Innan IE dev teamet inser att de har banat väg för ny arbetsrutiner över hela världen, webbplatser som använder popup-ljusbord med lite opacitet och sätta ryggstöd för opacitet) är att använda en semi genomskinlig bild ... helst i PNG-format (jag har haft dåliga erfarenheter att få transparenta GIF-bilder för att arbeta som de skulle). Skapa en PNG bild av färg och andelen öppenhet du vill, i din favorit bildredigerare och använda den som bakgrundsbild på din ljusbord overlay.

dvs
Istället för att något sådant här

. Lighbox_overlay {
background-color: # FFFFFF;
z-index: 1001;
-Moz-opacitet: 0,6;
opacitet: 0,60;
Filter: alpha (opacity = 60);
}

Gör detta ....

. Lighbox_overlay {
bakgrund: url (bkg.png) upprepa;
}

Att prova det, KLICKA HÄR! | ATT LADDA NER, KLICKA HÄR!


2008 20 juni 2008

Tomrum fel i Line / List artiklar (Li) i IE6

Om du någonsin har gjort (eller gör en) en vertikal meny med listobjekt (Li) taggar och CSS, kan du stöta på detta ännu en bugg i Internet Explorer, där IE 6 inlägg dessa luckor mellan listobjekt som innehåller element blocknivå, dvs om det finns något blanktecken mellan listobjekten i markeringen. Tack, men nej tack, verkar IE version 7 fri från detta fel.
Om som jag, och många fler, du tillhör denna skara frustrerade utvecklare som fortfarande måste få sina nya layouter, som arbetar i IE6, då detta kan vara till nytta. Ta en titt ...

Exempel på kod:

<ul id="menu">
<li> <a href="#"> Hem </ a> </ li>
<li> <a href="#"> Om </ a> </ li>
<li> <a href="#"> Tjänster </ a> </ li>
<li> <a href="#"> Portfolio </ a> </ li>
<li> <a href="#"> Vanliga frågor </ a> </ li>
<li> <a href="#"> Kontakta oss </ a> </ li>
</ Ul>

Du kan skapa viss CSS, liknande en nedan, för att transfrom ovanstående markeringar i en vertikal meny ....

Provet CSS ...
# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900;
list-style-type: none; width: 150px;
}
# Menyn li {margin: 0; padding: 0;}
# Menyn en {display: block;
color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Resultatet ser du ...
null

Lösning för denna bugg ... (modifierad / till CSS i fet stil)

# Meny {
margin: 0; padding: 0; Bakgrund: # FF9900; list-style-type: none; width: 150px;
float: left; / * Denna innehåller flottades listobjekt * /
}
# Meny li {
margin: 0; padding: 0;
float: left; / * Detta fixar * /
width: 100%, / * whitespace buggen i IE6 * /
}
# Menyn en {
display: block; color: # 555.555;
text-decoration: none;
padding: 0 15px;
line-height: 2,5; border-bottom: 1px solid # FFF;
}

Om ovanstående lösning doesnot verkar fungera (av skäl som är kända för att IE6 endast) ... prova denna metod i stället

Lägg bara till den kompletterande IE6 endast stilar till din markup ...

<- [Om lt IE 7>
<style type="text/css">
# Menyn li a {display: inline-block;}
# Menyn li a {display: block;}
</ Style>
<[Endif] ->


2008 12 april 2008

CSS Cross Browser Minimihöjd Hack

Inlägg IE 6 har MSIE varit vänlig nog att vi UI utvecklare genom att lägga till några fler CSS-egenskaper standard för de flesta andra vanliga webbläsare. En sådan användbar egenskap i "min-höjd". Ganska rakt fram fastigheter som behöver ingen lång omständlig förklaring. När en min-höjd för en division är inställd, det alltid behåller den uppsättningen höjd när det innehåll som husen upptar mindre än den kan hålla och allt (till skillnad från plain vanilla "höjd" egendom) skalor eller CSS ord, beter det som en delningen vilkas "höjd" är inställd på "auto" ...

För vissa av oss stackars utvecklare som fortfarande krävs för att koda CSS som också måste arbeta i IE6, kan un-tillgängligheten av "min-höjd", visar en show propp någon gång ... inte apparaten förtvivlan.

Lyckligtvis har vi tillräckligt med egenheter i IE, att vi skulle använda för att reda fördel och hacka oss igenom för att nå vårt mål ... dvs göra en DIVISION division som om den min-höjd i IE6

Lösning 1: Använda understreck Hack [ ... Läs mer ]

.box1 {
min-height: 200px;
height:auto;
_height:200px;
}

HTML: -
<div class="box1">Some dynamic content with variable height ...</div>


Lösning 2: Använda CSS attribut Selector Hack

.box2 {
min-height:200px;
height:200px;
}
div[class] .box2 {
height:auto;
}

HTML: -
<div class="someclass">
<div class="box2 common">Some dynamic content with variable height ...</div>
</div>

CSS attribut Selector Hack drar fördel av det faktum webbläsarna tidigare tha IE6 ignoreras en atribute-väljare. Observera kravet på en annan behållare division med class = "someclass". Bara presense i klassen attributet för denna uppdelning, åsidosätter höjden tillbaka till auto för Opera, Mozilla och MSIE7 och senare. IE6, som inte stöder atribute väljare, ignorerar det.

Visa demo av min höjd hack för IE6



2008 15 mars 2008

Irriterande Välj Boxes synliga genom Popup sektionerna

Vid flera tillfällen medan du gör sidlayouter med popup divisioner / lightboxar / tips etc vi kommer i situationer där någon form Markera objekt råkar vara under dessa POPUP sektionerna, genom design och det märks genom att .... FY!

Tja! du kan enkelt fixa detta genom att justera dina Z-index värden på lämpligt sätt för FF och IE7. Men Good Old (pun intended) IE6 inte beter sig som avsett .... SELECT BOX lyser igenom även när du har några drastiskt höga z-index värden enligt PopUp Division ... Bummer!!

Det finns INGA korrigeringar för detta problem, men det finns, tror jag, mer än ett fåtal sätt att arbeta-runt detta problem, men Im här för att berätta den enklaste lösningen som jag använder, som fungerar bra för mig, i de flesta fall ....

"Dölj ROUGE SELECT BOX när du visar POPUP"

Bara i skriptet textsnutt där du visar din popup, lägg till en bit skript för att ställa in synlighet för SELECT Box till "Hidden"

document.getElementById ('my_select) style.visibilty = "dold".

Och kom ihåg att sätta på den igen slutet av din popup Division

. document.getElementById ('my_select) style.visibilty = "synliga";

där "my_select" är ID för den irritation SELECT Box

Hoppas att detta hjälper ...

PS. Det finns såklart andra alternativ som dynamiskt positionining en IFRAME (samma storlek som du PopUp) under Popup DIV ... Detta fungerar bra också, men med ett tillägg av massor av DOM element, manus och huvudvärk. Jag har använt denna lösning också, och om du behöver någon hjälp med det här alternativet, låt mig veta. Kommer vara glad att hjälpa till!


2008 8 jan 2008

Villkorliga Kommentarer: För din IE Only-Del Duex

Några månader tidigare såg vi, hur vi skulle kunna innefatta en del av CSS som skulle vara synlig för IE6 endast ( För er IE endast ). Det finns andra sätt att uppnå detta. Helt enkelt inkludera en separat CSS, som är specifik för ditt mål IE. Detta skulle kunna uppnås med vad som kallas Villkorliga kommentarer.

Villkorliga Kommentarer är ett sätt att upptäcka typ av webbläsare och version. Webbläsaridentifiering utförs för att säkerställa att innehållet presenteras för webbläsaren specifik. Webbläsare detektering kan ske med användning av många olika tekniker. Denna metod har flera fördelar jämfört med tidigare metoder, som inkluderade stil växling med javascript. För att lista viktigt några, skulle vara;

  • Skript krävs inte
  • Cross-browser

Hur gör vi detta?

Gör något i IE 5 endast
<!--[if IE 5]> Welcome to Internet Explorer 5. <![endif]-->

Gör något i Alla IE-versioner
<!--[if IE]>
<link href="css/ie.css" rel="Stylesheet" type="text/css" />
<![endif]-->

Göra något i alla IE-versioner nyare att IE 5
<!--[if gte IE 5]>
<script type="text/javascript"><!--
alert("Congratulations! You are running Internet Explorer 5 or greater.");<br />
// --></script>
<![endif]-->

För mer villkorliga vartiations, läs denna information på MSDN:
Om villkorlig kommentar


2007 15 september 2007

Vad är DOCTYPE? Vilka är webbläsare Quirks och strikt läge?

Enkel sett (för dem som aldrig hört talas om doctype tidigare idag)! DOCTYPE är förklaringen i ett HTML-dokument som kommer före <HTML> taggen ser att något så här (klistras in från källan till denna mycket sidan)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Varför använda DOCTYPE?
Det hela började när webbläsaren standarder infördes genom W3C. De tidigare webbutvecklare genomföras CSS enligt önskemål webbläsare, att ha sidorna utförda på rätt sätt i dem och de flesta webbplatser har CSS som inte riktigt stämmer dessa specifikationer / normer.

Därför lösning på detta problem var att

  • tillåter webbutvecklare som visste deras normer att välja vilket läge som ska användas.
  • fortsätter visa gamla sidor enligt de gamla (quirks) regler.

Och DOCTYPE föddes.

Så, baserat på om du sidan är utformad för att standarder eller inte, väljer du rätt doctype.


Förhållandet mellan Doctype & Browser lägen
DOCTYPE är uttalandet som talar om din webbläsare vilket läge den ska göra HTML-sidan i eller snarare att vara mer exakt hur skall webbläsaren tolka CSS i, quirks mode eller strikt läge.

Gamla sidor skrivna innan dessa normer infördes har ingen doctype. Därför när det inte finns någon DOCTYPE i HTML så webbläsaren är i quirks mode.
Men om DOCTYPE definieras som en av följande, då webbläsaren sägs vara i strikt läge.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">


NDK hem | Att uttrycka IT | uttrycka Palate | uttrycka Penmenship | uttrycka Awe | uttrycka mig