verschil slideshow internet explorer en firefox

[nathalia174]

Ik heb een menubalk gemaakt van diverse blokken met daarin 1 blok wat steeds van afbeelding wisselt.

In explorer is er niets aan de hand.
In firefox zit er ruimte rondom dit blok.
Heb van alles geprobeerd maar krijg deze ruimte niet weg.
Nu sluiten in firefox de blokken niet goed aan.

Wie weet wat ik fout heb gedaan???


Alvast bedankt.

groetjes Nathalia

 

[csshunter]

Hoi Nathalia,
Zonder de gebruikte codes te zien, is het moeilijk te zeggen: het kan aan van alles liggen.
Heb je een link naar een (test)pagina waarin het verschijnsel zichtbaar is?

Met vriendelijke groet,
CSShunter

 

[nathalia174]

vergeten

natuurlijk kun je het bekijken

helemaal vergeten bij te voegen.

www.discountin.es

 

[csshunter]

Hoi Nathalia,
Ook in Chrome en Opera gaat het mis met de blokken, net als in Firefox.
Waarschijnlijk zit het in de tabel-opmaak.

• Maar waarom maak je geen nette css-opmaak van de site, zodat het probleem zich niet voordoet?
• En dan meteen een Strict doctype?
• En alle eigenschappen mooi in kleine letters, en de waarden tussen aanhalingstekens, zoals het hoort?

Test:
www.developerscorner.nl/csshunter/tests/disces-nw.htm
(zie broncode)

Alle browsers blij!

Met vriendelijke groet,
CSShunter

 

[nathalia174]

wist ik maar hoe

bedankt voor de tips maar ik weet er niet zo goed raad mee.

Ik ben nog niet zolang bezig en probeer het maken van websites zelf te leren met veel op dit forum kijken en veel oefenen.

Er zijn nog een HOOP dingen die ik niet weet.

Zo weet ik bijvoorbeeld niet eens wat een Strict doctype is en ga zo maar door.
Ik kom wel steeds verder met een css opmaak maar ook daar kom ik steeds weer problemen tegen die ik niet op weet te lossen.


Nu even over mijn concreet probleem.

Als ik jouw pagina overneem en ik probeer het eerste grijze blok te vervangen door een ander blok (ik weet nl sinds gisteren welke tekst daarin moet komen), is het nieuw geplaatste blok niet te zien. Op deze manier gaat het me dus waarschijnlijk niet lukken om alle andere pagina's zo te maken zoals jij dit aangeeft.

Is het mogelijk om even af te stappen van de opmaak zoals die eigenlijk zou moeten en een oplossing te bedenken die ik zelf toe kan passen op de door mij gemaakt pagina.
Ik heb al eerder een dergelijk probleem gehad waar jij op hebt geantwoord.
Op 27 maart 2011 had jij een oplossing voor eenzelfde soort probleem:

"Nu zit er bij alle andere browsers dan Internet Explorer nog een afstandje van 4px tussen dat kop-links img en het flash-object. De kop past dan nog steeds niet lekker op het menu. Daar valt van ook af te komen: door een "omgekeerd Conditional Comment" toe te passen."


is er op mijn pagina iets op te lossen op deze manier?


Wederom bedankt.

 

[csshunter]

Hoi Nathalia,

Wat een Strict doctype is (kort samengevat)
Elke html-pagina moet beginnen met een "Doctype". Daarmee wordt aangegeven welke standaard een browser moet hanteren om de pagina te "renderen" (EN: render = omzetten; d.w.z. uitrekenen en op scherm plaatsen van de verschillende elementen van de pagina).
Er is een Strict Doctype, een Transitional Doctype en een Frameset Doctype (het laatste voor als een website uit frames is opgebouwd, maar dat is erg af te raden).
Het Strict Doctype is het beste: dat volgt de meest recente standaarden, zodat alle browsers een pagina exact op dezelfde manier (moeten) weergeven.

• Het Transitional Doctype (in 1999 ingevoerd) was bedoeld als overgangsversie, om toenmalige oude websites toonbaar te houden. Dit doctype is toegeeflijker dan de Strict variant (in de html-code mogen bv. een aantal opmaak-eigenschappen gebruikt worden), maar dit is met name vanwege de later gevolgde CSS-standaarden af te raden.

