CSS-hjälp önskas: knepiga kanter i IE6/win

Tråden skapades och har fått 23 svar. Det senaste inlägget skrevs .
1

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;
}

Har inget svar på din fråga, men frågar dig: måste du köra med Transitional doctype?

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.

Men även om jag kör strict så får jag samma fel, hursomhaver.

Ursprungligen av Adrian B:

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.

Ursprungligen av Kalliban:

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;

Ursprungligen av gusax840:

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.

border-right-color: red;
border-bottom-color: red;

Kanske också skulle funka men det är fler tecken

  • Medlem
  • Mölndal
  • 2006-01-15 13:30

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

  • Medlem
  • Mölndal
  • 2006-01-15 13:42

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

Ursprungligen av memark:

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.

Jag hade hoppats på en lösning där jag ger lite extra CSS åt IE endast, utan att behöva lägga in mer kod i själva sidan.

  • Medlem
  • Mölndal
  • 2006-01-15 17:40

Om det är ok att det ser lite annorlunda ut i IE, så skulle du kunna göra kanterna 2px där?

Ursprungligen av memark:

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.

  • Medlem
  • Karlstad
  • 2006-01-15 18:05

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.
Du måste skapa ett "conditional comment" för stilen, typ:

eller nåt i den stilen...

Ursprungligen av Danne V:

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?

Ursprungligen av Danne V:

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.

  • Medlem
  • 2006-01-15 23:36

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>
Ursprungligen av deric:

Min fix för det är en inner och outer div.

Ja, det är samma lösning som fanns i memarks länk tidigare. Men det är ju synd att man ska behöva falla tillbaka på en sådan lösning.

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.

Ursprungligen av system.log:

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 :-).

Jo, verkligen, för jag trodde faktiskt inte att RDC kunde introducera ett sådant udda fel, tanken slog mig aldrig. Nu vet jag bättre än att korrläsa webbsidor i IE/win genom RDC. Och IE är friad från misstankar för en gång skull!

  • Medlem
  • Mölndal
  • 2006-01-19 15:42

Hahaha!! Det förklarar varför jag såg felet då, jag körde ju också RDC!

1
Bevaka tråden