CSS design til flere browsere - diverse småting

*billedet i kanten:
Når du vil have et billede til at fylde helt ud skal du sætte width/height attributter på den.
Hvis det felt du har billedet i er 50 px * 50 px, skal billedet også være 50 px * 50 px.

Jeg har ikke tid til at fejlfinde det hele, kun lige hvad jeg kan sige og se med det samme.  Men røde felt.
Du skal prøve at lave en CSS difination til alle elementer som ser sådanne ud:

* {
text-decoration: none;
list-style: none;
padding: 0px;
margin: 0px;
}

IE overholder ikke standarden, og vil derfor vise meget anderledes i forhold til Firefox.  Når man arbejdet med IE er det altid en god ide, at have sådanne en difination som vist ovenfor. 

*Den sorte kantlinie vil sansynligvis ændre sig hvis du bruger ovenstående difination.  Men det er ikke sikkert.


en generel kommentar til dig.


jeg synes at du er godt på vej med dit CSS, og dit HTML.  Der er nogle små ting man kunne gøre bedre, og benytte det korrekte tags til opgaven.

F.eks så er <div> tagget lavet til at difinere en sektion på hjemmesiden, ikke andre ting.

Jeg kan godt lide at du ikke bruger tables, fordi at det er også forkert.  Standarden siger at tables bruge til at vise data tabulært, og ikke andet end det.  Hvis man bruger tables til at designe en hjemmeside med, så har man misforstået et eller andet. 
Tables er også langsommere, og bruger langt mere hukommelse hos brugeren, da tables fyldet en del mere i rammen, end <div> tags f.eks.  Fordi at man altid skal skrive så meget for at få så lidt med tables.

Jeg har forsøgt med de ændringer du foreslår, men uden særlig effekt.

Jeg mistænker at jeg tænker/regner forkert med pixels, width, borders margin og padding.

En ting du skal være klar over er at Firefox og IE rendere HTML´en forskelligt.  For at komme hurtigt over det, så hedder det BoxModel. Evt tag og søg på google efter Boxmodel.  Der kan du se hvordan padding, margin osv, er plaseret. 

Men du har sikkert ret i hvad du siger, at dine pixel beregninger trænger til justering.  Men du kommer nok ikke uden om at lave 2 forskellige stylesheets, hvor det ene er til IE og det andet Firefox.

Den nemmeste måde at konstrutere disse på, er at designe sin hjemmeside til Firefox, og så i et særskilt CSS dokument, skrive de enkelte CSS difinationer som får det til at se lækkert ud i IE.

I toppen på din hjemmesiden (i koden), indsætter du dette:

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="screen" href="iefix.css" title="my_page" />
<![endif]-->

Du skal være opmærksom på dette:

har du f.eks en CSS difination som hedder:

#main_menu {}

Og menuen ser underlig ud i IE, så skal du tilsvarende tilføje samme CSS difination til dit iefix.css dokument.

Alt CSS glider sammen til en, når det er samlet alt sammen eller man kunne sige, når alle CSS dokumenter er inkluderet til siden.


Derfor er det også vigtigt du sætter denne således:

<link rel="stylesheet" type="text/css" media="screen" href="my_real_css_document.css"

<!--[if IE]>
    <link rel="stylesheet" type="text/css" media="screen" href="iefix.css" title="my_page" />
<![endif]-->

Fordi så inkludere du det originale først, og derefter tilføjer du de "fixes" som IE har brug for.

Det er meget sjældent at alt CSS sal udskiftes.

Det er meget normalt at de ændringer der skal laves er noget ala..

(kun et eks)

Original:
#navn {
margin: 10px;
}


IEFix:
#navn {
padding: 10px;
}

IE har det med at gøre padding til margin nolge gange, men det er igen fordi at IE ikke overholder boxmodel. 

Håber du finder ud af det.


<< OBS >>

Jeg samler ikke på points.

<ole>

Når du har kollonner, der skal være synkroniseret i højden - det være sig linier, der skal være på højde eller kollonnerne, der skal være lige høje, er tabellen det eneste fornuftige element at bruge.
Nogen påstår - og uden nogen somhelst dokumentation - at tabeller skulle være langsommere end divs. Det er som sagt ganske udokumenteret vrøvl ... ikke mindst fordi, CSS-koder (og ofte JavaScripts), der er nødvendige for at få divs til at opføre sig som tabeller, fylder langt mere.

Desuden er der stort set ikke forskel på FF's og IE's tolkning af box-modellen, når man blot sørger for at bruge den korrekte DTD - og det gør du jo.
Det har heller intet at gøre med, at IE skal have padding i stedet for margin ... det er noget sludder.

Brug de elementer, der er beregnet til de enkelte opgaver. Det giver god, velfungerende, overskuelig og valid kode  ;o)

/mvh
</bole>

Øv.

Jeg kender boxmodel-problemet, men mangler blot en nem måde at løse det på en gang for alle ;-)

Der er nok som du skriver ingen anden udvej end at lave tilpassede stylesheets.
Jeg kigger videre på det i morgen, og holder tråden åben indtil jeg har en fungerende løsning.

Tak for dine kommentarer.

radiv >> Hvad er det helt præcist, du mener, skulle have noget med box-modellen at gøre? Den væsentlige forskel på FF og IE6 er, at når du ikke bruger den fulde DTD, kan IE ikke tolke modellen - med den fulde DTD, tolkes modellen stort set korrekt af IE.
Du kan selv teste, om din kode er CSS-kompatibel i en bestemt browser med:

<script type="text/JavaScript">
  alert(document.compatMode);
</script>

Den returnerer 'CSS1Compat', hvis browseren overholder CSS-standarden rimeligt - og 'backCompat', hvis ikke (dog returnerer Opera 'quirksMode' i sidste tilfælde).

Du kan evt. læse mere om DTD og CSS-kompatibilitet i IE6 her:
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Jeg kan så tilføje at jeg har gået et skridt tilbage i rætning mod tabeller, dog stylet med css.
Der er en klar forbedring i forhold til det oprindelige design, med flere nestede tabeller og rammer i rækker og kolonner. Nu er det en meget enkel tabel, med 4 rækker og 3 kolonner.

Betydelig mere overskuelig end den rene css-version, kan jeg også tilføje.

Jeg lukker, så kom med svar, dem der samler på point.
Tak vb2, jeg skulle ønske browser-realiteten var at css var den endelige løsning på design, men det er jo lov at håbe at det kommer.

Det lyder yderst fornuftigt - og du er da også helt på linie med W3C's anbefalinger  ;o)

De anbefaler nemlig ikke, man 'panisk' holder sig fra tabeller, men at man derimod bruger de elementer, der bedst løser den enkelte opgave - også når dette er en tabel.

Det, de advarer imod, er de kæmpe, nestede tabelhelveder (holdt på plads af et hav af transparente giffer), der op gennem 90'erne var eneste realistiske 'layout-værktøj'.

- og lad mig afslutningsvis lige rette endnu en misforståelse:
HTML er ét sprog - CSS er et andet ... og de to kan helt forskellige ting. HTML definerer en del elementer, man kan bruge på sin web-side. CSS bruger man til at placere og 'udsmykke' HTML-elementerne med. CSS indeholder _ingen_ elementer.

Derfor er der absolut ingen modsætning mellem brug af CSS og brug af tabeller. Et 'rent CSS-design' (hvad det så end er), kan med andre ord sagtens indeholde både div, span, tabeller og alle mulige andre HTML-elementer ... blot de er stylet med CSS

Jeg er med på det du skriver, og når jeg kalder det et 'rent CSS-design', tænker jeg på et design der det først og fremmest er styles der bestemmer placering og udseende, i modsætning til tabelhelvede som du kaller det.

Jeg mener fortsat at det er en pointe at undgå tabeller som placeringsredskab, men det kan i mange tilfælder gå på bekostning af produktivitet, overskuelighed og kompatabilitet. Derfor vælger jeg denne løsning, og med designet ude af verden, kan jeg fortsætte med det sjove - indholdet!

Vi er vist i det store og hele enige. Mellem to dybe grøfter ligger ofte en god vej  ;o)
Tak for points  :)