Gå til innhold

Hvordan håndtere forskjeller i px verdier mellom firefox og andre browsere

dahwan

Anbefalte innlegg

dahwan

dahwan

Skrevet
Skrevet

Jeg lager et nettsted til en klient gratis (en beskjent) og har noen problemet med relative position i css. I browsere som Opera, Chrome og Safari funker alt pent. Men FireFox skal alltid pixel verdier mene noe annet enn i de andre browserne, så elementer blir feil plassert. IE har jeg gitt opp å støtte fullstendig siden IE 9 er rett rundt hjørnet og siden ser ut som et bilkrasj i IE 8.

 

Løsningen jeg planlegger er å legge inn en feilmelding i IE og be brukeren laste ned en skikkelig browser, og fikse en egen css fil til FireFox som lastes inn med javascript. Vet at denne løsningen er uelegant og ganske dum, men kan ikke komme på en bedre løsning.

 

Så det jeg lurer på er om det finnes en bedre løsning enn relative position til å ordne layouten på en side, som kanskje alle browsere (selvfølgelig untatt IE) takler helt likt.

 

Hva synes dere om dette problemet?

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
ventrec

ventrec

Skrevet
Skrevet

Jeg synes du skal gå gjennom koden din skikkelig og få den validert. Når det er gjort så vil den mest sannsynlig fungere i alle nettleserne. Selv om IE er en crappy nettleser blir det for dumt å nekte adgang for IE-brukere, ettersom det fortsatt er den mest brukte nettleseren.

Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet

Det skal egentlig ikke være noe forskjell? Har ihvertfall ikke vært borti det før(tenker da på mellom Opera, Webkit, FF).

 

Mener jeg har hørt noe om at FF teller ikke border med i høyde og bredde. Altså hvis du har en bredde på 400 px, og en border på 5px så er egentlig diven 410px bred. Mulig jeg husker feil, eller at det var omvendt? :p

Lenke til kommentar
dahwan

dahwan

Skrevet
  • Forfatter
Skrevet (endret)

Her er w3 validator resultatene

 

index.htm: http://validator.w3....lidator%2F1.767

 

layout.css: http://jigsaw.w3.org...rning=1&lang=en

 

fonts.css: http://jigsaw.w3.org...rning=1&lang=en

 

misc.css: http://jigsaw.w3.org...rning=1&lang=en

 

 

Alt får 100%

 

Men side ser ut som et bilkrasj i IE fremdeles. Kan noen belyse meg i hvorfor siden ikke vil funke i IE8 ?

 

Takk for all hjelp :)

EDIT: Just for the hell of it har jeg lagt med et bilde om hvordan bildet ser ut i Internet Explorer, og hvordan det kommer til å se ut i Internet Explorer 9. I ingen av dem ser det bra ut. Er det noe spesifikt i css jeg gjør som IE ikke liker? Takk

 

post-97622-1275756698,3066_thumb.png

Endret av dahwan
Lenke til kommentar
4588pkdkrikue5c

4588pkdkrikue5c

Skrevet
Skrevet (endret)

No har ikkje eg sett kjeldekoda di, men somregel har nettlesarene noko individuelle marginar og paddings. Berre fjern denne først som sist med denne lille kodesnutten i CSS.

body {
margin:0px;
padding:0px;
}

* {
margin:0px;
padding:0px;
}

 

Det bruker å fikse biffen for meg. :)

Endret av steffenz
Lenke til kommentar
Kaptein Snus

Kaptein Snus

Skrevet
Skrevet (endret)

Fant ut hvordan du kan få menyen til å fungere, med jQuery, i IE 8 ihvertfall ;)

 

Hvis du bytter ut setPage() funksjonen din i main.js med

 

(function($) {

$(document).ready(function() {

	$("#navigation a").click(function() {

		$("#content > div:not('.invis')").each(function() {
			$(this).addClass("invis");
		});

		var href = $(this).attr("href");

		$(href).removeClass("invis");

		return false;

	});
});

})(jQuery)

 

og inkluderer 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

som det første javascript elementet i <head>, og deretter bytter ut alle linkene med id til divene

<div id="navigation">

<a href="#home">
	<span class="menuitem">HOME</span>
</a>


<a href="#portfolio">
	<span class="menuitem">PORTFOLIO</span>
</a>


<a href="#cv">

	<span class="menuitem">CV</span>
</a>

</div><!-- end navigation -->

 

Så skal det fungere ;)

 

Det går sikkert ann å gjøre dette med vanlig javascript og, men jeg er ikke så rutt på raw javascript :p

 

 

EDIT: Har fikset det meste av CSS feil også. Si ifra hvis du vil ha en forklaring ;)

Endret av Lek1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste
×
×
  • Opprett ny...