Forum Mjukvara Programmering och digitalt skapande Tråd

Centrera DIV funkar inte i IE :/

1
Skriv svar
Permalänk
Medlem
●

Centrera DIV funkar inte i IE :/

Hej!

Håller på att slänga ihop en snabb profilsajt, men har stött på några små problem:
1. IE fattar inte att den ska centrera DIVen (margin: 0 auto;)
2. Det funkar inte att ta bort transparensen inom en speciell DIV.
3. IE Verkar inte helt förstå sig på css atributen style="position: absolute; bottom: 3px;" för att lägga menybilderna rätt.>

Om någon skulle komma med snabb lösning så vore det uppskattat

Sidan

Redigera
Citera flera Citera
Permalänk
Entusiast ★
●

Provat att lägga till följande i CSS-filen för den aktuella DIV-klassen?

text-align: center ;

EDIT: Lästips:
How to Centre a DIV Block Using CSS (thesitewizard.com)

Enligt koden i länktipset, borde detta fungera för dig:

  margin-left: auto ;
  margin-right: auto ;
Senast redigerat
Visa signatur

Bästa programmen till Linux - v2.0
Linux-guide: Val av grafisk miljö. (Att välja distribution).
-
Everyone should have a SGoC in their systems (SGoC: SysGhost on a Chip)

Redigera
Citera flera Citera
Permalänk
Medlem
●

position:absolute; Right: 21.7%; left: 21.7%; är det enda som funkar med IE

>>SysGhost
Tack för svaret, men har redan försökt med:

margin: 0 auto;
  margin-left: auto ;
  margin-right: auto ;

Dessa funkar fint med Firefox, men IE inte bryr sig alls.

När jag sedan kom på denna kod så verkar det mesta fungera bättre, även positioneringen.

position:absolute; Right: 21.7%; left: 21.7%;

Tackar för svar i alla fall

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

varför måste du ha med "margin: 0 auto;"?
"margin-left: auto; margin-right: auto;" Ska fungera i IE.
Det där med transparensen går inte att lösa. Texten i diven inuti diven kommer förbli transparent.
Ska försöka lösa positioneringen med.
Sedan kan du hälsa din lärare i webbdesign att frames är väldigt gammalt att använda. Vi la en lektion på det och sedan använde vi iframes för att spara tid.

edit: positioneringen är bara ngn millimeter fel i ie6 kör transparent bakgrund på bilderna (spara som gif eller png) så märks det inte.

Senast redigerat
Visa signatur

Car pc (bygglogg) | Fishtank server (galleri) | HTPC (galleri)

Redigera
Citera flera Citera
Permalänk
Entusiast ★
●

Jag misstänker att det i det här fallet är IE som gör rätt och firefox mindre rätt (då Firefox försöker vara mer flexibel)
OBS. Bara min misstanke.

IE:
"margin" är överordnad "margin-left", "margin-right", "margin-top" och "margin-bottom"
Så är "margin" satt, kommer dem underordnade "margin-*" variablerna inte att ha någon betydelse.

Firefox:
Läser koden i den ordning den kommer. Sista angivet är det som får prioritet.
Är underordnade variabler satta efteråt, är det dem som får prioritet.

Detta verkar vara fallet med dem tester jag utfört. (Dock inte utförligt)
Firefox åtlyder inte W3C standarden till fullo, utan är lite mer flexibel.
Andra webbläsare, såsom IE8 eller senare, Opera med flera åtlyder W3C standarden lite bättre. (Dock inte fullt ut dem heller)

Rätta mig om jag har fel.

Så. Jag tror att du får ett bättre resultat, om du utelämnar "margin" helt, och sätter margin-left, margin-right, margin-top, margin-bottom istället.

EDIT:
Vid närmare eftertanke, kan det också vara så att du har "margin: 0" satt, därmed kommer margin-left: auto att bli "0", då margin är satt till 0.

Senast redigerat
Visa signatur

Bästa programmen till Linux - v2.0
Linux-guide: Val av grafisk miljö. (Att välja distribution).
-
Everyone should have a SGoC in their systems (SGoC: SysGhost on a Chip)

Redigera
Citera flera Citera
Permalänk
Medlem
●

Jag har för mig att IE6 är lite kinkig på vilken doctype du har för att margin: 0 auto; ska fungera, den måste i princip ha en XHTML 1.0 Strict doctype då. Kör du inte det får du nog lov att köra med text-align: center;.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Wishie:

Jag har för mig att IE6 är lite kinkig på vilken doctype du har för att margin: 0 auto; ska fungera, den måste i princip ha en XHTML 1.0 Strict doctype då. Kör du inte det får du nog lov att köra med text-align: center;.

Gå till inlägget

Jag är nästan övertygad om att problemet härstammar från en felaktig/icke-existerande doctype, men margin:0 auto; ska fungera korrekt även med HTML 4.01 och även HTML 5s <!doctype html>.

Det finns en tom rad ovanför DOCTYPEn. Ta bort den och kolla ifall det blir bättre.

Skrivet av Strepto:

Jag förslår att du lägger in en snutt javascript som detekterar vilken webbläsare besökaren har, och om denne har en förlegad version kan du istället för det vanliga innehållet visa en stor fin text:

"Du använder en webbläsare från stenåldern, resten av världen har gått vidare och välkomnat framtiden med öppna armar. Du å andra sidan är troligtvis såpass dum att du inte förstår hur man uppgraderar, så jag föreslår att du stänger av datorn och lever ett lev utan teknik framöver."

Gå till inlägget

Nej..

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Jag förslår att du lägger in en snutt javascript som detekterar vilken webbläsare besökaren har, och om denne har en förlegad version kan du istället för det vanliga innehållet visa en stor fin text:

"Du använder en webbläsare från stenåldern, resten av världen har gått vidare och välkomnat framtiden med öppna armar. Du å andra sidan är troligtvis såpass dum att du inte förstår hur man uppgraderar, så jag föreslår att du stänger av datorn och lever ett lev utan teknik framöver."

Visa signatur

data, representation av värden, text etc. lämpad för överföring, tolkning eller bearbetning av människor eller maskiner.
dator, digital automatisk beräkningsmaskin som styrs av ett i dess minne lagrat program.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

För centrering så måste du ha en bredd definierat för div:en. Annars funkar inte centrering

Visa signatur

Wahoo

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av deques:

För centrering så måste du ha en bredd definierat för div:en. Annars funkar inte centrering

Gå till inlägget

Den har en width men ligger i en frame. Kan vara framen som spökar också, men jag är näst intill 100 på att det har att göra med den tomma raden innan doctype-deklarationen.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Inte många som har koll på grundläggande css här... margin: 0 auto; tolkas som margin-top:0; margin-bottom:0; margin-right:auto; margin-left:auto; av webläsaren (även IE6) så det är inte det som strular.
Grejen med margin:auto är att den funkar bra på IE7 men inte IE8. Du kan tvinga IE8 att visa sidan som IE7 med meta-taggen

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

i headern men då får du leva med alla andra konstigheter IE7 har också.

Ett annat sätt att göra det på är att använda text-align: center;som SysGhost nämnde fast i bodyn, det ska fungera i IE8 också (om du tar bort position:absolute;)

Om man bara kunde läsa IEs tankar.. vänta nu, det kan man ju! Testa att trycka på F12 (om du har IE8).

Btw, måste du använda både frames och tabell? Känns lite 90-tal

Strepto: Att dumförklara ev. blivande arbetsgivare klassar iaf jag som "epic fail"...

EDIT:
Ett annat sätt att centrera en div med fast bredd är att ange left:50%; och margin-left till minus halva bredden, dvs margin-left:-407px; i ditt fall.

EDIT igen:
margin:auto; ska fungera i IE8 också men det gör det inte i din sida. Den kanske måste ligga i en annan div och inte direkt inuti body.

Visa signatur

Nämen hej!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Donan Fear:

Ett annat sätt att göra det på är att använda text-align: center;som SysGhost nämnde fast i bodyn, det ska fungera i IE8 också (om du tar bort position:absolute;)

Gå till inlägget

Bara om det saknas korrekt doctype och IE tvingas in i quirksmode. Hur står det till med CSS-kunskaperna?

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●
Skrivet av Teknocide:

Bara om det saknas korrekt doctype och IE tvingas in i quirksmode. Hur står det till med CSS-kunskaperna?

Gå till inlägget

