[CSS] Programeer foutje(?) zichtbaar in Vista

[Piet Marisael]

Ik ben al een tijdje aan het proberen om een .flv in een plaatje te laten vertonen.
Dat is me aardig gelukt na veel experimenteren.
Door middel van INLINE te gebruiken ben ik zover gekomen.
Onder XP ziet het er 'gelikt' uit, echter onder Vista wil het maar niet lukken.
Waar kan er eigenlijk de fout zitten, of wat heb ik fout gedaan?

Het voorbeeld is te vinden op http://testen.kronkelsvanikke.nl/test.html

Graag uw reactie, het is vreemd dat het zo in elke willekeurige resolutie is.

De CSS-code die ik gebruik:

code:

* {margin:0; padding:0}
body {font:12px Verdana; }
#gallery {position:relative; width:300px; margin:39px auto; padding:0px; right:159px; border:0px solid #000; }
#images {border:2px solid #000; height:420px; margin-bottom:5px; }
#image {position:absolute; width:412px; height:228px; border: 2px solid #000; overflow: hidden; padding:0px; background: url(loading.gif)  no-repeat;}
#image img {position:absolute; top:5px; left:50px; height:10px;}

#container {
            width: 700px;
            height: 500px;
            margin: 0 auto;
            font-family: Verdana;
            font-size: 12px;
            line-height: 1.7em;
            color: #000000;
            background: url(http://pictures.kronkelsvanikke.nl/televisie01.jpg) no-repeat;
            background-position:left top; 
            background-attachment:fixed;

[ Voor 45% gewijzigd door Piet Marisael op 10-08-2009 20:55 ]

[digital-IMEI]

ik kan me niet voorstellen dat het iets met je OS te maken heeft. Het is interessanter om te weten in welke browsers het mis gaat.

Overigens, is het niet mogelijk om dat plaatje over je flv te leggen met behulp van css? Dit zijn toch dingen die je steeds vaker tegen komt en kan me niet voorstellen dat dit nu best-practice is....

[colbrac]

In iframe1.html: <div id="image" 'width=412,height=228'>
dat zou ik alvast <div id="image" width='412', height='228'> maken.

Zoals het nu is ontbreekt onder Ubuntu/FF3.5 de bovenste ~10% van het plaatje.

[MuisM4t]

Probeer eens te werken zonder iframe maar gewoon met een division en een embed.

De division geef je als achtergrond het plaatje.

Geef vervolgens de embed de juiste paddings/margins mee en positioneer het filmpje op deze manier op de juiste plek in het plaatje.

HTML:

<div id="image">

     <embed  />

    </div>

Cascading Stylesheet:

#image{
background: url (plaatje.jpeg);
padding-bottom:x px;
padding-left:x px;
}

#image embed{
margin:0px;
padding:0px;
}

[ Voor 21% gewijzigd door MuisM4t op 10-08-2009 21:08 ]

[Piet Marisael]

colbrac schreef op maandag 10 augustus 2009 @ 20:55:
In iframe1.html: <div id="image" 'width=412,height=228'>
dat zou ik alvast <div id="image" width='412', height='228'> maken.

Deze oplossing geeft geen ander resultaat jammer genoeg.

MuisM4t schreef op maandag 10 augustus 2009 @ 21:01:
Probeer eens te werken zonder iframe maar gewoon met een division en een embed.

De division geef je als achtergrond het plaatje.

Geef vervolgens de embed de juiste paddings/margins mee en positioneer het filmpje op deze manier op de juiste plek in het plaatje.

Daar zit wat in MuisM4t, maar of dat het helpt?
Tot nu toe wordt de CSS ook gezien en meegenomen.
Juist door INLINE te gebruiken kon ik het geheel op zijn plaats houden.
Al met al ben ik maar liefst 4 uur zoet geweest om het eerste te bedenken en te maken.
Mijn motto is dat ik leer door te kijken en proberen met voorbeelden.
Ik ga komende week eens verder experimenteren met je oplossingen.
Alvast mijn dank voor de tips.

[ Voor 59% gewijzigd door Piet Marisael op 10-08-2009 21:14 ]

[Piet Marisael]

Het was toch eventjes zoeken met die DIV, opmerkelijk genoeg ervaar ik toch steeds dat DIV alleen eigenlijk niet aan kan wat met FRAME of IFRAME wel mogelijk is.
Vandaar dat ik er nu voor gekozen heb om beide te gebruiken.
Allereerst de betreffende pagina, net lang genoeg dat er een scroll in zit:

code:

blablabla........
<iframe name="inlineframe" src="2009/5152215iframe.html"
width="500" height="396" frameborder="0" scrolling="no">
</iframe>
blablabla........

Daarna de IFRAME.HTML-file met de betreffende film:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<link rel="stylesheet" type="text/css" href="http://swf.kronkelsvanikke.nl/style2.css">
</head>
<body bgcolor="#FFFDB7">

 <div id="image">

     <embed src="http://video.kronkelsvanikke.nl/embed/mediaplayer.swf" width="412" height="248" allowfullscreen="true" allowscriptaccess="always" flashvars="&file=http://video.kronkelsvanikke.nl/La Tuna - Paloma Mansajera.flv&height=250&width=412" />

    </div>
    
</body>

en uiteindelijk de CSS-code:

code:

#image{ 
background: url(http://pictures.kronkelsvanikke.nl/televisie01.jpg) no-repeat;
background-position:left 4px; top 5px; width 500px; height:420px; 
background-attachment:fixed;padding-bottom:30 px; 
padding-left:0 px; 
} 


#image embed{position:relative; width:412px; height:230px; border: 2px solid #000; 
margin:32px; 
}

Wellicht dat het nog beter of korter kan, maar op deze manier heb ik uiteindelijk toch het gewenste resultaat weten te bereiken.

Opmerkelijk is er een klein detail nog zichtbaar in XP met vergelijking met VISTA.
Het filmpje staat op beide tv-schermen nog niet helemaal gelijk.
De een heeft nog een klein randje onder, terwijl de andere deze boven zichtbaar is.
Hier ben ik ook nog bezig aan geweest, maar was niet gelijk te krijgen.

[Spinal]

Hier in Opera 10 en IE8 op Windows XP gaat het nog steeds mis net als in Vista. Oftewel:

Sjengcity schreef op maandag 10 augustus 2009 @ 20:55:
ik kan me niet voorstellen dat het iets met je OS te maken heeft. Het is interessanter om te weten in welke browsers het mis gaat.

[Piet Marisael]

Klopt, de test-site had ik nog niet aangepast naar de verbeterde versie.
Deze staat nu op de pagina: http://testen.kronkelsvanikke.nl/test.html
Ververs anders ook even je Cache, dat scheelt wel eens zeggen ze.

Nog een klein ander detail:
zowel op de XP-computer als de Vista-computer zit ik te kijken met IE8.0
beide computers hebben dezelfde beeldscherm instellingen en grootte.
dus krijg je wel degelijk een verschil door verschillende besturingssystemen

[ Voor 40% gewijzigd door Piet Marisael op 11-08-2009 17:03 ]

[Leftblank]

Andere suggestie; vervang sowieso alle maten die je gebruikt naar iets met 'n eenheid; zomaar uitgaan dat je browser wel snapt dat 't om pixels gaat als jij 'width:7' roept is niet vanzelfsprekend natuurlijk, en nog fout ook Het hoeft niks met dit probleem te maken hebben, maar 't kan wel problemen geven in andere gevallen.

Ook zou ik eens kijken naar een betere opmaak van je tekst, zowel in tekst als qua opbouw in je HTML. Je maakt nu met de hand dmv br's een min of meer alinea-vorm van je tekst. Dit kun je beter aanpakken door netjes één alinea per <p></p> setje te gebruiken en eventueel een width erop in te stellen (doormiddel van je CSS natuurlijk) zodat het niet eindeloos in de breedte doorloopt.

[Piet Marisael]

Leftblank schreef op dinsdag 11 augustus 2009 @ 17:03:
Ook zou ik eens kijken naar een betere opmaak van je tekst, zowel in tekst als qua opbouw in je HTML. Je maakt nu met de hand dmv br's een min of meer alinea-vorm van je tekst. Dit kun je beter aanpakken door netjes één alinea per <p></p> setje te gebruiken en eventueel een width erop in te stellen (doormiddel van je CSS natuurlijk) zodat het niet eindeloos in de breedte doorloopt.

<p> gebruiken tussen de DIV????
Volgens mijn beleving gaat dat geheid fout, maar ik zit nu dus ook met TEST-files te werken.
Maar desondanks toch dank voor de tip.
Ik leer steeds meer bij, al is het door uitproberen, vragen en kijken.

[sorted.bits]

Nee, een <p> gebruiken in een <div> gaat niet geheid fout. Dit heeft enkel en alleen met je CSS te maken. Je kan <p>'s in een <div> (met of zonder bepaald id of class) weer een andere opmaak geven dan andere <p>'s.

Het is volgens mij een goed gebruik om om je paragraven heen een <p> te gebruiken.

[crisp]

Begin eens met valideren. In de eerste plaats mist je doctype declaration al een '>' en is hij incompleet (geen system identifier). Gebruik ook liever de strict variant dan transitional.