CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

qub- Novice

06. april 2009 - 14:51 Der er 22 kommentarer og
1 løsning

Fungere i firefox, men laver fejl i IE6

Hej alle eksperter.

Jeg har altid opbygget mine side med tables, men fik lyst til at prøve at bygge en op i ren css - så jeg har læst en masse tutorials, og fået lavet en del..

Nu kommer problemet så bare - det jeg har lavet ser ud som det skal i firefox (min standard browser), men da jeg ville teste i IE så det ud af lort..

Så hvad skal jeg rette i min kode for at det kommer til at se ens ud i begge browsere? (for ikke at sige alle browsere??)

firefox screenshot:
http://imageload.dk/files/60e186d8fa7ff34d9ab675e20c4d4a00.jpg

Internet Explore 6.0 screenshot:
http://imageload.dk/files/146097ff12678e89d9d85942897a5a06.jpg

Har smidt koderne ind i pastebin, så det ik ser så voldsomt ud herinde..

min index.html:
http://pastebin.com/m5b986fa5

min style.css:
http://pastebin.com/m32b0b4ef

Men det der ser ud til at være galt er altså at den "overwriter" min ".nav a {", med min alm "a {".
Og så er det jo være mine: .left-content-mid, #left-content-top og #left-content-bot den også er galt med (hvis det bliver lavet - kan jeg jo selv rette til resten af boksene..)

Håber meget i gider hjælpe..

// Casper Skou

Synes godt om

OskarRough Nybegynder

06. april 2009 - 15:02 #1

Den overskriver dit link, fordi du angiver "a" i stedet for at bruge pseudo-klassen "a:link". Jeg bruger for det meste flg.:

a:link, a:visited {}
a:hover {}

--

I din .left-content-mid har du angivet en width og padding-right og padding-left (8px begge steder).

Nærmest alt undtagen IE6 sætter padding _uden på_ din width. Det vil sige, at de 433px bliver til 433px+16px.

IE6 derimod siger 433px-16px som din faktiske bredde. Måden du undgår problemet på er aldrig at sætte padding left/right på et element med fixed width. Sæt det derimod på et children element.

Det kunne f.eks. være .left-content-mid .inner, hvor .inner bare er en div med din padding-left/right.

--

Men det er altid meget lettere, hvis du kan give et live eksempel!

Synes godt om

qub- Novice

06. april 2009 - 15:23 #2

har smidt padding ned i ".left-content-mid p{"

Men det ændre ikke på at den stadig laver luft mellem ".left-content-mid" og den oppe over, og nedenunder.. Samt viser top og bottom bar mere end 1 gang..

Kan ses live her:

http://qub.dk/gtm/index.html

Synes godt om

OskarRough Nybegynder

06. april 2009 - 15:46 #3

I stedet for at skrive background-image: url(blablabla...) skriver du:

background: url(image.png) no-repeat;

Så gentager de sig ikke. Og med at sætte det på p tags er det lidt svært i længden, fordi du sikkert vil have alt muligt andet (og mere) end bare p tags. Så det er nemmere at lave en .inner boks.

IE6 har problemer med højder mindre end line-height (som standard er 12px). Derfor kan du prøve at tilføje line-height: 0; på både din top og bottom bar.

Synes godt om

OskarRough Nybegynder

06. april 2009 - 15:47 #4

Og hvis ikke line-height: 0; virker for dig, så skal du prøve font-size: 0px; (husk at medføre px, ellers gider IE6 ikke altid)

Synes godt om

qub- Novice

06. april 2009 - 15:58 #5

den viser kun background 1 gang nu.. så det er på plads..

men hverken line-height eller font-size virker.. Dog bliver der MINDRE luft med font-size 0px, men der er stadig luft imellem billederne...

Synes godt om

zips Juniormester

06. april 2009 - 16:13 #6

Husk at id er unikt og kun må findes en gang på siden, så ret alle dem som gentager sig med en class :-)

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fqub.dk%2Fgtm%2Findex.html

Synes godt om

qub- Novice

06. april 2009 - 16:22 #7

årh ja selvfølgelig zips.. Det har jeg gjort nu - men har dog ik ændret på nogen af fejlene :)

Synes godt om

OskarRough Nybegynder

06. april 2009 - 16:29 #8

Hov, glemte at sige, at du nok bør bruge overflow: hidden; sammen med font-size: 0px; line-height: 0px;

Virker det for dig?

Synes godt om

qub- Novice

06. april 2009 - 16:35 #9

har både prøvet dem seperat og allesammen sammen.. Virker stadig ik.. der er lige de der ca 5pixels den ik vil rykke sammen :/

Synes godt om

OskarRough Nybegynder

06. april 2009 - 17:53 #10

Gider du putte line-height: 0px; font-size: 0px; overflow: hidden; på både top og bottom og opdatere på dit live-eksempel?

Synes godt om

qub- Novice

06. april 2009 - 19:09 #11

det har jeg gjort nu.. på de 2 bokse i venstre side

Synes godt om

OskarRough Nybegynder

06. april 2009 - 20:37 #12

Du har glemt at anføre px. Orker desvære ikke at lave mit eget eksempel lige nu =)

Synes godt om

zips Juniormester

06. april 2009 - 20:39 #13

Er det noget i denne stil http://zips.be/exp/test/qub/

Synes godt om

qub- Novice

06. april 2009 - 20:59 #14

hmm ja zips, det ser rigtigt ud i IE.. Men kan sku ik lige se i koderne hvad det er du har lavet om???

Synes godt om

zips Juniormester

06. april 2009 - 21:28 #15

Prøv at sammenligne med disse filer http://zips.be/exp/test/qub/index.zip da jeg har lagt en div rundt om hele left, rettet i css osv.

Synes godt om

OskarRough Nybegynder

06. april 2009 - 22:01 #16

Zips, rundt om hvad? Kan ikke lige se det. Og hvad var fejlen mere specifikt? Eller løste det sig selv, efter du ryddede op?

Synes godt om

zips Juniormester

06. april 2009 - 22:09 #17

Jeg har lagt en div omkring <div class="left-top"> nr 2 så den hiver bunden op, det samme på nr 2 <div class="right-top"> samt indsat en <div style="clear:both;"></div> i bunden af footer så login bliver på en linje

Mener resten er rette i css.

Synes godt om

qub- Novice

07. april 2009 - 15:34 #18

hehe ja, det er jo ik sådan når man begynder at lærer nye ting.. så kommer der jo fejl.. :P

Men en sidste fejl på siden, er at min ".nav a:link {" ikke virker.. min almindelige "a:link {" overwriter den åbenbart.. men hvorfor gør den det?

Synes godt om

qub- Novice

07. april 2009 - 15:35 #19

OG.. Hvad gør den der .js fil?

Synes godt om

qub- Novice

07. april 2009 - 18:35 #20

Never mind mht ".nav a:link {" problemet.. Det var en dum fejl hvor jeg bare havde sat de forkerte farver sammen :P

Men vil stadig gerne vide hvad .js filen gør?

btw. et tilægs spørgsmål.. Så vidt jeg har forstået er der kun right, og left float.. Så i min footer har jeg måtte bruge padding for at centrere teksten..
Men er der ik en smartere måde at få det centreret på ??

Synes godt om

OskarRough Nybegynder

07. april 2009 - 23:31 #21

Hvis du vil centrere et block-element bruger du "margin: 0 auto;" som er en genvej for at have left- og right margin til auto.

Hvis det bare er teksten, kan (og bør du) nøjes med text-align: center;

Synes godt om

qub- Novice

09. april 2009 - 20:51 #22

hmm oka.. jeg prøver at lege med det :)

I vil vel os gerne ha lidt points som tak for hjælpen, så laver i ikke lige et par svar..?

Håber det er ok i deler points..

Synes godt om

qub- Novice

11. april 2009 - 18:00 #23

hmm... ? Hvis i ikke vil ha dem så lukker jeg tråden...

- gir det lige lidt tid endnu...

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51
Link fra form input Af jnrmgs i HTML	9	19/09/202319:10	23/09/202313:11
includere i HTML Af slein55 i HTML	3	15/09/202313:47	16/09/202309:40

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS