Kotisivuilla firefoxilla ongelma youtube videolinkin kanssa

Discussion in 'Vapaata keskustelua' started by weski, Jan 5, 2009.

  1. weski

    weski Regular member

    Joined:
    Jun 6, 2008
    Messages:
    212
    Likes Received:
    0
    Trophy Points:
    26
    Olisko jollain tietoa miten saa kotisivut näyttämään firefoxilla samalta kuin IE:llä, tai ainakin tuon youtube-videon haluaisin saaada siirrettyä oikeaan paikkaan kuten IE:ssäkin näkyy. Muotoiluun olen luonut oman CSS-tiedoston ja sitä käyttänyt, olen myös html-tageilla koittanut siirtää videon oikeaan paikkaan mutta ei ole oikein auttanut. firefoxissa video tavallaan karkaa kaikista elementeistä ja noteeraa vain tuon "body:n". Eli jos marginaalejakin muuttaa niin se siirtyy vain "body:n" suhteen. Joka taas ei ole toimivaa koska pitäis saada myös toimimaan IE:ssä tuo.

    Kuvia selvyyden vuoksi:
    Firefox
    [​IMG]


    Internet Explorer
    [​IMG]
     
  2. Hmmmh

    Hmmmh Regular member

    Joined:
    Aug 16, 2004
    Messages:
    983
    Likes Received:
    0
    Trophy Points:
    26
    Jos sais vähän koodia tai parhaassa tapauksessa linkin, niin voisi auttaa. Tuosta ei ollenkaan selviä miten noi on tehty.
     
  3. weski

    weski Regular member

    Joined:
    Jun 6, 2008
    Messages:
    212
    Likes Received:
    0
    Trophy Points:
    26
    CSS-koodia

    body {
    background-color: #ffffff;
    color: #ffffff;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align: justify;
    }


    #tausta {
    margin-left: auto;
    margin-right: auto;
    width: 940px;
    background-color: #000000;
    }

    #otsikko {
    background: url(taustakuva2.jpg) no-repeat top center;
    height: 531px;
    color: #ffffff;
    }

    #otsikko h1 span {
    padding-left: 70px;
    }

    #menu {
    margin-right: auto;
    margin-left: auto;
    width: 930px;
    padding-top: 3px;
    padding-right: 10px;
    padding-bottom: 5px;
    background-color: #000000;
    text-align: right;
    color: #ffffff;
    }

    #menu .aactive {
    background-color: #000000;
    color: #08b300;
    }

    #menu a:hover {
    background-color: #000000;
    color: #08b300;
    }

    #menu a {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 80%;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    }

    #tervetuloa {
    text-align: left;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    }


    #yhteystiedot {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 600px;
    }

    #yhteystiedot a:hover {
    color: #ffffff;
    text-decoration: none;
    }

    #yhteystiedot a:visited {
    color: #ffffff;
    text-decoration: none;
    }

    #yhteystiedot a:link {
    color: #08b300;
    text-decoration: none;
    }

    #faktasivu {
    background: #ffffff;
    margin-right: 20px;
    margin-left: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    float: right;
    width: 550px;
    height: 600px;
    border: 2px
    groove #ffffff;

    }

    #faktasivu h3 span {
    text-align: left;
    }

    #vasenpalsta {
    background: #000000;
    float:left;
    margin-top: 40px;
    margin-left: 20px;
    margin-bottom: 40px;
    width: 250px;
    height: 600px;
    border: 2px groove #ffffff;

    }

    #artikkeli {
    font-size: 12px;
    background: #424242;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 860px;
    padding: 20px;
    }

    #videot {
    clear: both;
    margin-left: auto;
    margin-right: auto;
    background-color: #424242;
    width: 900px;
    height: 305px;
    }

    #footer {
    clear: both;
    background-color: #000000;
    height: 65px;
    width: 900px;
    padding-right: 20px;
    padding-left: 20px;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    font-size: 10px;
    }

    .kuvat {
    margin-left: 25px;
    margin-top: 25px;
    }

    .moottori {
    float: left;
    margin-right: 20px;
    margin-bottom: 20px;
    }

    .video {
    margin: 20px;
    float: left;
    }

    html.sivu

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="STYLESHEET" href="file:///C|/Users/Juho/Desktop/Nettisivu/tyyli1.css" type="text/css">
    <title>Bokserimoottori</title>

    </head>

    <body>

    <div id="tausta">
    <div id="menu">
    <a href="index.html">Etusivu</a> <a href="toinensivu.html" class="aactive">Toinen sivu</a> <a href="porsche.html">Porsche</a> <a href="subaru.html">Subaru</a> <a href="yhteystiedot.html">Yhteystiedot</a>
    </div>


    <div id="otsikko">
    <h1><span>Bokserimoottori</span></h1>
    </div>

    <div id="artikkeli">
    <a href="29_52_7---Subaru-Engine--Birmingham-International-Motor-Show-2002_web.jpg" class="moottori" target="_blank"><img src="29_52_7---Subaru-Engine--Birmingham-International-Motor-Show-2002_web2.jpg" width="200" height="133" alt="" border="0"></a>
    Bokseri- eli vastaiskumoottori <i>(engl. flat-engine)</i> on polttomoottori, jossa sylinterit ovat toisiinsa nähden vastakkain. Muissa moottorityypeissä sylinterit ovat yleensä vierekkäin tai V-muodostelmassa. Usein 180-asteista V-moottoria luullaan bokserimoottoriksi. Huomattavin ero 180-asteiseen V-moottoriin on se, että bokserimoottorissa vastakkaiset männät liikkuvat eri suuntiin toisiinsa nähden, kun taas 180-asteisessa V-moottorissa männät liikkuvat samansuuntaisesti. <p>Bokserimoottorin etuna rivi- ja V-moottoriin on sen täydellinen tasapaino, koska jokaisen männän liikettä tasapainottaa vastakkainen mäntä toisella puolella. Voimat ja vastavoimat siis kumoavat toisensa. Moottorit käyvät tasaisesti ja lähes ilman värinöitä. Bokserimoottorit saadaan sopimaan myös huomattavan matalaan
    tilaan, tämän myötä painopiste saadaan alemmaksi ja ajo-ominaisuudet paranevat.</p> <p>Huonoina puolina on hieman suurempi venttiilien pitämä ääni, koska moottori ei ole niin hyvin suojassa muiden komponenttien alla. Lisäksi moottorin pitkittäinen värinä on suurempi kuin V-moottoreissa, joten ne vaativat suuremman vauhtipyörän. Bokserimoottorit vaativat myös muita moottoreita enemmän tilaa leveyssuunnassa ja ovat kalliimpia valmistaa.</p> <p>Ilmajäähdytteiset autot, kuten Volkswagen Kupla, Porsche 356 ja 912 käyttävät nelisylinteristä bokserimoottoria. Chevrolet Corvairissa käytettiin ilmajäähdytteistä kuusisylinteristä bokseria. Citroën 2CV:ssä puolestaan on kaksisylinterinen bokseri.
    Nykyisin bokserimoottorille uskollisia autonvalmistajia ovat Porsche ja Subaru ja siitä on tullut merkittävä osa merkkien imagoa. BMW käyttää bokserimoottoria moottoripyörissään. Bokserimoottori on sen sijaan edelleen laajassa käytössä mm. pienlentokoneissa.


    </div>
    <div id="videot">
    <a href="<object width="320" height="265" class="video"><param name="movie" value="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object></a>
    </div>
    <div id="footer">
    <a href="http://www.evrsoft.com/1stpage/"><img src="http://www.evrsoft.com/1stpage/1st-now.gif" border="0" alt="Created with Evrsoft First Page Website Builder & HTML Editor"></a>
    <div align="right">&copy; </div>
    </div>
    </div>

    </body>
    </html>


    Ei oo viel netissä sivut..
     
  4. weski

    weski Regular member

    Joined:
    Jun 6, 2008
    Messages:
    212
    Likes Received:
    0
    Trophy Points:
    26
    Eikö se ole tuo jonka liitin edelliseen kommenttiin ylös?
     
  5. Pihlis12

    Pihlis12 Active member

    Joined:
    Apr 3, 2006
    Messages:
    1,312
    Likes Received:
    0
    Trophy Points:
    66
    Poista tosta objektin ympäriltä toi href -tagi, vai onko sillä mikä funktio?

    Siis ei näin:
    Code:
    <div id="videot">
    <a href="<object width="320" height="265" class="video"><param name="movie" value="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object></a>
    </div> 
    vaan näin:
    Code:
    <div id="videot">
    <object width="320" height="265" class="video"><param name="movie" value="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object>
    </div> 
    Ongelma ei siis ollut css:ssä vaan ihan html:ssä. Nyt tuo IE vähän puskee tota vinoon :) Korjaa se css:llä. Sori toi sekoiluni tossa ylempänä kirjoitin viestiä samaan aikaan kun säkin.
     
    Last edited: Jan 5, 2009
  6. weski

    weski Regular member

    Joined:
    Jun 6, 2008
    Messages:
    212
    Likes Received:
    0
    Trophy Points:
    26
    Hei loistavaa, nyt video ei karkaa elementeistä ulos enää, firefoxilla näkyy oikein nyt, niinku pitääkin, mut IE:llä on jotain häikkää viel borderin kans, eli se heittää tuon elementtinsä vasempaan yläkulmaan ilman borderii. Jossain varmaan viel jotain vikaa mulla. Toi href oli linkki tagi, päätty </a>:han tuolla, mut poistin ne molemmat ku näköjään toimi ilmankin niitä.:)

    EDIT: Joo just niin tekee mut miten nyt saan tuon IE:n virheen korjattuu CSS:llä? Ei jaksa tajuta.:) Ei mittään, mietin kans että olitko ehtinyt jo kattoo mun postauksen ku niin nopeeta vastasit.:)
     
    Last edited: Jan 5, 2009
  7. Hmmmh

    Hmmmh Regular member

    Joined:
    Aug 16, 2004
    Messages:
    983
    Likes Received:
    0
    Trophy Points:
    26
    Laita se video omaan diviin, jonka class on se video ja ota se class määritys pois sieltä objektista:

    <div class="video"><object width="320" height="265"><param name="movie" value="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/JDYHyGNFR5Y&hl=en&fs=1&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="320" height="265"></embed></object></div>
     
  8. weski

    weski Regular member

    Joined:
    Jun 6, 2008
    Messages:
    212
    Likes Received:
    0
    Trophy Points:
    26
    Kiitos, ratkaisin ongelman jo eri tavalla.:) Piti saada kaksi videoo vierekkäin, joten tein molemmille omat divit ja kellutin ne vierekkäin.
     

Share This Page