Pereiti prie turinio

Skirtingos naršyklės skirtingai atvaizduoja puslapį

Lin3R

Sukūrė Lin3R
Programuotojų kampas

 Dalintis Sekėjai 1

Rekomenduojami pranešimai

Lin3R

Lin3R 573

Sukurta
Sukurta (redaguota)

Sveiki, nesenai pradėjau labiau domėtis svetainių kūrimu. Turiu šiokią tokią mokymosi tikslais susikūręs, tačiau kaip pastebėjau skirtingos naršyklės ją skirtingai atvaizduoja. Pvz.: firefox nerodo šone esamų banerių (kitos naršyklės rodo) arba viena naršyklė rodo kaip turi būti, o kita išmėto paveiksliukus bet kaip. Kodas paprastas, tikrai kažkokių mandrumų nėra - Logo, išslenkantis meniu (drop-down), keletas banerių, tekstas ir paprasta galerija. Na dar php kodo eilutė yra - kad rodytų LT raides.

Kaip padaryti kad visos naršyklės tvarkingai atvaizduotų? gal kažkokį kodą įterpti reikia? :)

Redagavo Lin3R
Nuoroda į pranešimą
Dalintis kituose puslapiuose
semiPolish

semiPolish 6

Atrašyta
Atrašyta

Sveiki, nesenai pradėjau labiau domėtis svetainių kūrimu. Turiu šiokią tokią mokymosi tikslais susikūręs, tačiau kaip pastebėjau skirtingos naršyklės ją skirtingai atvaizduoja. Pvz.: firefox nerodo šone esamų banerių (kitos naršyklės rodo) arba viena naršyklė rodo kaip turi būti, o kita išmėto paveiksliukus bet kaip. Kodas paprastas, tikrai kažkokių mandrumų nėra - Logo, išslenkantis meniu (drop-down), keletas banerių, tekstas ir paprasta galerija. Na dar php kodo eilutė yra - kad rodytų LT raides.

Kaip padaryti kad visos naršyklės tvarkingai atvaizduotų? gal kažkokį kodą įterpti reikia? :)

chrome narsyklei naudok atskiras css taisykles. pvz: http://css-infos.net/properties/webkit

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Lin3R

Lin3R 573

Atrašyta
  • Autorius
Atrašyta

aš siūlyčiau apie document type pasidomėti

Ačiū. Kaip supratau pačioj pradžioj reikia įterpti 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 

Su firefox viskas gerai, tik su Opera ir Chrome užėjus ant tų mažų paveiksliukų nerodo padidinto varianto :/

Nuoroda į pranešimą
Dalintis kituose puslapiuose
hightower

hightower 100

Atrašyta
Atrašyta

Ačiū. Kaip supratau pačioj pradžioj reikia įterpti 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

 

Su firefox viskas gerai, tik su Opera ir Chrome užėjus ant tų mažų paveiksliukų nerodo padidinto varianto :/

 

nesu tikras ar padės, bet siūlyčiau pasiskaityti, o google yra dar daugiau info apie tai

 

http://www.w3schools.com/tags/tag_doctype.asp

Nuoroda į pranešimą
Dalintis kituose puslapiuose
  • po 2 savaičių...
Lin3R

Lin3R 573

Atrašyta
  • Autorius
Atrašyta

Na su doctype'u jau išsiaiškinau. HTML ir CSS validator'iai klaidų nebemeta. Ir problema viena liko kad "preview img" (tą didelį paveiksliuką) IE rodo kairėj pusėj (~30px nuo krašto), o visos kitos naršyklės daugmaž per vidurį kaip ir turėtų.

 

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>Vel testavimas</title>
<link rel="stylesheet" type="text/css" href="/test/kodas2.css">
</head>


<body bgcolor="#fffff">
<div id="wrapper">
<a href="/test/index.php"><img src="/test/logo.jpg" alt="Image Not Loaded"border="0" style="float: left; position:absolute; margin: 20px 0px 0px 0px; z-index:1500" width="400" height="56"></a>

<a href="http://www.autotaurage.lt"><img src="/test/baneriai/autotaurage.jpg" alt="Image Not Loaded" border="0" style="float: left; position:absolute; z-index:4000; margin: 150px 0px 0px 915px;"></a> 

<a href="http://www.tauragesradijas.lt"><img src="/test/baneriai/taurages_radijas.jpg" alt="Image Not Loaded" border="0" width="180" height="125" style="float: left; position:absolute; z-index:4000; margin: 230px 0px 0px 915px;"></a>

<a href="http://www.tauragesskelbimai.lt/"><img src="/test/baneriai/taurages_skelbimai.jpg" alt="Image Not Loaded" border="0" style="float: left; position:absolute; z-index:4000; margin: 360px 0px 0px 915px;"></a>

<DIV style="position: absolute; top: 180px; width: 905px; height: 50px; background-color: #f0eac1; line-height:120%; font-family:arial;text-indent: 30px;">
<p>Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas Tekstas 
</p>
</DIV>

