Problemen met websites in IE8

Status
Niet open voor verdere reacties.
T

tvoorbij

Gebruiker
Lid geworden
20 apr 2005
Berichten
65
Hallo,

Ik werk nog steeds met de laatste versie van DW van Macromedia en HTML. (Dus voordat het naar Adobe ging)
Sinds ik IE8 heb geïnstalleerd op mijn PC's zie ik kleine probleempjes op mijn websites.
Op mijn website states.nl heb ik bij diverse staten een (relief)landkaartje met locaties. Deze worden aangeklikt via een rondje of vierkantje. De namen van deze locaties zijn echter een pixel verschoven naar boven. Ik heb de namen waar mogelijk uitgelijnd met het bewuste rondje of vierkantje. Dit kan ik natuurlijk veranderen maar dan is het in IE7 weer een pixel te laag. Is dit omdat ik met verouderde code werk en/of is er een universele oplossing zodat het in beide goed uitgelijnd staat?

Op mijn website www.voorbij.nl/silverstar/index.htm heb ik een gekker probleem:

Op de onderste balk waar ook de tijd en datum staan wordt een flashbestandje onder de balk geplaatst terwijl dit in IE7 perfect past. Ik zie dat er tussen de flashbestandjes nu extra spaties/pixels staan waar in IE7 ze mooi aan elkaar passen zodat er tussen ieder gekleurd vierkantje een zelfde spatie/ruimte zit. Is dit ook zo op te lossen zodat het in zowel IE8 als IE7 werkt?

Bij voorbaat dank,


Theo
 
Laatst bewerkt:
Hoi Theo,
Probleem-1: het 1-pixel-verschil probleem.
Dit zal 'm niet alleen in het verschil IE7 / IE8 zitten, want Firefox toont 'm ook 1px te hoog, en Chrome, Opera en Safari weer niet.
Het ligt vermoedelijk aan de constructie van de pagina (men neme bv. http://states.nl/states/colorado/statemap.htm):
  • de rondjes zijn ingetekend op de kaart in een cel van een tabel;
  • de bijbehorende namen zijn als tekst in de html gezet, in een andere tabel die eroverheen geplakt is.
Er is dus geen rechtstreeks verband tussen de plaatsing van een rondje en z'n omschrijving.
Je zou het kunnen oplossen door telkens een naam+rondje in één element te zetten, en dan bv. het rondje als verticaal gecentreerd background-img te stylen. De rondjes moeten dan weggetekend worden in de reliëf-afbeelding. Mocht er dan nog 1px verschil zijn in hoogte, dan gaan naam+rondje samen 1px omhoog, en dat zie je niet op de kaart.

Maar het eenvoudigste is denk ik om een screenshot te maken van de goede afbeelding, dat even bij snijden, en de nieuwe afbeelding dan in de plaats van de oude te zetten.
Vervolgens kunnen alle namen in de html vervallen, en staat het altijd goed. :)

Je zou ook de klik-area's in de image-map kunnen vergroten zodat ze ook de namen bevatten, dat is minder mikken voor de bezoeker / gebruiksvriendelijker.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
@helpendehand123

Dank je, ik glim van trots.:cool:

@ csshunter

Ik denk dat jouw suggestie om een image/afbeelding te gebruiken niet zo slecht bedacht is. Zal eens experimenteren met één staat. Als ik de kwaliteit goed genoeg krijg ga ik dat inderdaad toepassen.

Hartelijk dank voor de suggestie!
 
Hoi Theo,
Probleem 2: extra spaties/pixels tussen de flash-bestandjes.
Deel 1
Ik zie helemaal geen "onderste balk waar ook de tijd en datum staan". :confused:

ssp-screenshot.png

Zelfs het rode Canon-logo onder de camera is niet te zien. Er is ook geen scrollbar, en ik kan er met geen mogelijkheid bij komen...
Oorzaak: de frameset-opbouw houdt er geen rekening mee dat er gebruikers zijn met een lagere resolutie dan 1280x768, resp. met een inwendige pagina-hoogte van minder dan 620px (wat het geval kan zijn als je bovenin een aantal toolbars aan hebt staan). Ik draai op 1024x768px, speciaal om bij webontwerpen niet uit te glijden. - Dit dan op een gewone desktop. Maar het probleem zal ook bij een aantal laptops, notebooks, pads en pods kunnen spelen, vermoed ik.
  • Eigenlijk zouden beide sites herontworpen moeten: zonder frames, en zonder de tabellen voor de opmaak. :rolleyes:

Deel 2
Ja, de spaties. Ook daar heeft Firefox moeite mee, en Chrome, Opera en Safari ook.
De laatste serie van 3 flash-flashende blokjes wordt bij deze browsers daardoor zelfs uit de regel gegooid, en komt er onder te staan.

ssp-flashbar.png

Maar de browsers doen het terecht! Oorzaak: de verschillende flash-objecten staan op aparte html-regels, waardoor er een spatie tussen gezet wordt. Net als bij bv.:
HTML: 
<p>Piet
Paaltjes</p>
Ook als er achter Piet geen spatie staat, wordt die er op het scherm wel tussen gezet. Daar komt gewoon "Piet Paaltjes" te staan.
Zo kom je er aan. Hoe kom je er af?
Code: 
object, embed { float: left; }
Omdat ze geen margin hebben opgekregen, drijven ze nu stuik tegen elkaar aan.

Met vriendelijke groet,
CSShunter
 
@ csshunter

Ik ben gelijk maar aan het experimenteren gegaan. Helaas loop ik tegen een paar problemen op. Ik dacht eerst om mijn hele reliefkaart met naam en rondje/vierkantje te doen maar de kwaliteit van de tekst is zeer matig. Ondanks dat ik voor beide programma's Arial gebruik is het in mijn tekenprogramma zeer matig. Ik had daar trouwens wel een andere oplossing voor: nieuwe locatienaam in DW en dan "Print Screen". Het grootste probleem is de uitloop die ik nu via layers gewoon kan maken buiten de afbeelding om. Het plaatje is niet zo groot. Ik kan het wel realiseren maar dat is een heidens karwei. Ik moet dan tabellen gaan veranderen, berekenen waar het reliefkaartje komt in mijn tekenprogramma. Nu staat het kaartje in een bepaald tabelvak gecentreerd, zowel horizontaal als verticaal. Dus ik ga nog eens goed kijken wat wijsheid is. Ik heb nog even mijn code gechecked maar ik gebruik een absolute positie in een layer. Het zou dus altijd op dezelfde plek moeten verschijnen lijkt mij. Echter gezien jouw research met meerdere browsers en de verschillen daarin bevestigen dat er iets is waardoor het toch een pixel scheelt bij de één of andere. Ik ga nu wel even piekeren...:D
 
Ik ben mij bewust van de manier van opbouwen. Heb dat om een paar redenen zo gedaan. Bij het veranderen van pagina hoeft niet alles opnieuw geladen te worden en blijven de "blokjes" gewoon door gaan. Dit zou ik inderdaad anders kunnen doen.

Bij mijn states site heb ik het gedaan om de muziek bediening éénmalig onder iedere pagina te hebben zodat de muziek steeds blijft doorspelen, ook bij wisselen van de pagina's. Ik denk niet dat ik momenteel de energie en tijd heb dat op korte termijn anders te doen. Het zal dan denk ik gebeuren bij een hele nieuwe opzet/styling.

Ik ga met het tweede probleem morgen gelijk aan de slag.

Nogmaals dank voor alle hulp, ik waardeer het zeer.

(off-topic)
Ik ben zo'n tien jaar geleden begonnen met websites maken en heb diverse HTML boeken uit mijn hoofd geleerd. Helaas gaat de techniek en ontwikkeling zo snel dat ik weer eens een cursus moet gaan doen. Ik moet ook eerlijk bekennen dat het grafische ontwerpen (en fotograferen) mijn voorkeur heeft. Het technische uitvoeren vind ik minder leuk, maar hoort er wel bij natuurlijk. Nu wil het geval dat mijn zoon "informatica" heeft gekozen in zijn vakkenpakket en daar komen diverse aspecten van webdesign voorbij. Ik ga dat met hem meedoen zodat wij elkaar kunnen helpen en stimuleren. Tevens ga ik waarschijnlijk over tot Adobe Photoshop (CorelDraw wordt steeds beroerder, crashed nu bijna iedere keer als ik ermee bezig ben) en Dreamweaver CS 5.5 (wordt wel een keertje tijd om te vernieuwen).
 
Hoi Theo,
Ik was ook even doende: een screenshot van de Colorado-kaart genomen, en dat opgeslagen als jpg met 15 procent compressie. Dan is het bestand 41kB groot, net iets kleiner dan het origineel (zonder namen) van 43kB.
De letters komen nu voor mijn ogen in voldoende kwaliteit door:


Hier wat lastig te zien, vanwege het overstralen van de bijna witte achtergrond van de helpmij-pagina.
Met terugbrengen tot 4200 kleuren en opslaan als png kan je de volledige kwaliteit van de tekst behouden; maar dan heb je wel 140kB te downloaden.


Het verschil met het 100kB kleinere jpg'tje zie ik niet (kan aan mijn ogen liggen, je weet maar nooit).

De rest van je opmerkingen ga ik nu bestuderen!
CSShunter
 
(off-topic)
Ha! Ik ben ook zo'n tien jaar geleden begonnen met websites maken en geen boeken uit mijn hoofd geleerd. Ook geen boeken gekocht: alles van internet geplukt. Wel danig geëxperimenteerd (vind ik nou leuk) en een paar jaar wezen buurten op het internationale css-discuss forum. Daar ontzettend veel van geleerd, want daar spoken jongens en meisjes rond die er echt veel van weten.
Oorspronkelijk begonnen met een gratis FrontPage, uit nieuwsgierigheid in de broncode gaan kijken, en van het een kwam het ander. Vervolgens de broncodes niet meer losgelaten: nooit een webeditor aangeschaft, gewoon de Spartaanse Kladblok-methode. ;)
 
Ik gebruik DW half om half. Veel met F10 om de code erbij te halen.:D
Sommige dingen doet het programma nu eenmaal sneller en makkelijker maar ik ben ervan overtuigd dat je toch de code in de gaten moet houden.

Ik zal je linken later even lezen.

Was even naar het tweede probleem aan het kijken. Weet je dat ik inderdaad dacht dat als er GEEN spatie stond, maar wel de 2 regels zoals jouw voorbeeld ik toch PietPaaltjes zou krijgen! Ik heb n.l. een script ergens waar steeds weer een spatie tussen komt als ik de pagina opgeslagen heb. Was dus wel op de hoogte van die spatie alleen niet van de twee regels die het dan weer opheft. Zo leer je nog steeds hoe oud je ook bent.

Ik keek even naar je code, maar kan het niet meteen bevatten.

Plaats ik in de huidige code: COLOR="darkred"]<embed src="box01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="54" height="16"></embed>[/COLOR]

<embed float="left" src="box01.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="54" height="16"></embed>

of bedoel je dat ik een CSS script aanmaak voor de 11 verschillende "box" flash bestanden?

<style type="text/css">
<!--
.embed { float: left; }

-->
</style>

Sorry dat ik het niet meteen begrijp.

Groeten,

Theo
 
Ah, de muziek had ik niet gehoord, want ik had mijn speakers uit staan. :)
(Maar de bediening ervan kan ik op 1024x768px niet zien/bereiken)

Ik had de css op het oog, dan pak je meteen alle flash-objecten tegelijk.
Dus inderdaad in de css zetten:
Code: 
<style type="text/css">
<!--
object, embed { float: left; }
-->
</style>
Ik zou er ook het object-element zelf bij doen, want sommige browsers pakken het object op, andere het embed-element; en baat het niet dan schaadt het niet.
In de css komt er geen puntje voor de "embed" te staan: het gaat hier om de tag <embed> en niet om een class="embed" (die zou wel een puntje moeten krijgen).
Met het gebruiken van de tag-namen van <object> en <embed> werkt de float:left nu meteen voor alle tags <object> en <embed> op de pagina.
In de html hoef je dus niets bijzonders te doen of toe te voegen.

