Archief - IE8: ongewilde witruimte boven en onder text banner (+ 2 andere probleempjes)

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
J

Jackman666

Legacy Member
Hi guys,

In mijn eerste website voor een kinderdagverblijf heb ik nog 3 kleine, maar hardnekkige probleempjes en dit enkel in IE8. Andere browsers zijn prima.

Website: Lauro kinderdagverblijven

1. Boven en onder de tekstbanner zit een grote witruimte die ik niet kan wegkrijgen.
2. Het tekstje onder de rode bloem 'De fantasiewereld van kinderen is grenzeloos!' staat helemaal onderaan de pagina.
3. In de javascript banner scrolt de tekst van rechts naar links voorafgegaan door een witruimte, maar op de tekstbasislijn is een heel dun zwart lijntje zichtbaar dat er niet mag zijn.

Doe ik iets fout in css of zit het in de js banner? Ik weet het niet meer.

Met dank bij voorbaat voor jullie hulp.


Externe javascript banner (webticker_lib.js):

// WebTicker by Mioplanet
// Mioplanet | Home | Desktop Softwares and Solutions

TICKER_CONTENT = document.getElementById("TICKER").innerHTML;

TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:16px; color: rgb(193,39,45)";
TICKER_PAUSED = false;

ticker_start();

function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";

// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="block";
TICKER_tick();
}
}

function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
}
-

-BVR-

Legacy Member
1. gebruik
Code: 
-tags aub
2. hier ziet alles er normaal uit
3. je hebt wat last van divitis: je gebruikt heel veel overbodige divs
4. je site ziet eruit alsof er een laag stof over ligt. Meer contrast, leukere kleuren en een andere/doorlopende achtergronde (niet zo'n 'afgeknipte')
5. er is een HUUUUUUUGE open ruimte onder de content
J

Jackman666

Legacy Member
Hi Bram,

Je antwoord is erg gewaardeerd, maar de homepage was eerst opgebouwd in tabellen (cfr. de andere pagina's) en tussen het posten van deze thread en jouw antwoord herbouwd in divs, waardoor je naar een pagina keek waarbij bovenstaande problemen niet meer juist waren. De andere pagina's komen nog. :-)

Was voor mij ook de eerste keer dat ik een site in divs opbouw en ik vond het fantastisch wat ik al gepresteerd heb, maar ik vond het fijn van je dat je me op de fouten wees. Ik ben reeds de code aan het herzien en aan het kijken of ik het aantal divs kan reduceren zonder opnieuw problemen te krijgen.

Als prille beginner brand ik wel van nieuwsgierigheid welke divs ik kan weglaten en ook wat je bedoelt met '
Code: 
-tags'. Misschien wil je het me nog effe vertellen. Ik hoor het graag. :-)

Wat punt 5 van je antwoord betreft: de HUUUUUGE open ruimte onder de bloem is zo bedoeld en blijft zo. Maar er is inderdaad onderaan sommige pagina's wat teveel witruimte, hetgeen bij herwerking naar divs ook zal verdwijnen.

Wat het andere design van de site betreft, zal dat echter ook zo blijven. Zoals ze er nu uitziet, is ze ook bedoeld en wordt ze door iedereen die ze ziet, heel erg geprezen als heel apart, een schot in de roos en duidelijk in taal en uitleg.
Dat de code niet helemaal zuiver is, is voor mij een zorg, voor hun echter niet van belang.

Over persoonlijke smaak valt zeker te twisten, maar ik leg je mening zeker niet naast me neer en ben eveneens jouw tutorial aan het doornemen om ervan te leren.

Greetz and thanks voor je antwoord. :-)
Jack
-

-BVR-

Legacy Member
OK, ik ga hier gaan volledige review van je website geven, maar ik raad je aan dat eens de site af is, je ze toch even doorheen de site-check op dit forum sleurt.