Behöver inte quirksmode för att text-align ska fungera och sidan har korrekt doctype (IE8 använder "IE8 Standards" som sidan är nu).

Visa signatur

Nämen hej!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Donan Fear:

Behöver inte quirksmode för att text-align ska fungera och sidan har korrekt doctype (IE8 använder "IE8 Standards" som sidan är nu).

Gå till inlägget

Hm, jag testade precis med detta

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Mönstertest</title>
</head>
<body style="text-align: center">
	<div style="background:#fa0; height:500px; width:800px;">
	</div>
</body>
</html>

Den brandgula fyrkanten centreras bara om man tar bort doctype-deklarationen (i IE8)

Med doctype
Utan doctype

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Funkar om du har både text-align: center och margin: auto. Verkar som om IE kör quirksmode med framesets även om det finns doctype där.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Mönstertest</title>
</head>
<body style="text-align: center">
	<div style="background:#fa0; height:500px; width:800px; margin:0 auto;">
	</div>
</body>
</html>

IE är bra skum ibland...

Visa signatur

Nämen hej!

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Ja det är klart det fungerar om du har margin:0 auto på diven, då är både quirks- och icke-quirksmode tillgodosett. Problemet som OP har är nästan helt säkert att han kör UTF-8 med BOM och en tom rad innan doctype. IE gillar inte BOM. Men nu ska jag sluta repetera mig själv..

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Donan Fear:

Verkar som om IE kör quirksmode med framesets även om det finns doctype där.

Gå till inlägget

Som jag skrev innan så är XHTML 1.0 Strict i princip den enda doctypen som triggar standards mode i alla webbläsare (html5-doctypen gör det också), med andra doctypes körs sidan i "almost standards mode" där exempelvis margin: 0 auto; inte fungerar (i IE6).

Tycker de beskriver det här väldigt bra på What Does It All Mean? - Dive Into HTML5

Edit: Alltså, summa summarum: Om du har XHTML 1.0 Strict- eller html5-doctypen kan du utan problem köra margin: 0 auto; förutsatt att elementet har en bredd. Annars, för att få det att fungera i quirks- och almost standards mode i IE, måste du sätta text-align: center på elementet ovanför och sedan text-align: left; på själva elementet du vill centrera.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Wishie:

Som jag skrev innan så är XHTML 1.0 Strict i princip den enda doctypen som triggar standards mode i alla webbläsare (html5-doctypen gör det också), med andra doctypes körs sidan i "almost standards mode" där exempelvis margin: 0 auto; inte fungerar (i IE6).

Tycker de beskriver det här väldigt bra på What Does It All Mean? - Dive Into HTML5

Edit: Alltså, summa summarum: Om du har XHTML 1.0 Strict- eller html5-doctypen kan du utan problem köra margin: 0 auto; förutsatt att elementet har en bredd. Annars, för att få det att fungera i quirks- och almost standards mode i IE, måste du sätta text-align: center på elementet ovanför och sedan text-align: left; på själva elementet du vill centrera.

Gå till inlägget

Men det stämmer inte. Testade precis IE6 med denna sida: Med doctype och margin:0 auto
Resultat: Brandgul fyrkant centrerad.

edit: Jag har varit blind.

Problemet har ingenting med Byte-order-marks eller liknande att göra: Problemet uppstår för att ofullständig DOCTYPE används!

Kort och gott, en fullständig HTML 4.01 Transitional doctype ser ut så här:

Skrivet av w3.org:

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

Det som används på de krånglande sidorna är

Citat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Inkomplett doctype == almost quirks mode, precis som Wishie säger. Dock vill jag än en gång poängtera att det går bra med en HTML 4.01-doctype; det behöver inte vara XHTML 1.0 eller HTML 5.

Senast redigerat
Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Hedersmedlem
●

Stämmer, den kör quirks mode. Såg inte det för det står standards mode i developer tools (F12) men det gäller visst bara framesetet. Om jag bara öppnar Main.html utan frameset ser man att den kör quirks.

Alla hade visst lite fel till slut.

Hur som helst ska det ju funka om man kör både margin och text-align oavsett vad browsern får för sig att köra för läge, men bäst är ju att man skriver en korrekt doctype-tag från början så slipper man allt strul.

Visa signatur

Nämen hej!

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara