[LØST] IE 6 kompatibilitet!

[howieD]

Det er dumt å mase enda mer om CSS/IE6/IE7/firefox/opera og what-not.

 

Men jeg sliter veldig med å finne ut hvorfor designet mitt viser innholdet feil.

Jeg har forsøkt å sette display:inline på alle divs med marginer fordi dette var en anbefalt måte å rette en bug på.

 

jeg vil få websiden til å se bra ut i IE6.

Det er ingen problemer med noen andre nettlesere, men det er altså IE6 som er problemet.

 

Linken til websiden er her

 

Designet er ikke helt ferdig, men det er ikke utseendet jeg ønsker tilbakemelding på.

Det blir ferdig etterhvert.

 

Edit:

 

Begynner å nærme meg IE6 kompatibilitet nå.

Koden har blitt mer oversiktlig som følge av tipsene fra "semafor".

Takk

Endret 23. januar 2008 av Haavard82

[semafor]

Ikke sett display: inline på alle divs med marginer. Display inline kan brukes til å ta knekken på enkelte float-bugs i Internet Explorer 6, men ikke på hva som helst.

 

Koden din er so-so. Jeg tror du kan starte på nytt med en enklere struktur som minner mindre om gammeldagse tabelldesign. (Jeg kan tegne og fortelja i morgen.)

 

Designet er greit, men de svarte rammene kan du kutte ut. Bytt dem ut med svakere skygger eller noe.

[howieD]

Ikke sett display: inline på alle divs med marginer. Display inline kan brukes til å ta knekken på enkelte float-bugs i Internet Explorer 6, men ikke på hva som helst.

 

Koden din er so-so. Jeg tror du kan starte på nytt med en enklere struktur som minner mindre om gammeldagse tabelldesign. (Jeg kan tegne og fortelja i morgen.)

 

Designet er greit, men de svarte rammene kan du kutte ut. Bytt dem ut med svakere skygger eller noe.

 

 

Takker for svar.

 

God idè det med å gjøre rammen mindre tydelig.

Jeg har laget alt i photoshop, så det er litt kjipt å måtte fjerne ramma egentlig, for det er så drit med de effektene og sånt. Men jeg får gjøre det etterhvert.

 

Jeg skal gå over hele CSS strukturen, og DIV strukturen. Jeg pleier å rydde opp i det når alt er på plass.

Men det hadde jo vært fint om du hadde kunnet vise hva du mente angående en bedre struktur.

Det er kjekt å få input på sånt.

[semafor]

Hei.

 

Siden din er bygget opp av divmania. DIV-er her og der, når bedre semantikk enkelt kan benyttes.

 

Ta f. eks. din hovedmeny:

 

<div id="meny">


               <div id="meny_venstre">

               </div><!--End meny venstre-->

               <div id="hjem">
              	  <a href="index.php?page=hjem" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Hjem','','./bilder/meny_hjem_over.jpg',1)"><img src="./bilder/meny_hjem.jpg" name="Hjem" width="41" height="18" border="0" id="Hjem" alt=""/></a>                
               </div>
           <!-- End hjem -->

 

Dette kan jeg bytte ut med dette, og beholde samme utseende:

 

<ul id="hovedmeny">
<li id="hjem"><a href="/">Hjem</a></li>
..

 

Du må skrive noen cssregler, selvfølgelig. 1

 

Det samme gjelder venstre-/bildemeny, og du bruker ingen elementer som gir mening til innholdet (p, h1, h2, h3..).

 

Jeg anbefaler at du leser litt på htmldog. Du har mye kunnskap når du klarer å lage noe som fungerer bra med div-er. Det eneste er at du må bytte ut enkelte div-er med tagger som best representerer det du oppmarkerer. Egentlig er det ingen forskjell mellom et h2 eller div element, bort sett fra at det første gir innholdet mening.

 

"Velkommen til ..." hører ikke hjemme i en div, men en paragraf eller heading.

[howieD]

Hmm. Jeg skal se på det.

 

Slik jeg ser det så må jeg da ha 1 div til menyen.

Inni denne kan jeg f.eks for "hjem"-knappen da angi en boks som har en CSS regel med background-image: url(a.jpg), og en a:hover regel som henter inn background-image: url(b.jpg); ?

Og la boksen være av ul-id type?

 

Jeg skal prøve dette snart, men skal lese php først.

 

jeg forstår hva du mener liksom, men har lite tid å sette meg inn i det akkurat nå.

Har du tid kan du godt vise meg et eksempel på "hjem"- knappen med et mouseover-bilde.

[semafor]

Menyen trenger jo egentlig ikke en div?

 

Her er et fint eksempel på det du spør om:

 

li { text-indent: -10000px; } /* skjuler teksten */
li a { display: block; }
li a { width/height: x; background: #fff url(bg.gif); }
li a:hover { width/height: x; background: #fff url(bg-hover.gif); }

[howieD]

Menyen trenger jo egentlig ikke en div?

 

Her er et fint eksempel på det du spør om:

 

li { text-indent: -10000px; } /* skjuler teksten */
li a { display: block; }
li a { width/height: x; background: #fff url(bg.gif); }
li a:hover { width/height: x; background: #fff url(bg-hover.gif); }

 

Jeg tenkte å begrense menyen til å ha en div med bakgrunnsbildet av menyen hvertfall. Og at jeg heller tar bort bildeknappene med mousover.

Så gjør jeg det heller slik at jeg lager det slik du hinter til.

Og da lar jeg heller teksten få text decoration med underline ved hover.

Det vil jo fungere like bra. og da slipper jeg jo et hav av div'er.

 

Bra du førte meg inn på tanken altså. For jeg har egentlig tenkt i retning div hver gang jeg skal lage noe. Det har vel blitt en stygg uvane.

 

Jeg går over koden de nærmeste dagene, også skriver jeg her igjen når jeg har gjort det ferdig, så får vi se hva det har blitt til.

 

Setter meg som mål å kutte ut det overflødige HTML, og føre så mye som mulig over på css.

 

Hvem vet... kanskje jeg får siden til å vises i IE6 også

 

EDIT:

 

Jeg gjorde det med menyen og bildemenyen nå før jeg la meg

Det var slik du mente ikkesant?

 

MEN.

Da har jeg fått det problemet med at bildemenyen sklir utenfor rammen til venstre.

Det er pga padding-left.

Jeg må sette den til -20px for at firefox ikke skal la bildene gli for langt mot høyre.

Det som da skjer er at bildene ligger halvveis utenfor ramma til venstre i IE 7.

IE 6 er faktisk omtrent i orden egentlig.

Endret 22. januar 2008 av Haavard82

[semafor]

IE6 har dobbel margin bug når du bruker margin i retning du floater.

 

.ting { float: left; margin-left: 20px; }

=

.ting { float: left; margin-left: 40px; } i Internet Explorer 6.

 

Feilen eksisterer ikke i IE7.

 

Synes det ble bra jeg! Godt jobbet. Fin advarsel ved bruk av IE6.

[howieD]

IE6 har dobbel margin bug når du bruker margin i retning du floater.

 

Jeg ordnet det ved å bruke følgende kode:

 

<![if !IE]>
<link rel="stylesheet" type="text/css" href="css/stilark_firefox.css" />
<![endif]>

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie6.css" />
<![endif]-->

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/stilark_ie7.css" />
<![endif]-->

 

 

Håper det ikke oppstår særlige problemer med den koden, men det skal vel gå greit.

 

Jeg har lagt til på stilark_ie6.css:

margin-bottom: -5px; på topp-diven, og padding-left: 20px; på #bildemeny ul li .

 

Nå ser det ut til at den er kompatibel med Firefox 2 og 3 beta, IE7 og IE 6.

Opera har jeg ikke testet.

 

Jeg tror jeg lar IE6 advarselen stå uansett, for folk bør oppgradere nettleseren sin.