-
03-08-2011, 04:40 #1Member
- Registered
- 02/08/11
- Location
- Hasselt - België
- Posts
- 6
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
IE8: ongewilde witruimte boven en onder text banner (+ 2 andere probleempjes)
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%'> </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);
}no votes
-
-
05-08-2011, 23:04 #2Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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 contentno votes
-
06-08-2011, 02:39 #3Member
- Registered
- 02/08/11
- Location
- Hasselt - België
- Posts
- 6
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
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. :-)
JackLast edited by Jackman666; 06-08-2011 at 05:25.
no votes
-
06-08-2011, 11:19 #4Deactivated user
- Registered
- 14/08/10
- Location
- Diest
- Posts
- 2,419
- iTrader
- 1 (100%)
- Mentioned
- 0 Post(s)
- Reputation
- 8/16
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 ('') plaatst, zo dus:
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 aanpassenCode: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%'> </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); }
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!no votes
-
06-08-2011, 15:45 #5Member
- Registered
- 02/08/11
- Location
- Hasselt - België
- Posts
- 6
- iTrader
- 0
- Mentioned
- 0 Post(s)
- Reputation
- 0/0
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
JackLast edited by Jackman666; 06-08-2011 at 16:03.
no votes
-
06-08-2011, 16:12 #6
prachtige site, al moest ik even zoeken naar het menu eerlijk gezegd
no votes
