MS Internet Explorer og CSS

[834HF42F242]

Nå e jeg temmelig lei av å måtte spesialtilpasse alle sidene mine for IE. Ikke nok med at IE ikke støtter CSS2, men den kan ikke lese vanlig CSS normalt en gang.

 

Jeg har et godt eksempel:

 

Jeg har to DIV-tags for to kolonner. Kolonne en (med teksten) er satt i CSS til å være 70% av max bredde, mens kolonne to (med bildet) er satt til 30%. Ettersom jeg vil at siden skal dekke hele bredden i alle mulige oppløsninger, kjører jeg variabel bredde i stedet for fast med EM eller pixler.

 

Problemet er følgende:

 

IE tegner opp kolonne 1 med 70% av tilgjengelig bredde eksklusiv kolonne 2.

 

Se bilde 1

 

Opera tegner opp kolonne 1 med 100% av tilgjengelig bredde eksklusiv kolonne 2.

Se bilde:

 

Se bilde 2

 

For at IE skal fylle den tilgjengelige plassen med tekst, må kolonne 1 sin bredde settes som 100%. Da forsvinner teksten under bildet i kolonne 2, hvis siden vises med Opera.

[pgdx]

Prøv med

 

* {

margin:0;padding:0;

}

 

Edit: Leste ikke skikkelig før jeg svarte... Kan du gi oss en lenke til filen? Det høres merkelig ut at IE gjør slikt.

 

 

Etter det jeg kan se, har du ikke forstått poenget med HTML og CSS skikkelig. Jeg anbefaler at du begynner på nytt og leser htmldog. I tillegg vil vi her hjelpe deg fremover mot en bedre verden.

 

For det første: Ikke bruk tabeller med mindre du skal lage en tabell. For det andre:

 

Du lager ikke avsnitt slik:

bla bla bla<br><br>
bla bla bla<br><br>

Men slik:

<p>bla bla bla</p>
<p>bla bla bla</p>

Endret 14. juli 2005 av drange_net

[834HF42F242]

Det var ikke det jeg spurte etter, og det er helt uvesentlig for saken. Det var et eksempel, og jeg ba ikke om hjelp. Den portalen du har vært og kikket på, er et sammensurium av koder som jeg prøver å nøste opp litt etter litt, dag for dag. Den har basis i noe som heter soopportal, et system bestående av ca 5000 filer inkludert om hverandre.

Kodemessig en grusom portal, funksjonsmessig en fantastisk portal.

 

Jeg skal sette opp et enkelt testmiljø med css-eksempelet, slik at du forstår hva jeg mener... gi meg fem minutter.

[pgdx]

Den CSS-filen der er ganske mye større enn nødvendig:

a.pagelinklast:link {
font-family: verdana, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal; 
color: #000000; 
text-decoration: none;
}

Du trenger ikke definere font-size på hvert element så lenge det ikke endrer seg.

.pagelinklast {
font-family: verdana, helvetica, sans-serif;
font-size: 8pt;
border-right: #77779E 1px solid;
border-top: #77779E 1px solid;
border-left: #77779E 1px solid;
border-bottom: #77779E 1px solid;
padding-right: 3px;
padding-top: 1px;
padding-left: 3px;
padding-bottom: 1px;
font-weight: normal;
color: #000000;
background-color: #CEDFF0;
}

Det gjelder også font-family.

I tillegg kan borders og padding kortes ned til dette:

border: #77779E 1px solid;

padding: 1px 3px;

a.pagecurrent:active {
font-family: verdana, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal; 
color: #000000; 
text-decoration: none;
}

Fargen kan kortes ned til #000, og family og size trengs ikke defineres.

a.pagecurrent:visited {
font-family: verdana, helvetica, sans-serif;
font-size: 8pt;
font-weight: normal; 
color: #000000; 
text-decoration: none;
}

I tillegg må du lese litt om de forskjellige :link, :hover, :visited o.l. Du trenger mest sannsynlig ikke å definere mer enn a og a:hover.

[834HF42F242]

Som sagt i stad, så har jeg tatt utgangspunkt i en annen portal, og alle de kodene du har postet der, er ikke mine.

 

Og du: Ikke belær meg om noe jeg kan. Det var ikke derfor jeg startet tråden. Emne taler for seg selv, og her dreier det seg om Explorer som ikke forstår css på samme måte, og at den for eksempel ikke støtter standarder som css2.

Endret 14. juli 2005 av anth

[Steinmann]

Dette er jo et velkjent faktum, slik frusterasjon kan man vel ta i webkafeen

[haugsand]

At IE ikke støtter CSS 2 i det hele tatt, er bare en myte. Position-egenskapen kom i CSS 2, og støttes delvis av IE.

 

Ang. problemet ditt: Kan du laste opp et kodeeksempel? IE har aldri laget trøbbel for meg når jeg prøver å oppnå det samme.

[pgdx]

Sier det samme som satyrium. Har aldri opplevd den feilen der, ihvertfall ikke i compliants mode.

 

Beklager at jeg "prøver å belære deg om noe du kan", det var ikke meningen, men du kan prøve å skjerpe holdningen din når noen hjelper deg.

 