Tenslotte is er ook nog het HTML5 Doctype. Daarmee moeten de standaarden van html5 gevolgd worden, maar dat doen nog niet alle browsers (of: nog niet helemaal).

Het concrete probleem
Om tekst in de grijze blokken te krijgen, moeten van de tijdelijke images nu <div>'s gemaakt worden, met dezelfde eigenschappen: links floatend, en 120x120px groot.
Daar kan je een class="blok" van maken, die je aanroept bij elke <div> waar tekst in moet komen.

• Als de tekst niet stuik tegen de randjes aan moet komen, is er wat padding (opvulling) in deze <div>'s nodig; even opletten: de padding komt altijd extra bij de breedte en/of hoogte, dus de opgegeven breedte/hoogte moet evenveel kleiner worden om totaal op de 120x120px uit te komen.

Kijk: disces-nw2.htm.

• Op deze manier kan de css-opmaak gehandhaafd blijven, en hoeft er geen Conditional Comment voor IE aan te pas te komen. Dat zou hier ook niet goed werken, omdat de browser Opera het net weer anders doet dan Firefox en Chrome, en Safari het net zo doet als IE. Maar voor de andere browsers apart bestaan er geen CC's...
• Met de hoeveelheid tekst in een blokje moet wel wat voorzichtig omgegaan worden: de tekst mag er niet uit lopen (ook niet als de bezoeker een groter letterformaat gebruikt).
• Eventueel zou je de tekst in de blokjes er ook als image in kunnen zetten, dan gaat het altijd goed.

Met vriendelijke groet,
CSShunter

 

[nathalia174]

nog 1 dingetje

De website is zo goed als klaar.
Alleen nog wat teksten erin zetten.

css hunter... JE HEBT ME GEWELDIG GEHOLPEN!!!!!

Ik heb nog 1 probleempje:
In firefox, opera, chrome en internet explorer 8 zit hij er precies uit zoals ik het wil.

Alleen in explorer 9 zijn de letters in de menublokken vaag en zit er rondom de "slidefoto's" een grijs randje.

In eerste instantie waren de blokken en de foto's 120 px breed en hoog
Ik heb dit veranderd in 110 px breed en hoog.

Ik heb dat in de broncode zo aangepast:
#leftcolumn {
float: left;
width: 220px;
margin: 51px 30px 51px 0;
}
#leftcolumn img,
#leftcolumn object,
#leftcolumn embed {
float: left;
width: 110px;
height: 110px;

Moet ik in de broncode nog iets aanpassen???

Het resultaat is te zien op www.discountin.es

 

[csshunter]

Hoi Nathalia,
De code lijkt me zo goed te zijn.
Waarom IE9 rare dingen doet: geen idee (ik heb hier geen IE9, dus kan de verschijnselen niet reproduceren).

• Maar volgens de online NetRenderer heeft IE9 géén afwijkende blokken: niet in de scherpte van de teksten (images), en geen randjes.

Wat je eens zou kunnen proberen, is om de "compatibility" voor IE9 op IE8 te zetten met:

<head>
...
<meta http-equiv="X-UA-Compatible" content="IE=8">
...
</head>

Daarmee zou IE9 hetzelfde moeten doen als IE8, die nu de goede weergave geeft.
Helpt dat?

Met vriendelijke groet,
CSShunter

Edit:
Opvragen van de pagina in IE9 bij Browsershots geeft ook geen probleem te zien (paar keer klikken op het img om op ware grootte te komen):
http://browsershots.org/http://www.discountin.es/ :shocked:

 

[nathalia174]

het helpt niet

ik vind het ook vreemd dat hij bij netrenderer een ander beeld geeft dan op mijn laptop.

hier kun je het verschil bekijken tussen bijvoorbeeld firefox en explorer 9

http://www.discountin.es/verschil.html


Als jij iemand anders weet die hiervoor een oplossing weet, hoor ik dat natuurlijk graag.
Zou het ook nog aan instellingen van mijn laptop kunnen liggen??
Lijkt me sterk want het screenshot op bovenstaande link is ook afkomstig van mijn laptop.

In ieder geval wel bedankt voor al je tips.
de website is erg mooi geworden vind ik persoonlijk.

Hopen dat dat laatste puntje ook pgelost kan worden.

 

[csshunter]

Even nameten van de blokjes uit je IE9-screenshot: brr,

• de hele 1e kolom is 114px breed i.p.v. 110px;
• de 2e kolom is 115px breed i.p.v. 110px;
• de 1e rij is 114px hoog,
• de 2e rij is 115px hoog,
• de 3e rij ook,
• de 4e rij is weer 114px hoog ...

Daar zou je toch een appelflauwte van krijgen!

Maar hé-poppelepé! Wat zien-ik?
In de html van de <div id="leftcolumn"> is er om alles heen een <p> gekomen, die er niet in stond/hoeft:

<div id="leftcolumn">
   <p><a href="index.html" ...enz.
   ...
   </p>
</div>

Daarmee zouden de margins en/of paddings en/of font-size en/of line-height van een <p> misschien wel eens roet in het eten kunnen gooien. Al in de tijden van IE5 had IE daar moeite mee.
Wat gebeurt er als je de <p> en de </p> er uit schroeft?

Met vriendelijke groet,
CSShunter
_____________
PS:
Ook nog te proberen:

#leftcolumn img {
   vertical-align: top;
   }

 

[nathalia174]

nee dat is hem ook niet

ik heb het aangepast.

ik had eerst een enter gegeven om de kolom met blokken te laten zakken.
ik heb dit nu anders aangepast en de "p's" zijn weg.

het resultaat kun je zien maar in explorer 9 is er niets veranderd.

ook als ik "vertical-align: top;" toevoeg veranderd er niets

 

[csshunter]

Nou, ik ben een boon als ik het begrijp... maar het laat me niet los.

• Even een testje: disces-nw3.htm

Wat gebeurt er met deze knaap in IE9 op je laptop?

Toelichting:
Hierin is het script voor het swf-object uitgeschakeld, verder is alles hetzelfde.
Dit script (www.discountin.es/Scripts/swfobject_modified.js) is namelijk versie 2.0, terwijl blijkens de SWFobject projectpagina (http://code.google.com/p/swfobject/) versie 2.2 de laatste is. Misschien kan IE9 niet met de oude versie overweg.
Verder schijnt het hele script gemist te kunnen worden: dit is er als ik me niet vergis voor bedoeld om voor de browser van de bezoeker de downloadplek voor juiste Flash plugin op te hoesten, als deze browser 'm nog niet heeft.

Maar, AHA, stop de persen: alweer een poppelepé-moment, en hopelijk nu de echte boosdoener! :d
Toen ik voor een volgende test (op zoek naar een minimale code om de fout te laten zien) de html eens netjes onder elkaar ging opschrijven ...

• Test 4: http://bliksekaters.nl/tests/disces-nw4.htm
  ~ zie broncode!

... kwam ik er al heel gauw achter dat de links naar de pagina's telkens dubbel in de blokken staan: één keer met het betreffende menu-img om op te klikken, en ook een keer extra in een lege <a> :shocked: :

<a href="studio.html" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Image13','','images/block22.jpg',1)">
	<img src="images/block2.jpg" id="Image13" alt="" /></a>
<a href="studio.html" 
	onmouseout="MM_swapImgRestore()" 
	onmouseover="MM_swapImage('Image12','','images/block22.jpg',1)"></a><!-- DIT IS EEN LEGE <a> ! -->
enz.

Dus hup die lege <a>'s er uit geknikkerd:

• Test 5: http://bliksekaters.nl/tests/disces-nw5.htm

Wat is hiervan het effect op IE9?

Met vriendelijke groet,
CSShunter
___________
PS: Als je het target="_blank" (openen in nieuw tabblad/venster) voor de link naar se7en graphics er uit wipt, is het nu valid xhtml Strict.
Als je dit openen elders er in wilt houden (ik zou 't niet doen), moet de pagina een Doctype Transitional krijgen, dan is ie ook valid.