<ul id="drop-nav">
 <li><a href="#">KKKKKKKK</a>
   <ul>
     <li><a href="">JJJJJJJJJJJJJJJJJJ</a></li>
   </ul>
 </li>

   <li><a href="#">IIIIIIIIIIII</a>
   <ul>
     <li><a href="">HHHHHHHHHHH </a></li>
     <li><a href="">GGGGGGG</a></li>
  <li><a href="">FFFFFFFFFFF </a></li>
     <li><a href="">EEEEEEEEEEEEE</a></li>
  <li><a href="">DDDDDDDDDDDD</a></li>
     <li><a href="">CCCCCCCCCCCC</a></li>
  <li><a href="">BBBBBBBBB</a></li>
     <li><a href="">AAAAAAA</a></li>
   </ul>
 </li>

 <li><a href="">55dfsghaghdh</a></li>
 <li><a href="">Vdsfgdshgizadhgdsgi</a></li>
 <li><a href="">dfsgdsfhgdsfgdfghdshg</a></li>
 <li><a href="">ghfghdsfgdsfhgdh</a></li>
 <li><a href="">ghfdghhgdfgfdghdsfs</a></li>
</ul>


<div style="gallery" align="center">
   <div class="thumbnails">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img1" src="/test/Babies/img1.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img2" src="/test/Babies/img2.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img3" src="/test/Babies/img3.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img4" src="/test/Babies/img4.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img5" src="/test/Babies/img5.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img6" src="/test/Babies/img6.jpg" alt="Image Not Loaded">
   	<img onmouseover="document.getElementById('preview').src=this.src" id="img7" src="/test/Babies/img7.jpg" alt="Image Not Loaded">
   </div>
   <div class="preview" align="center">
   	<img id="preview" src="/test/Babies/img1.jpg" alt="No Image Loaded">
   </div>
</div>

</div>


</body>
</html>

 

 

CSS

*{
  margin:0;
  padding:0;
}

body{
  text-align:center; /*For IE6 Shenanigans*/
}

#wrapper{
  width:1000px;
  margin:0 auto;
  text-align:left;
}


.thumbnails img {
height: 80px;
padding: 1px;
position: relative;
margin: 750px 0px 0px 0px;
z-index:3000;
}

.preview img {
padding: 1px;
height: 450px;
position: absolute;
margin: -600px auto 0px -300px;
z-index:2500;
}

.thumbnails img:hover {
cursor:pointer;
}


ul {list-style: none; float: left; padding: 0px 0px; position: absolute; margin: 100px 0px 0px 0px; z-index:3000}
 ul li {display: block;position: relative;float: left;margin: 0px 0px 0px 0px;border:1px solid #f0eac1}
 li ul {display: none;margin: 0px 0px 0px 0px;}
 ul li a {display: block;background: #d4c06c;padding: 5px 10px 5px 10px;text-decoration: none;
          white-space: nowrap;color: #000;font-family:arial;font-size:93%;}
 ul li a:hover {background: #c3b86a;}
 li:hover ul {display: block; position: absolute;}
 li:hover li {float: none;}
 li:hover a {background: #c3b86a; font-family:arial;font-size:93%;}
 li:hover li a:hover {background: #fff; font-family:arial;font-size:93%;}
 #drop-nav li ul li {border-top: 0px;}

 

Any ideas? :unsure:

Nuoroda į pranešimą
Dalintis kituose puslapiuose
highontrance

highontrance 40

Atrašyta
Atrašyta (redaguota)

Nezinau ce mano info gal ir pasenus, bet kada mokinaus HTML ir CSS tai naudodavau papildoma CSS faila nuresetint visiem imanomiems parametram i 0 arba default values.

 

Truputis info

http://www.cssreset.com/what-is-a-css-reset/

Redagavo highontrance
Nuoroda į pranešimą
Dalintis kituose puslapiuose
Lin3R

Lin3R 573

Atrašyta
  • Autorius
Atrašyta

Nezinau ce mano info gal ir pasenus, bet kada mokinaus HTML ir CSS tai naudodavau papildoma CSS faila nuresetint visiem imanomiems parametram i 0 arba default values.

 

Truputis info

http://www.cssreset.com/what-is-a-css-reset/

Ačiū ;)

Pasirodo užteko IE naršyklėj įjungti "Compability view" :D tiek nedaug tereikėjo :D o ieškojau bėdų kode.

Nuoroda į pranešimą
Dalintis kituose puslapiuose
Steeler

Steeler 58

Atrašyta
Atrašyta (redaguota)

Ačiū ;)

Pasirodo užteko IE naršyklėj įjungti "Compability view" :D tiek nedaug tereikėjo :D o ieškojau bėdų kode.

Jei manai, kad išsprendei savo bėdą, galvok iš naujo. Turi taikyti įvairioms naršyklėms ir jų versijoms. Juk nepasakysi klientui įsijungti "Compatibility View", nes tavo stylesheetai taikomi tik senesnėms IE versijoms ar pnš.

 

Ir jei pradedi dabar mokytis HTML ar CSS, neinaudok pasenusiu technologijų. Siūlau pasikeisti į HTML5 ir naudoti CSS3.

Redagavo Steeler
Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 1
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...