Met de code-tag bedoel ik de code tags op dit forum. In je vorige bericht heb je een stukje code geplaatst, maar het is duidelijker als je deze in code-tags ('
Code:
') plaatst, zo dus:
Code: 
Externe javascript banner (webticker_lib.js):

// WebTicker by Mioplanet
// Mioplanet | Home | Desktop Softwares and Solutions

TICKER_CONTENT = document.getElementById("TICKER").innerHTML;

TICKER_RIGHTTOLEFT = false;
TICKER_SPEED = 2;
TICKER_STYLE = "font-family:Arial; font-size:16px; color: rgb(193,39,45)";
TICKER_PAUSED = false;

ticker_start();

function ticker_start() {
var tickerSupported = false;
TICKER_WIDTH = document.getElementById("TICKER").style.width;
var img = "<img src=ticker_space.gif width="+TICKER_WIDTH+" height=0>";

// Firefox
if (navigator.userAgent.indexOf("Firefox")!=-1 || navigator.userAgent.indexOf("Safari")!=-1) {
document.getElementById("TICKER").innerHTML = "<TABLE cellspacing='0' cellpadding='0' width='100%'><TR><TD nowrap='nowrap'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'>&nbsp;</SPAN>"+img+"</TD></TR></TABLE>";
tickerSupported = true;
}
// IE
if (navigator.userAgent.indexOf("MSIE")!=-1 && navigator.userAgent.indexOf("Opera")==-1) {
document.getElementById("TICKER").innerHTML = "<DIV nowrap='nowrap' style='width:100%;'>"+img+"<SPAN style='"+TICKER_STYLE+"' ID='TICKER_BODY' width='100%'></SPAN>"+img+"</DIV>";
tickerSupported = true;
}
if(!tickerSupported) document.getElementById("TICKER").outerHTML = ""; else {
document.getElementById("TICKER").scrollLeft = TICKER_RIGHTTOLEFT ? document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth : 0;
document.getElementById("TICKER_BODY").innerHTML = TICKER_CONTENT;
document.getElementById("TICKER").style.display="b lock";
TICKER_tick();
}
}

function TICKER_tick() {
if(!TICKER_PAUSED) document.getElementById("TICKER").scrollLeft += TICKER_SPEED * (TICKER_RIGHTTOLEFT ? -1 : 1);
if(TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft <= 0) document.getElementById("TICKER").scrollLeft = document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth;
if(!TICKER_RIGHTTOLEFT && document.getElementById("TICKER").scrollLeft >= document.getElementById("TICKER").scrollWidth - document.getElementById("TICKER").offsetWidth) document.getElementById("TICKER").scrollLeft = 0;
window.setTimeout("TICKER_tick()", 30);
}

Met de huge witruimte bedoel ik dit: http://i55.tinypic.com/vifuva.png. Dit komt doordat je een height: 2000px; aan je #wrap hebt meegegeven. Je wrapdiv zal dus altijd 2000px hoog zijn, ookal komt de content lang niet tot daar. Dit zou ik als ik jou was wel aanpassen :p

Je werkt veel met position: relative en absolute op plaatsen waar het helemaal niet nodig is. Overlaatst was hier nog zo iemand. Ik begrijp niet goed het nut daarvan; je kan het even goed zonder die positioning doen en je site ziet er hetzelfde uit (en is dan waarschijnlijk nog beter gecoded.)

En inderdaad, de gustibus et coloribus non disputandum est, maar toch kan het mij niet bekoren :)

Succes nog met je site!
J

Jackman666

Legacy Member
Hi Bram,

Hahaa, dus dat is de HUUUUGE space die je zag! Inderdaad, je hebt groot gelijk. Die was ik glad vergeten. Die 'wrap'div had ik inderdaad groot genoeg gemaakt zodat ze niet op een moment onder de rest in zou verdwijnen. Was de bedoeling dat ik die achteraf zou verkorten, dus dat ga ik snel even doen. Thanks. :-)

Klopt, position: relative en absolute zijn veel gebruikt. Komt door de Wiley Bible voor Html, XHtml en CSS. Maar ik ga er zowiezo wat mee experimenteren en de divs proberen te verminderen. Ik had wel een hardnekkig probleem met het naast elkaar plaatsen van 3 divs. Die wilden niet zomaar. Vandaar...

Ik dacht gisteren al dat je de code van de javascript banner ticker bedoelde. Zeer messy, he? Vond ik ook. Ik zal ze in Courier omzetten. Dat is inderdaad erg veel duidelijker. Deze code is niet door mij geschreven. Ik heb ze van het internet geplukt en van javascript ken ik nog niets, dus dan zeg ik: plaatsen en afblijven als het werkt. Wordt dus aangepast.

Thja, de gustibus et... Als we allemaal dezelfde dingen mooi vinden, maken we ook dezelfde dingen, he. Zou pretty boring worden. :-) Desondanks maak ik niet altijd van dit soort ontwerpen, hoor. Kan veel zakelijker ook. Misschien vindt je zoiets beter. :-)

Bedankt voor de verduidelijking, Bram, weeral vanalles geleerd, Tsjonge, het houdt niet op, eh! :-D

Jack
D

Dubbelpunt

Legacy Member
:offtopic: prachtige site, al moest ik even zoeken naar het menu eerlijk gezegd :$
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan