Avatar billede pablopablo Nybegynder
17. januar 2008 - 18:23 Der er 11 kommentarer og
1 løsning

IE vs. FireFox

Hejsa...

Min side vises helt som jeg ønsker den i Internet Explorer, men mange ting formateres og placeres anderledes i FireFox.

Hvordan løser jeg dette bedst muligt?

Mvh. PabloPablo
Avatar billede pidgeot Nybegynder
17. januar 2008 - 18:32 #1
Start med at sikre at både CSS og HTML er valid, og at din side ikke benytter Quirks Mode.

Hvis det ikke er nok, så må du eksperimentere lidt med defintionerne på det du har. Det er ikke til at sige specifikt hvad du skal arbejde på, da vi ikke kan se siden.

Hvis du ender med kun at kunne få det til at virke i Firefox, kan du bruge conditional comments til at give IE en ekstra CSS-fil der overskriver ting i den "globale" CSS-fil.
Avatar billede pablopablo Nybegynder
17. januar 2008 - 22:58 #2
Min site er valid XHTML Traditional 1.0...

Hvad er: Quirks Mode?

Det virker i IE...så det med at det pludselig kun virker i (FireFox)FF. tror jeg ikke sker... :)

Hvordan benyttes "conditional comments" - fx. til at ændre det så FF. også kommer til at virke...?
Avatar billede pidgeot Nybegynder
17. januar 2008 - 23:40 #3
Du sagde ikke om din CSS var valid. *-)

Quirks mode er en alternativ måde en browser renderer HTML på, der ikke overholder standarderne. Dette er til stede af hensyn til bagudkompabilitet; gamle sider der ikke overholder standarderne vil normalt heller ikke aktivere quirks mode. Quirks mode afviger meget fra browser til browser, og der er i særdeleshed stor forskel med IE. Se desuden http://en.wikipedia.org/wiki/Quirks_mode.

Conditional comments er en måde at skjule noget for bestemte browsere. Du kan kun bruge det til enten at give IE noget de andre ikke vil læse, eller give alt andet noget IE springer over - førstnævnte er klart at foretrække, fordi det stort set altid er IE der skal gøre noget andet. Det er klart den foretrukne måde at give speciel CSS til en specifik browser, da man ellers skal ud i CSS hacks som kan holde op med at virke uden at det man prøver at omgå virker - desværre er det kun IE der implementerer det, hvilket man engang i mellem godt kan ærgre sig lidt over.
Se http://en.wikipedia.org/wiki/Conditional_comment.

Og jo, du kan snildt komme ud for at du på et tidspunkt har noget der virker i Firefox, men ikke gør i IE - de renderer ikke alt på samme måde.
Avatar billede pablopablo Nybegynder
18. januar 2008 - 09:44 #4
hhmm....okay...ja det virker jo ikke som om at det er lige til...

Men de forskellige ting man kan gøre, er det noget man skriver direkte i aspx siden...således at hvis man har et ListView hvor elementerne vises forskelligt IE vs. FF....så skal man faktisk nu have 1 stk listview til både IE. og FF....altså hvis man vil rette tingene op via "conditional comments" ...men hvis det kun er IE. som implementerer det...hvad gør jeg så for at rette op på FF.?
Avatar billede pidgeot Nybegynder
18. januar 2008 - 10:00 #5
Måden man gør det på er at lave to CSS-filer; en der virker med Firefox, Opera, etc. (denne angiver du som det normale stylesheet), og en der overskriver det der nu er nødvendigt at overskrive i den primære fil for at IE også vil rendere siden efter hensigten (hvis den da ikke gør det med det normale - du kan evt. lave endnu en CSS-fil så du har en ekstra med lige netop det IE6 skal bruge, og så bruge conditional comments til kun at levere den fil til IE6).

Den ekstra CSS-fil tilføjer du med et <style>-element i en conditional comment i dit <head>, efter din primære stylesheet-reference. Normalt bruger man @import, men den "normale" måde skulle virke lige så fint.

Hvad du skal lave om for at nå til det punkt, kan jeg af gode grunde ikke sige - for du har på intet tidspunkt vist hverken kode eller side, eller bare nævnt noget om hvordan fejlene viser sig.
Avatar billede pablopablo Nybegynder
18. januar 2008 - 10:20 #6
okay...jeg er nogenlunder med...:) Men skal nok bruge et konkret asp.net 2.0 eksempel med dette...har du et link...til et eksempel/guide...?

Nej siden er ikke online pt. Men det er bla. et ListView komponent hvori div. elementer bliver formateret anderledes i FF...men også bare almindelige ting såsom aligment af tabeller og indholder mv...
Avatar billede pidgeot Nybegynder
18. januar 2008 - 11:11 #7
Det er ikke til at give en guide, for der er ikke et fast sæt rettelser - det er normalt den del du SELV laver der ender med at give problemer, og det kan andre jo ikke tage højde for.

Uden en så specifik fejlbeskrivelse som muligt - det vil reelt sige hvor vi på en eller anden måde kan SE hvordan det går galt, og hvad intentionen var - kan vi ikke engang gætte på hvad der skal ændres.

Så vidt jeg husker kan extensionen Firebug bruges til at lege med CSS'en i Firefox uden at du skal genloade siden hver gang. Du kan prøve dig frem med den ved at ændre styles for de ting der renderer forkert, indtil du har noget der virker - ændringerne tilføjer du så i dit stylesheet.
Avatar billede pablopablo Nybegynder
18. januar 2008 - 11:48 #8
I understand...men nu mente jeg ikke indholdet af div. CSS ...men derimod, hvordan jeg bruger flere forskellige CSS på en kontrol afhængig af hvilken en browser som kører indholdet...
Avatar billede pidgeot Nybegynder
18. januar 2008 - 12:07 #9
Ah - på den måde. Kunne du bare have sagt. :o)

Forestil dig du har en HTML der ligner denne nogenlunde:

<div>
  <div class="menu"></div>
  <div class="content"></div>
</div>

I din CSS-fil har du defineret det her:

.menu {
  float:left;
  width: 200px;
}

.content {
  width: 785px;
  float: left;
  background-image: url("marble.gif")
}

Det ser ud præcist som du forventer når du bruger IE7 eller Firefox, så du er glad og tilfreds.

Forestil dig så du ser siden i IE6, og at content så af en eller anden grund går for langt ud over. Du finder på en eller anden måde ud af at 780 pixels vil være passende, så derfor laver du en ny fil der hedder eks. IE6fix.css, med følgende indhold:

.content {
  width: 780px;
}

I din sides <head> tilføjer du så følgende efter dit normale stylesheet:
<!--[if lt IE 7]>
<style type="text/css">
  @import "IE6fix.css";
</style>
<![endif]-->

...hvorefter alle IE-versioner før IE7 vil indlæse IE6fix.css og lade de ting der er defineret der, overskrive det der er defineret i det normale stylesheet - med andre ord, <div class="content"> bliver 780 pixels bred i netop de browsere, mens den stadig bevarer de 785 pixels i IE7 og ikke-IE-browsere.

Det er med andre ord blot et spørgsmål om at skrive de ting der skal være anderledes i en CSS-fil.
Avatar billede pablopablo Nybegynder
18. januar 2008 - 13:16 #10
aha! Ja det forklare mere ;)
Mange tak for det, jeg kigger lige nærmere på det senere og så vender jeg tilbage!
Avatar billede pablopablo Nybegynder
26. marts 2008 - 10:48 #11
Hej igen...læg blot et svar ;)
Avatar billede pidgeot Nybegynder
26. marts 2008 - 11:43 #12
Værsgo :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
IT-kurser om Microsoft 365, sikkerhed, personlig vækst, udvikling, digital markedsføring, grafisk design, SAP og forretningsanalyse.

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester