Avatar billede melange Nybegynder
08. maj 2004 - 22:26 Der er 4 kommentarer

IE optimering

nu har jeg de sidste par dage brugt min, alt for lille, overskudstid til at lave en hjemmeside. Eller, en hjemmeside er måske så meget sagt, for det er vel egentlig kun "strukturen" som er lavet ind til videre. Permanente farver er der ikke lagt noget af, og logoet er rent faktisk ripped direkte fra en anden side! (Dog kun fordi jeg skulle kunne tilpasse menuen, da jeg havde tænkt mig et logo med samme "form". Med andre ord, det forsvinder igen).
resultater kan ses her (i Firefox altså ;) )
http://bottiger.com/aspx/design_v2.html

Men da jeg åbnede IE og kiggede på den fik jeg mig en alvorlig forskrækelse :) og jeg har nu brug for lidt hjælp til at optimere den.

Folk som bruger FireFox kan jo selv se hvad der skal rettes, men her er en kort liste (i prioriteret rækkefølge):

*Der skal gøre et eller andet ved selve "hovedboksen" toppen af den er placeret på samme vandrette plan som den øverste, orange, boks. Desuden må man meget gerne kunne se kanten hele vejen rundt om, men det kommer vel af sig selv :)
*menuen skal flyttes ned i højre hjørne, hvor der er gjort plads til den.
*Den hvide <div> som hele siden ligger i, skal flyttes ind på midten af skærmen

Alt dette skal selvfølgelig kunne klares uden at det går ud over oplevelsen i FireFox :)

NB! Det ville selvfølgelig også være rart med runde hjørner på boksene i IE, men da IE ikke understøtter den slags, og jeg ikke har tænkt mig at blande billeder ind i det, må det springes over :(

på forhånd tak

// Arvid Böttiger
Avatar billede roenving Novice
08. maj 2004 - 22:44 #1
Tjah, du er ikke den første, som har oplevet det ...

Det første er, at IE svjv går i quirks-mode, når doctype ikke står fysisk først i filen (har ikke selv været igennem det, men set en masse bemærkninger om det !-)

margin:auto er ikke understøttet af IE, til gengæld vil en text-align center også (fejlagtigt iflg. standarden !-) centrere block-level elementer, så en konstruktion à la:

body{text-align:center}
#container:{margin:0px auto;text-align:left;}

er nødvendig !-)

Men tag og kig videre på index dot css, så du kan finde rundt i kompatibiliteten:

http://blooberry.com/indexdot/css/index.html

(der var jo lige en masse linjer i style, som jeg ikke lige gad debugge, men hvis du spørger lidt langsommere, er jeg helt med på svarer-holdet !-)
Avatar billede melange Nybegynder
09. maj 2004 - 00:34 #2
nå ja, glemte hvor svært det er at blive klog på andres koder :)

Problemmet menuen virker i hvert fald ret simpelt, dog har jeg stadigvæk ikke fundet en metode som virker i både IE og Firefox.

Jeg har en <div> hvori der står en linje tekst, jeg gerne vil have ned i højre hjørne. Ind til videre blev det løst ved at smide disse linjer ind i <div>'ens klasse:

display: table;
text-align: right;

og derefter smide teksten ind i en <span> som jeg tildelete disse egenskaber:

display: table-cell;
vertical-align: bottom;
/* og en masse formatering */

Jeg må indrømme jeg ikke er den stre CSS-haj, og aner faktisk ikke hvad "display: table;" gør. Jeg fandt den bare i et eksempel inde på w3c.
Men uanset hvad, så æder FireFox koden, mens IE får den galt i halsen.


Problemmet med den store hovedboks er straks mere kompliceret. Det hele startede med at jeg havde problemmer med at placere den ved siden af de to små bokse. Jeg fik så lidt hjælp herinde (http://www.eksperten.dk/spm/496683), og så ved jeg ikke meget mere :)
Uden at pt. have mulighed for at prøve efter, så mener jeg næsten kun det kan være:

margin-top:-180px;
(hele style koden til hovedboksen står i det spørgsmål jeg linker til)

som laver rod i det, men uden den gider de to <div>'s (store og lille boks) stå ved siden af hinaden :|

håber det hjælp på forståelsen :)
Avatar billede roenving Novice
09. maj 2004 - 01:07 #3
Til den første ville jeg bemærke, at en faktisk ikke _må_ indeholde et block-level element som en div, så også Mozilla er gået i quirks-mode (hvis jeg har forstået dig rigtigt !-)

-- jeg fulgte ikke så meget med 496683 (jeg så den først langt inde i debatten !-), men hvis jeg skulle lave noget, som ligner to spalter, ville jeg lave to divs, som floatede ved siden af hinanden ...

-- og så var det ikke fordi din kode var specielt svær at tyde, men man skal skrue debug-hovedet rigtigt på, når man skal sammenholde hvad der sker over flere skærmsider, og det gjorde jeg så ikke !o]

Iøvrigt reagerer selv IE rigtigt på bottom:0px; og right:0px; hvis der er den rigtige dtd på ...

-- og kig videre inde på index dot css !-)
Avatar billede roenving Novice
09. maj 2004 - 01:08 #4
Første linje: .. at en span faktisk ikke ...
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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