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å

inga kommentarer | tags: och och och | Inlagd i webbläsare Quirks och CSS

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.

inga kommentarer | tags: och och och | Inlagd i webbläsare Quirks och CSS och HTML

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!

inga kommentarer | tags: och och och | Inlagd i Browser Quirks , CSS

2008 6 jul 2008

Ingen "opacitet" i IE8

Om du visar webbplatsen på IE8, måste du få se en full ogenomskinlig vit bakgrund bakom det här inlägget. Igår pekade min kollega detta för mig (Eftersom jag är en av dem att anpassa sig till förändringar långsamt och stadigt ... speciellt webbläsare. Kan säga, Im feg, men så var det .... Som UI utvecklare, är jag alltid shit rädd för nya webbläsare ... du vet vad Im tlaking om, eller hur?)

Grävde runt för tag, att försöka hitta en lösning för att fixa det och sedan vad ...
Denna gång vår TIDERNA FAVORIT webläsare har gjort det igen genom att släppa allt stöd för CSS opacitet. Den icke-standardiserade `filter: alpha (opacity = # #)` CSS attribut har tagits bort, Nice, men också helt glömt att lägga till CSS3 opacitet stöd (som hur alla andra webbläsarens snyggt har hållit den i). Så för första gången sedan Gud berättade om CSS opacitet (sedan IE 5,0, antar jag), kommer en webbläsare stöder inte CSS opacitet.
Och nu för grädde på toppen: Officiell ord från IE 8 lag? Det är "by design" och "vi kommer att överväga detta i en framtida version av IE."

PS: Försök webbplatsen på FF, svär det ser snyggt!

inga kommentarer | tags: och och | Inlagd i Browser Quirks , CSS

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] ->

inga kommentarer | tags: och och och och och | Inlagd i Browser Quirks , CSS

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

inga kommentarer | tags: och och och och och | Inlagd i CSS

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!

inga kommentarer | tags: och och och och | Inlagd i webbläsare Quirks och CSS och HTML , JavasScript

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

inga kommentarer | tags: och och och | Inlagd i webbläsare Quirks och CSS och HTML , JavasScript

2007 September 8, 2007

För din IE endast

Om du har skrivit CSS för när, skulle du har erfarenhet de gånger då du bokstavligen drar ditt hår när dina CSS-layouter såg bra ut i alla nya webbläsare (jag menar webbläsare senast IE6), men IE 6 kastar ett utbrott. Du kämpar hårt för att anpassa din CSS, men det fungerar inte ... Tja! Prova dessa Hacks ...

1. Understreck Hack: -
Per definition kan CSS 2,1 specifikationen understreck ("_") i CSS identifierare. Men många webbläsare tycks fortfarande ignorera alla identifierar fortsatte med ett understreck, men IE. Detta IE: s fel / funktion blir därmed ett mycket tydligt sätt att ställa CSS egenskaper för IE bara. Så kom ihåg, en CSS-egenskapen skriven med understreck på början är synlig för Internet Explorer (samtliga versioner, men IE 7)

#box {
min-height: 300px;
height: auto;
_height: 300px; /* all IE versions less than version 7 */
...
}

Visa demonstration av denna understreck hack

Dessutom använder min höjd hack för IE6 understreck hacka, kolla in

2. Fyrkant (#) Hack: -
Liksom understreck hacka, är detta en för är för IE Oly, med en bra skillnad är egendom identifierare föregås # på start synligt för alla IE-versioner, inklusive IE7 och är osynlig för alla andra standard webbläsare.

.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute; /* For IE only */
#top: 50%; /* For IE only */
#left:50%; /* For IE only */
}

Detta hack har använts fint att demonstrera ett kors webbläsare vertikal linje lösning, ta en titt på den här artikeln för att finna vår mer

3. CSS för IE6 endast -
#my_bad_behaving_div {
/*something for all browsers*/
}
/* Lets use the * html hack so only IE6 reads the rule */
* html #my_bad_behaving_div{
/*something for IE6 only*/
}

Dessa hacka verkar himlen skickas när ingenting annat fungerar ... Om någon av dessa hacka sparar ditt liv en dag, glöm inte att behandla mig en kopp kaffe :)

inga kommentarer | tags: och och och | Inlagd i webbläsare Quirks och CSS och JavasScript

2007 12 juli 2007

Mouseover händelse i en transparent division i IE

Jag hade det här problemet där, om du hade en mouseover händelse på en division (DIV) och att fördelningen av någon anledning måste vara transparent (som i mitt fall, där det krävs för att visa vissa taggar över en bild på mouseover av denna öppna Division), inte IE för att trigga mouseover händelsen (fungerade bra i Firefox).

Försökte flera alternativ ... många som bara var ett desperat försök att få evenemanget att avfyra i IE. En av de förnuftiga sådana, som jag trodde skulle fungera var att sätta en bakgrundsfärg på uppdelningen och ställ in opaciteten till noll ... Well! uppkomsten arbete!

Den slutliga lösning som verkade fungera och inte störa funktionaliteten jag som krävdes var att sätta en pixel upprepad / transparent bakgrundsbild i denna delning

... Silly! men nu IE verkar lycklig.

inga kommentarer | tags: och och och | Inlagd i Browser Quirks

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