19 svar · 3 457 visningar · startad av Forcevision
Tjabba !
Fattar inte detta hur kan min hemsida se olika ut i olika webbläsare. Kollade i firefox nu och hemsidan är perfekt. Sedan kollar jag i internet explorer och där är divarna inte alls rätt. Hur fixar man detta så det ser lika ut i olika webbläsare ?
/Force
En URL till sidan skulle hjälpa. ;)
Sen kan du använda sökfunktionen så kommer du få upp hundratals trådar som tar upp det här, tillsammans med information om hur man löser det.
Är ju inte konstigt, webbläsarna har egna tolkningar med hur w3c har beskrivit hur element skall bete sig. IE har exempelvis css egenskaper på body+HTML elementet som ger extra utrymmer, IE tolkar hur bredd+padding skall fungera
Tjabba !
Fattar inte detta hur kan min hemsida se olika ut i olika webbläsare. Kollade i firefox nu och hemsidan är perfekt. Sedan kollar jag i internet explorer och där är divarna inte alls rätt. Hur fixar man detta så det ser lika ut i olika webbläsare ?
/Force
Som voigtann skrev: Olika webbläsare tolkar kod olika. Tyvärr.
Om skillnaden är liten eller acceptabel så skiter du i det eftersom användarna i princip aldrig jämför en sajt i olika webbläsare.
Eller så kollar du upp något som kallas "conditional comments" (ofta förkortat "cc"). Lägger du in sådana "mellan" din vanliga stilmall och sidornas källkod så kan du styra utseendet i en eller flera webbläsare som inte uppför sig som du vill.
Exempel:
Om jag har en div som heter "min-container" som ligger perfekt i alla webbläsare utom i IE6 så kan jag göra så här i sidornas head:
<head>
<link rel="stylesheet" href="min-ordinarie-stilmall.css" />
<!--[if IE 6]>
<style type="text/css">
#min-container
{margin:30px;}
</style>
<![endif]-->
</head>
Där ligger cc för IE6 "mellan" den ordinarie stilmallen och koden. När sidan öppnas med en IE6 så får divven en marginal som är anpassad till den webbläsaren istället för den ordinarie marginalen.
Sen kan du använda sökfunktionen så kommer du få upp hundratals trådar som tar upp det här, tillsammans med information om hur man löser det.
Om TS följer det rådet så kommer h*n säkerligen hitta nedanstående rekommendation:
Använd en reset-css
Kolla bara in HTML boilerplate så få man reda på en massa tips
Finns ingen mening att man använder sig av en standard som w3c om inte alla följer den tycker jag då är det ingen standard eller ? :)
Finns det inte så man kan fixa en css mall till olika webbläsare ?
IE är webbläsarnas svarta får. Det finns en hel del buggar och problem som man behöver kringgå på olika sätt. När det gäller positionering så är väl det vanligaste problemet IE's box model
Värd läsning: 9 Most Common IE Bugs and How to Fix Them
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
Finns ingen mening att man använder sig av en standard som w3c om inte alla följer den tycker jag då är det ingen standard eller ? :)
Microsoft sket mer eller mindre i w3c - trots att dom sitter med i ledningen. Dom hade ju i princip monopol. Nu anstränger dom sig bättre.
Finns det inte så man kan fixa en css mall till olika webbläsare ?
Eh... läste du mitt inlägg ovan?
IE är webbläsarnas svarta får. Det finns en hel del buggar och problem som man behöver kringgå på olika sätt. När det gäller positionering så är väl det vanligaste problemet IE's box model
Värd läsning: 9 Most Common IE Bugs and How to Fix Them
http://net.tutsplus.com/tutorials/html-css-techniques/9-most-common-ie-bugs-and-how-to-fix-them/
Yes det är detta jag har problem med. Men om jag inte missminner mig finns det så man kan göra en egen css mall till tex internet explorer eller ?
<!--[if IE 6]>
<link rel="stylesheet" href="ie6-styles.css" />
<![endif]-->
Eller lös det med en css fil och kolla hur boilerplate löser IE probelm, känns extremt onödigt att tvinga IE användare att ladda ännu ett http request för css...
..känns extremt onödigt att tvinga IE användare att ladda ännu ett http request för css...
"extremt"? Heh...hade det varit när man satt uppkopplad med 256Kb/s hade det varit "extremt". Nu tar det en hundradels sekund och märks inte. ;)
Det är inte storleken jag bryr mig om, det är att det kräver ett extra anrop till servern, vilket jag hade offrat på något annat för de som sitter med en långsamwebbläsare som IE.
Samma sak gäller all CSS, du vill undvika så många HTTP anrop som möjligt en sida är snabbare + snällare mot webbservern.
.. och om man kastar in en vettig reset-css (tex Eric Meyers) överst i sin Css fil så klarar man sig i 9 fall av 10 utan en massa hacks och contitional comments, (iaf sålänge man inriktar sig på moderna browsers. vill man bygga för IE6 så är det en annan sak...)
Ovan nämda reset är ca 1kB stor, MEN å andra sidan brukar man kunna slippa ungefär samma kodmängd i sin övriga css eftersom man slipper sitta och skriva "margin:0; padding:0; yadda:hoppla;" på varenda element man vill styra.
Vad är en reset-css ?
Vad är en reset-css ?
Alla webbläsare har egna standard CSS:er en css-reset (kan nog lugnt säga att Eric Meyers är "skaparen" för uttrycket) som nollar alla element till alla webbläsare så du har samma utgångsläge för CSS:er
Okaj !
"extremt"? Heh...hade det varit när man satt uppkopplad med 256Kb/s hade det varit "extremt". Nu tar det en hundradels sekund och märks inte. ;)
Sedan kan man ju alltid sammanföra alla css-filer till en enda fil och även använda en css-minifier (det samma gäller givetvis js-filerna).