Kom med noe kode, du, da ser vi kjapt hva du kan og hva du ikke kan, og da kan vi lettere vite hva vi kan hjelpe deg med. Kjører IE i quirks mode?

 

Hvordan posisjonerer du dem? Med float? Og der den ene har width: 70% og andre 30%? Jeg nekter å tro at IE viser de slik da.

[834HF42F242]

Beklager den dårlige holdningen min, men du misforstod startinnlegget. Det er en protest mot Microsoft som enda ikke har gitt ut en verdig nettleser. Jeg kom med et eksempel på hva man kan slite med, mens du tolket eksemplet som om jeg ba om hjelp. Ser jo forøvrig nå at tabeller spiller inn i problemet jeg fikk, for da jeg satte opp noen nye html-dokumenter, så var det ikke mulig å fremprovosere feilen.

 

Angående CSS2 så støtter IE f.eks. ikke

max-width: 100em;

Det er en funksjon som er grei å bruke på foreksempel forumbilder, slik at en forumtråd ikke blir ødelagt med for bred side.

[pgdx]

Det er veldig mye i CSS2 IE ikke støtter (i tillegg til boksmodellen), ja, men de aller fleste CSS-problemene man møter i IE er grunnet Quirks mode.

[Arve Systad]

Det er ein del funksjonar vi manglar i IE, ja, men det går likevel an å designe sider som fungerer i den nettlesaren om ein berre veit kva ein skal gjere, så sjølv synest eg ikkje at "IE støttar ikkje X" er god nok grunn til å syte over at ein layout ikkje virkar.

[Beatnut]

Sikkert litt off-topic dette her, men rent prinsippmessig bidrar du til å holde liv i IE ved å tilpasse dine sider til den, akkurat på samme måte som at en del nettsider som for eksempel Hennes & Mauritz, utelukker andre nettlesere ved kun å tilpasse siden til IE.

 

Utover det kan jeg jo kanskje komme med noen av mine erfaringer med tanke på CSS. Jeg er ikke sånn kjempeflink på CSS og har ennå ikke skrevet sider tilpasset CSS2.

Til redigering har jeg brukt Dreamweaver som jeg synes har gjort det enklere å forstå prinsippene bak CSS.

Ved flere anledninger har jeg opplevd at Div-tagger som tilsammen skal fylle en side i bredden, legges under hverandre. Grunnen er at jeg har hatt pixel-definerte kantlinjer mellom taggene. Dermed har jo den 1 eller 2 pixel tykke linja hjulpet til å lage surr i koden mellom % og px. Håper at dere nå forstår hva jeg mener.

Det er sikkert ikke det som er problemet her, men det ligner litt kanskje? Hvem vet?

[834HF42F242]

Sikkert litt off-topic dette her, men rent prinsippmessig bidrar du til å holde liv i IE ved å tilpasse dine sider til den, akkurat på samme måte som at en del nettsider som for eksempel Hennes & Mauritz, utelukker andre nettlesere ved kun å tilpasse siden til IE.

Så lenge over 60% av mine besøkende bruker IE, så kan jeg ikke utelukke dem. Folka vet ikke bedre, og da er det veldig irriterende at Microsoft ikke gir dem en skikkelig oppdatering med ny IE, minst versjon 8.00.

[Beatnut]

Sikkert litt off-topic dette her, men rent prinsippmessig bidrar du til å holde liv i IE ved å tilpasse dine sider til den, akkurat på samme måte som at en del nettsider som for eksempel Hennes & Mauritz, utelukker andre nettlesere ved kun å tilpasse siden til IE.

Så lenge over 60% av mine besøkende bruker IE, så kan jeg ikke utelukke dem. Folka vet ikke bedre, og da er det veldig irriterende at Microsoft ikke gir dem en skikkelig oppdatering med ny IE, minst versjon 8.00.

Jeg er strengt tatt enig med deg selv om det ikke virker sånn på innlegget mitt over. Bruker selv Maxthon som kjører på IE sin motor rett og slett fordi jeg er lei av sider som er IE-kompatible med feil kode sånn at de ser dårlig ut i FF og Opera.

[834HF42F242]

Enig med deg ja. Det jeg alltid har i tankene, er at sidene skal se mest mulig like ut i Opera, Firefox og IE.

[Steinmann]

Det eneste jeg ekskluderer ifra IE er eyecandy som sikkert hadde vært mulig i IE hadde jeg brukt javascript osv. Men ser ikke eyecandy som en kritisk del av siden, derfor blir det som en bonus for de med en kapabel UA

 

Somregel kan man få sidene like ved å bruke litt prioriterte verdier, underscore, og list

[pgdx]

!important er jo en gjenganger

[Sono Juventino]

Hva er å kjøre IE i quirks mode og compliants mode?

 

Har selv sjeldent problemer når jeg lager sider, men det kommer kanskje av at jeg har laget 7-10 sider og dere sikkert har laget rundt 100-200.

(sikkert litt mer avanserte enn mine også da.)

Endret 16. juli 2005 av ett

[pgdx]

Anbefaler å lese Wikipedias kritikk mot IE.

 

Og denne om Trident.

Endret 16. juli 2005 av drange_net

[Sono Juventino]

skjønner.