T&R splet blog o spletnih storitvah. Razgaljamo tehnologijo!

reference spletnih strani
« Chrome preobleka za Firefox
Vojna med Google in Microsoft za prevlado na spletu? »
12th September

IE6 težave pri izdelavi spletnih strani

Izdelava spletnih strani ni ravno preprosta stvar zaradi različne interpretacije HTML in CSS ukazov. Pri prenovi spletne strani tonimeglic.com sem se ubadal s težavami pri postavitvi vsebine in tudi delno popravljal CSS dokument zaradi "šlamparije" IE6. Odločil sem se nekaj težav opisati za vse, ki vam bo mogoče koristilo pri izdelavi spletnih strani.

Nekaj težav, ki jih povzroča IE6 pri določenih kombinacijah HTML in CSS kode.

float:left in table width=100%.

V tem primeru imamo div lement, ki naj bi se nahajal na levi strani kot podmeni, in tabelo, ki pa naj bi se nahajala zraven kot del vsebine. IE6 bo tabelo postavil pod levi podmeni tako, da bo v podočju vsebine nastala praznina. Primer HTML kode:

PLAIN TEXT
HTML:
  1. <div>   
  2. <div style="float:left">  PODMENI  </div>
  3. <table style="width: 100%;" border="0"><tr><td>   VSEBINA  </td></tr></table>
  4. </div>

Težavo rešite s tem, da v CSS dodaste ukaz "* html table {width: 99.5%}". Na samem izgledu se praktično ne bo poznalo, vsebina pa bo prikazana pravilno (levo podmeni in desno tabela s vsebino). * html je CSS selektor, ki ga prepozna in upošteva samo Internet Explorer 6. Sam ga pri izdelavi spletnih strani uporabljam zelo pogosto.

float:left in h1 width=100%.

Podobno ima težave pri h1 in float left. Verjetno bo kdo oporekal zakaj imeti pri h1 ukaz width=100%. Se strinjam, vendar v nekaterih primerih pač mora biti. Sam sem ta primer našel pri Joomli!.

PLAIN TEXT
HTML:
  1. <div>   
  2. <div style="float:left">  PODMENI  </div>
  3. <h1 style="width: 100%;">  NASLOV VSEBINE  </h1>
  4. </div>

Primer. Znotraj DIV elementa je prvi element slikca, ki ima ukaz float:left, takoj zanjo pa sledi h1 naslov s CSS ukazom width:100%. V tem primeru težavo rešite tako, da dodaste za IE6 ukaz width:auto.

Postavitev spletne strani z dvema stolpcema

Prav tako v nekaterih primerih povzroča težavo pri postavitvi spletne strani z dvema stolpcoma. Večina brskalnikov podpira opcijo, da prvem elementu, ki naj se nahaja na levi strani dodate CSS ukaz float:left, div elementu, ki pa naj se nahaja na desni strani, pa dodaste ukaz margin-left: širina levega stolpca. To težavo rešujem tako, da dam desnemu stolpcu ukaz float: right.

PLAIN TEXT
HTML:
  1. <div>   
  2. <div style="float:left">  PODMENI  </div>
  3. <div style="float:right">   VSEBINA  </div>
  4. </div>

Ponavadi so potem težavi pri vsebini, kjer želite, da se določen element postavi v novo vrstico z ukazom clear:left. To pa večina brskalnikov razume tudi nižje do levega stolpca, kar se odraža kot težava, ki je opisana v prvem primeru.
 

position:absolute in float ukaz 

Prav tako so težavi pri position:absolute in float ukazih, kjer Internet Explorer tretira drugače kot ostali in elemente ne prekriva. A o tem drugič, ko bom imel pri roki praktični primer. Toliko na hitro. Upam, da težave niso opisane preveč na splošno (če bo volja in čas bom zadevo opremil še s slikami). 

 

Deli s skupnostjo:

  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks

Podobni članki:

  1. Katero kodiranje uporabiti pri izdelavi internetnih strani?
  2. Novi Developer Tool – prijaznejši do razvijalcev spletnih strani?
  3. T&R splet od marca 2010 ignorira IE6 pri izdelavi internet strani
  4. Vam ignoranca CSS2 standarda s strani Microsofta dela težave?
  5. Izdelava spletnih strani – 5 najpomembnejših stvari
  6. Šumniki – UTF-8 – Težave – PHP & MySQL
  7. Postopek izdelave spletne strani
  8. Zend Search Lucene – UTF8 podpora – iconv težave
  9. Javascript dodatki za prikaz oken oz. foto-galerije (ThickBox, Lightbox, GreyBox, Highslide)
  10. Več nivojski CSS selektorji

Antony || Friday, September 12th, 2008 ob 6:21 am || Splet, Splet (XHTML, CSS) || RSS 2.0 | Dodaj komentar || Trackback


4x komentirano na “IE6 težave pri izdelavi spletnih strani”

  1. brezimenko je napisal:
    September 12th, 2008 ob 9:00 am

    Ponavadi imajo spletne strani neko fiksno širino, torej te nič ne ovira, da daš na levi meni in vsebino fiksno širino, tako tudi ie6 ne bo imel težav. Ne vem zakaj bi imel v kodi div za levi stolpec, zraven pa takoj tabelo za vsebino? Ni bolj pametno to tabelo "zavit" v div vsebina?
    Pa še en nasvet; v kodi div Vsebina postaviš pred divom Meni, nato pa v css-u samo na div Vsebina nastaviš float: left; To je dobro za slepe in slabovidne, katerim razni programi prebirajo vsebino, da mu takoj prebere glavno vsebino strani in ne gre najprej čez celoten menu :)

  2. brezimenko je napisal:
    September 12th, 2008 ob 9:01 am

    Ups napaka: divu Vsebina nastaviš float: right; :)

  3. Valu je napisal:
    September 13th, 2008 ob 5:37 pm

    Jaz težavo rešim kar z dvema ali več .css datotekami. Napišem v ukaz, ki zazna kateri browser ima obiskovalec. In potem pač naredim prirejene classe za IE 6 in 7, pa je težava hitro in enostavno rešena.

  4. Mojster je napisal:
    October 23rd, 2008 ob 9:19 pm

    Mah jaz nimam več problemov z IE6 sam pogruntat morš te fore, ki jih ima. Drgač se pa, da napisat css tk, da bo delal posod isto povsod.

Dodaj komentar