Het grootste probleem is de uitloop die ik nu via layers gewoon kan maken buiten de afbeelding om. Het plaatje is niet zo groot. Ik kan het wel realiseren maar dat is een heidens karwei. Ik moet dan tabellen gaan veranderen, berekenen waar het reliefkaartje komt in mijn tekenprogramma.
Klik om te vergroten...

Wat ik in nr. #8 bedoelde is deze:
Wat ik hierin gedaan heb:
  1. In de html-regel met de src van de reliefkaart de naam van de nieuwe screenshot-afbeelding (met de namen erbij) gebruikt i.p.v. de oude naam.
  2. Het hele stuk met <div>'s:
    HTML: 
    <div  class="loclayer" style="position: absolute; left:249px; top:352px;" id="mesaverdenp">
		&nbsp;Mesa Verde NP&nbsp;</div>
    weggehaald (voor het gemak met de commentaar-code).
  3. In de ontwerp-weergave van FrontPage (toch nog ergens goed voor ;)) de posities van de link-areas van de image-map met rekken en trekken in orde gebracht, zodat ze ook de namen omvatten.
Klaar! Dat viel dus reuze mee, je hoeft niet aan de tabellen en cellen te komen. :)

Met vriendelijke groet,
CSShunter
 
Zo, probleem 2 is opgelost! Mijn dank is groot. Zit toch veel meer in CSS dan 10 jaar geleden.:o Zullen absoluut weer aan de bak moeten om één en ander op te halen.

Ik had inderdaad jouw voorbeeld in gedachten. Maar ik denk dat ik dan mijn reliefmap groter moet maken. Niet de staat zelf, maar meer zwart erom heen. Ik kan dat in mijn tekenprogramma wel stroomlijnen zodat alle 50 staten toch op dezelfde plaats blijven zonder te verschuiven maar met meer ruimte om de locaties te plaatsen. Zo heb ik dan voor iedere staat een vaste breedte en hoogte.
Waarschijnlijk moet ik de tabel toch iets aan passen want als je "jouw" Colorado naast de mijn ziet verschuifd de kaart iets waardoor de naam van de maker en de regel daarboven iets verschuiven. Ik ga wel even met één staat experimenteren om te zien hoe het bevalt.

Nogmaals hartelijk dank heb weer het nodige geleerd!

Groeten,

Theo
 
als je "jouw" Colorado naast de mijn ziet verschuift de kaart iets waardoor de naam van de maker en de regel daarboven iets verschuiven.
Klik om te vergroten...
Dat zou heel goed kunnen, want ik had mijn kaart-versie er zomaar zonder op of omkijken (naar celbreedte, enz.) ingeplakt om te kijken of het idee zou werken.
De fijnregeling zal wel lukken. ;)

Met vriendelijke groet,
CSShunter
 
Ik ben inmiddels zover dat ik de tabel heb veranderd. Ik kan nu mijn "papier grootte" in het tekenprogramma aanpassen naar het maximum van de samengevoegde cellen. De originele kaart MET rondjes blijft dan exact in het midden. Nu kan ik aan alle kanten mijn tekstjes kwijt, ook iets buiten de landkaart. Ik ga eerst even een kopie van de bestanden maken en dan alles veranderen. Het is een hele klus dus het duurt wel even voordat ik het ga/kan plaatsen. Het idee van een groter aanklik vlak spreekt mij ook wel aan. Bedankt voor de hulp.

Groeten,

Theo
 
Het is allemaal toch sneller gelukt dan ik dacht... Is nu bezig de files op de server te updaten. Kan ik weer verder met de update van Maart 2011.

Met vriendelijke groet,

Theo
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan