- Adrian B
- Medlem ●
- Umeå
Jag har ett problem med helt vanliga kanter, borders, på element i IE. Här är min exempelsida:
http://adrianb.info/test/ieboxborder/
Såhär blir resultatet i IE 6 (i windows) resp Firefox (på mac):
Jag fattar inte varför det blir kryss i vänstra nedre hörnet på ett helt vanligt element med border. Ännu tokigare, som synes i det nedre högra hörnet, är att om jag har två olika kantfärger så blir det en pixel fel där, men inte om jag har samma färg! Vad beror detta på? Hur löser man det?
Jag har skalat ner CSS:en till en mycket grundläggande sådan:
body { padding: 10px; } #boxes div { border: 1px solid black; width: 100px; margin: 10px; } #boxes .box1 { border-right: 1px solid black; border-bottom: 1px solid black; } #boxes .box2 { border-right: 1px solid black; border-bottom: 1px solid red; } #boxes .box3 { border-right: 1px solid red; border-bottom: 1px solid black; } #boxes .box4 { border-right: 1px solid red; border-bottom: 1px solid red; }
Njae... men kör jag strict så validerar inte target="_blank" och det används på sidan, så därför körde jag transitional.
Amen skärp dig nu, är du konsult eller?
http://www.sitepoint.com/article/standards-compliant-world
Mysko hursomhelst, hoppas gusax knäckte nöten.
Amen skärp dig nu, är du konsult eller?
http://www.sitepoint.com/article/standards-compliant-world
Jo, jag känner till javascript-varianten och den fungerar ju, dock hjälper den inte i mitt fall för jag har inte kontroll över all kod på sidan det handlar om. (Om jag får välja själv så ska man inte öppna några länkar i nya fönster alls - det är ju skadligt - men säg det till kunderna...)
Kan det hjälpa tattiga explorer om du istället för att rita om kanterna bara ändrar färgerna enligt
border-color: uppe höger nere vänster; ?
Box 4 borde bara innehålla:
border-color: black red red black;
Tyvärr, varken det eller ditt andra förslag fungerade.
Nej, inget förslag hittils hjälper. Att IE har idéer kring border-utseende har jag sett tidigare. Dock inte att det blir olika för olika färger. Om man sätter border till 2-3 px får man dock en aning om vad det är IE försöker göra. Titta hur pixligt det blir i förstoring. Jag tyckecr mig känna igen det, men lyckats inte söka fram nån lösning.
Slutsats? IE lider av borderline-personlighet...
Hittade några länkar. Finns några lösningsförslag i den första, men knappast direkt smidiga:
http://www.webmasterworld.com/forum83/7197.htm
http://www.cssplay.co.uk/boxes/borders.html
Hittade några länkar. Finns några lösningsförslag i den första, men knappast direkt smidiga:
http://www.webmasterworld.com/forum83/7197.htm
http://www.cssplay.co.uk/boxes/borders.html
Tack för länkarna. Jag försökte googla fram liknande sidor, men hittade inte så mycket. Och lösningen där är ju som sagt inte så kul direkt.
Men det förklarar inte riktigt varför rött + rött = snyggt hörn samtidigt som rött + svart = fult hör. Din förstoring ger ju en hint däremot, men jag fattar inte att IE inte hanterar 1 px-kanter bättre i så fall.
Om det är ok att det ser lite annorlunda ut i IE, så skulle du kunna göra kanterna 2px där?
Njae, det är ju inte ok att det ser annorlunda ut. Målet är att få samma utseende. I så fall skulle jag byta till 2px överallt. Men jag tänkte att jag skulle försöka lösa detta en gång för alla, för jag har stött på det förut.
Förbannade IE.
Microsoft lägger till border INNANFÖR (eller hur man ska säga) en div, medan andra läsare lägger dom UTANFÖR själva divven.
Men det förklarar väl inte varför röd-svart blir fel, medan röd-röd blir rätt?
Du måste skapa ett "conditional comment" för stilen
Jo, det var det jag menade ovan när jag sa att jag ville ge extra CSS till IE.
Den här displaybuggen finns ju på alla bläddrare i Windows i princip. Av vilket Firefox faktiskt är värst imo. iaf. 1.0. Buggen finns också på borders som man inte ändrar färg på. Min fix för det är en inner och outer div.
<html> <head><title>Box border template</title> <style> #boxes div { border: 0px; } #boxes .outerbox { width: 300px; background: black; padding: 1px; } #boxes .innerbox { margin: 0px; background: white; padding: 8px; /* shadow */ border-bottom: 1px solid gray; border-right: 1px solid gray; } </style> </head> <body> <div id="boxes"> <div class="outerbox"> <div class="innerbox"> Bordered and Shadowed Box Baby! </div> </div> </div> </body> </html>
Vilka versioner av IE och WIndows handlar det om? Jag har aldrig sett problemet, och lyckas inte få fram det vare sig i egna tester eller med ditt exempel. Det ser ut som det ska i alla fall i IE 6/Win XP.
Vilka versioner av IE och WIndows handlar det om? Jag har aldrig sett problemet, och lyckas inte få fram det vare sig i egna tester eller med ditt exempel. Det ser ut som det ska i alla fall i IE 6/Win XP.
Det var som tusan. Nu testade jag på en annan PC i IE och där fanns inte felet! Jag trodde faktiskt inte att det berodde på versionen av IE. Den version som jag haft problemen i är IE version 6.0.3.3790.1830 under Microsoft Windows Server 2003 (ansluten genom Microsoft Remote Desktop Connetion - kanske där felet ligger).
Det förklarar varför jag inte hittat nån annan som sett problemet... well, tack för hjälpen.
Nu har jag undersökt lite mera. Det verkar som om skurken i detta fall är Remote Desktop Connection. Snacka om att leta under fel sten efter en lösning... *suck* Tack till alla som i alla fall försökte hjälpa mig med detta icke-existerande problem.
RDC har varit ett bra sätt annars att korrläsa webbsidor i IE/win-miljö från en mac eftersom jag inte har någon PC i närheten. Men uppenbarligen kan jag inte lita på vad jag ser där, vilket min skärmdump i första inlägget här visar.
Trevligt ändå att jag kunde hjälpa till att reda ut det :-).