Navigeren in website geeft een korte rare vervorming

[NRGetic]

Heb een website gemaakt met Joomla 1.5.6. Template gebruikt en volledig aangepast naar eigen smaak. Het vreemde is (en dit heb ik nog niet eerder gezien) is dat bij navigatie (menu klikken) door de site er telkens een rare vervorming te zien is (refresh???). Dacht eerst dat het aan IE lag, maar Firefox doet hetzelfde. Ligt volgens mij aan mijn site....

Dit is de website waar ik het over heb: http://www.primaverkoopstyling.nl
Dan kun je zien wat ik bedoel.

...heb gezocht via google en hier op GOT, maar kan helaas niets vinden om dit euvel te corrigeren.

/edit FF3 heeft dit probleem niet. IE6 en 7 wel

[ Voor 4% gewijzigd door NRGetic op 09-09-2008 22:55 ]

[Cruz]

Kzie niks.

[RetroTycoon]

Wat heb je zelf voor ideeën? Heb je een stukje code? We hebben hier ook geen glazen bol en gaan niet al het werk voor je doen

Een beetje TS mag met wat meer info

Succes met aanvullen!

[NRGetic]

RetroTycoon schreef op dinsdag 09 september 2008 @ 21:00:
Wat heb je zelf voor ideeën? Heb je een stukje code? We hebben hier ook geen glazen bol en gaan niet al het werk voor je doen

Een beetje TS mag met wat meer info

Succes met aanvullen!

Ja ik heb genoeg code en die ga ik hier niet posten want dan wordt het zo'n spampost....en jammer dat jij geen glazen bol hebt. En ik vraag ook niet of iemand hier al het werk voor mij gaat doen, wijsneus.

Ik vraag me alleen af of iemand hier eerder zoiets gezien heeft en wellicht een pasklare oplossing hiervoor heeft.

[NRGetic]

Cruz schreef op dinsdag 09 september 2008 @ 21:00:
Kzie niks.

Je bedoelt: In mijn browser gaat navigeren ok zonder vervorming?

[Cruz]

jep.

Niks speciaals te zien.

(in FF3 op Vista)

[ Voor 25% gewijzigd door Cruz op 09-09-2008 21:10 ]

[NRGetic]

Idd in FF3 (zojuist geinstalleerd) op XP geen probleem zo te zien....

[PeetR]

Als jij met vervormen een knipper in het beeld bedoelt dan zie ik dat ook idd.
Lijkt idd op een refresh. waarom het gebeurd? geen idee

[NRGetic]

PeetR schreef op dinsdag 09 september 2008 @ 21:19:
Als jij met vervormen een knipper in het beeld bedoelt dan zie ik dat ook idd.
Lijkt idd op een refresh. waarom het gebeurd? geen idee

jep dat bedoel ik....

[Arjen Tempel]

Je verwijst naar een stylesheet die niet bestaat:

code:

<link rel="stylesheet" href="/templates/_system/css/general.css" type="text/css" />

Probeer die verwijzing eens weg te halen.
Omdat een niet bestaande stylesheet niet gecached kan worden, zal IE die bij elke pageview opnieuw proberen op te halen. Misschien is dat de oorzaak van de 'flits'.

[NRGetic]

Arjen Tempel schreef op dinsdag 09 september 2008 @ 21:51:
Je verwijst naar een stylesheet die niet bestaat:

code:

<link rel="stylesheet" href="/templates/_system/css/general.css" type="text/css" />

Probeer die verwijzing eens weg te halen.
Omdat een niet bestaande stylesheet niet gecached kan worden, zal IE die bij elke pageview opnieuw proberen op te halen. Misschien is dat de oorzaak van de 'flits'.

Bedankt voor het meedenken...die verwijzing was helaas niet de oplossing.
Kennelijk was het legen van de cache lokaal op mijn pc ook nodig

Dat was dus wel de oplossing . Bedankt Arjan

Slotje erop

[ Voor 12% gewijzigd door NRGetic op 10-09-2008 11:19 ]

[André]

Wat gebeurd er als je de init functie niet bij de onload aanroept? Heb je zo stap voor stap al bekeken waar het zou kunnen zitten?

/edit
oke, de oplossing is er dus al.

[ Voor 13% gewijzigd door André op 10-09-2008 08:04 ]

[Bosmonster]

Ik zie in IE nog steeds een flikkering, maar dat is bij IE normaal.

[BtM909]

Voortaan toch even zelf beter debuggen voordat je een topic opent

[Noork]

De site is sowieso geen valide (x)html. Hier in FF3 en Opera loopt de witte achtergrondkleur niet door, maar stop al bovenin.

[NRGetic]

Noork schreef op woensdag 10 september 2008 @ 09:39:
De site is sowieso geen valide (x)html. Hier in FF3 en Opera loopt de witte achtergrondkleur niet door, maar stop al bovenin.

Hoezo is dit geen valide (x)html dan?
bij FF3 loopt de achtergrondkleur idd niet door...en is de witte border helemaal naar boven geplaatst

*terug naar de tekentafel dan maar......*

[ Voor 5% gewijzigd door NRGetic op 10-09-2008 15:03 ]

[OkkE]

Geen valid (x)html, geen valid css. _{Het is mierenneuken, ik weet 't ...}

Zo uit mijn hoofd: Je zou kunnen proberen of een overflow: auto; op het element met achtergrond kleur, effect heeft. Of een min-height:500px; ofzo.

[ Voor 3% gewijzigd door OkkE op 10-09-2008 11:51 ]

[NRGetic]

[quote]OkkE schreef op woensdag 10 september 2008 @ 11:49:
Geen valid (x)html

Thanks...
html is nu gevalideerd Nu css nog...working on that

[MueR]

Als je dan toch bezig bent, doe ook het menu meteen even. Die tabel daar heeft echt totaal geen nut en is semantisch incorrect.

[NRGetic]

MueR schreef op woensdag 10 september 2008 @ 13:46:
Als je dan toch bezig bent, doe ook het menu meteen even. Die tabel daar heeft echt totaal geen nut en is semantisch incorrect.

Welke bedoel je precies? CSS
_{Het menu is een extensie die ik ergens vandaan geplukt heb.}

[OkkE]

Hij bedoeld dit;

code:

<!--swMenuFree5.0J_1.5 transmenu by http://www.swmenupro.com-->
<div id="wrap" class="menu" align="right">
<table cellspacing="0" cellpadding="0" id="menu" class="menu" > 
<tr> 

<!-- TABEL MEUK -->

</tr> 
</table></div> 
<div id="subwrap"> 
<script type="text/javascript">
<!--
if (TransMenu.isSupported()) {
// Javascript meuk...
}
-->
</script>
</div>

Dit kan stukken netter en beter door bijvoorbeeld een UL te gebruiken icm. de juiste CSS. Dat de HTML validator en de CSS validator er niets over melden, wil niet altijd zeggen dat het daar mee ook correct is, en de beste manier.


_{PS: Het witte vlak loopt nog niet door, of ben je er niet meer mee bezig geweest.}

[ Voor 7% gewijzigd door OkkE op 10-09-2008 14:38 ]

[Verwijderd]

Je menu wijkt wat uit naar rechts. Volgens mij was dat niet de bedoeling ook

[OkkE]

Verwijderd schreef op woensdag 10 september 2008 @ 14:37:
Je menu wijkt wat uit naar rechts. Volgens mij was dat niet de bedoeling ook

Dat is wel de bedoeling, denk ik. Alleen ziet de hele website er in IE7 en FF niet uit zoals bedoeld, heb ik het idee. Wanneer je in IE6 kijkt, ziet er het iig stukken beter uit.

[NRGetic]

OkkE schreef op woensdag 10 september 2008 @ 14:40:
[...]

Dat is wel de bedoeling, denk ik. Alleen ziet de hele website er in IE7 en FF niet uit zoals bedoeld, heb ik het idee. Wanneer je in IE6 kijkt, ziet er het iig stukken beter uit.

Is idd wel de bedoeling, krijgt het net iets meer diepte, anders is ie zo flat. IE7 is wat mij betreft ook ok. Geen rare dingen bij mij iig. Alleen FF3 is nog een probleem.

Wil er wel mee bezig (graag zelfs) maar ik kan menu.css niet chmodden helaas. Moet ik ff thuis een nieuwe aangepaste menu.css uploaden.

PS: Het witte vlak loopt nog niet door, of ben je er niet meer mee bezig geweest.

Zal straks die overflow 's proberen....

_{*shhht...zit op het werk aan zijn site te werken...omdat er niets te doen is. Ftp is geblocked hiero*}

[ Voor 21% gewijzigd door NRGetic op 10-09-2008 15:00 ]

[OkkE]

Bij mij is alleen IE6 goed. In IE7 loopt het "witte kader" maar een aantal pixel naar beneden, in FF blijft hij boven aan de pagina hangen; IE6, IE7 en FF.

Zonder verder naar je CSS te kijken, heb ik het idee dat je nu het element met "witte kader" en vaste hoogte hebt gegeven (een height, ipv min-height)? Werkte een "overflow: auto;" niet voor FF en IE7?

Wat ik sowieso aanraad is om via Conditional Comments een speciale IE6 css in te laden, aangezien die browser zo anders is als de overige. Evt. kun je dat ook voor IE7 doen.

Een andere oplossing, al is het iets minder netjes, is net voor je het element (met witte kader) sluit, de volgende code opnemen, want het in alle browsers zou moeten oplossen:

code:

<div style="display:block; clear:both; height:0px; overflow: hidden;"></div>

[NRGetic]

Dat de site in IE7 niet (meer) correct wordt weergeven, komt denk ik doordat ik e.e.a. ge-edit heb vanmiddag. Gisteren (thuis op mijn pc) zag alles er nog ok uit in IE7. Kan het hier niet checken, draaien IE6.

Ik ga die laatste code van je proberen...als de borders dan goed zijn, dan ben ik op zich al blij. Wat betreft het menu: dat is dan voor latere zorg. Wil de site inhoudelijk afkrijgen namelijk.

Tof trouwens dat je me zo goed helpt

[OkkE]

Ik gebruik hier Multi IE, waardoor ik IE6 en IE7 naast elkaar heb (al werkt de IE6 niet 100% zoals de officiele, maar toch zeker 99%).

Die laaste code is een beetje een grote-stappen-snel-thuis oplossing, die ik in mijn werk eigenlijk (zo goed als) nooit gebruik, maar voor een Joomla template kan het imho prima.

En your welcome, het is mijn werk en had het even gehad met het project waar ik mee bezig ben. Dan is het prettig om even een paar minuten iets anders te doen.

[NRGetic]

Haha..

maareh...sorry ben het ff kwijt. Ik kan die code van jou toch niet in mijn design.css stoppen of heb ik dit nu verkeerd?

design.css

code:

body {
background-image : url(../images/bg.png);
background-repeat : repeat-x;
background-color : #E7E8EB;
margin : 0;
padding : 0;
font-family : arial, sans-serif;
font-size : 12px;
color : #000000;
}
a {
outline : none;
}
img {
border : 0;
}
h1 {
color : #cccccc;
font-weight : normal;
font-size : 15px;
}
h2 {
color : #666666;
font-weight : normal;
font-size : 13px;
}
h3 {
color : #000000;
font-weight : normal;
font-size : 13px;
}

#border {
margin : 0 auto;
width : 920px;
border : 10px solid #D4CFB2;
padding-top : 10px;
background-color : #ffffff;
}
#wrapper {
margin : 0 auto;
width : 900px;
background-color : #ffffff;
}
#top {
background-color : #ffffff;
background-image: url(../images/top.png);
width : 900px;
float : left;
height : 40px;
background-color : #242424;
margin-bottom : 10px;
}
#navigation {
float : left;
width : 900px;
height : 200px;
background-color : #ffffff;
margin-bottom : 10px;
}
#header {
width : 600px;
height : 200px;
float : left;
background-color : #8de94f;
background-image : url(../images/header.png);
}
#header h1 {
text-align : right;
}
#box {
width : 100%;
display : block;
padding-top : 10px;
padding-bottom : 10px;
margin-top : 150px;
}
a#box {
text-decoration : none;
color : #ffffff;
background-color : #000000;
}
a#box:hover {
color : #ffffff;
}
.testo {
padding : 0;
margin : 0;
}
#newsflash {
float : right;
width : 280px;
height : 180px;
overflow : auto;
background-color : #8de94f;
;
padding : 10px;
color: #8de94f;
}
#navigation-closer {
clear : both;
}
#leftcolumn {
background-color : #787878;
width : 170px;
height: 650px;
float : left;
padding : 10px 10px 10px 10px;
}
#rightcolumn {
float : right;
background-color : #ffffff;
width : 660px;
height: 650px;
display : inline;
}
#footer {
width : 900px;
clear : both;
background-color : #ffffff;
padding : 0 0 0 0;
font-size : 0.75em;
color : #999;
border-top : 1px solid #efefef;
margin-top : 10px;
}
#pathway {
font-size : 0.8em;
padding-bottom : 10px;
border-bottom : 2px solid #efefef;
}
#pathway a {
text-decoration : none;
}
#pathway a:hover {
text-decoration : none;
}
.rbroundbox {
background : url(../images/nt.gif) repeat;
}
.rbtop div {
background : url(../images/tl.gif) no-repeat top left;
}
.rbtop {
background : url(../images/tr.gif) no-repeat top right;
}
.rbbot div {
background : url(../images/bl.gif) no-repeat bottom left;
}
.rbbot {
background : url(../images/br.gif) no-repeat bottom right;
}
.rbtop div, .rbtop, .rbbot div, .rbbot {
width : 100%;
height : 7px;
font-size : 1px;
}
.rbcontent {
margin : 0 7px;
}
.rbroundbox {
width : 100%;
margin : 1em auto;
}

[OkkE]

Nee, het is een combinatie van HTML en CSS. Het mooiste zou dus zijn om in je CSS een class te maken:

code:

.clear { 
    display:block; clear:both; height:0px; overflow: hidden; border:none; 
}

En in je HTML (het Joomla template) de HTML toe te voegen, net voor het element met witte kader gesloten wordt:

code:

<div class="clear"></div>

Maar wat ook kan, is de volledige code die ik eerder poste, direct in je template te zetten. Zonder die extra CSS class.

[ Voor 14% gewijzigd door OkkE op 10-09-2008 15:33 ]

[NRGetic]

OkkE schreef op woensdag 10 september 2008 @ 15:02:

Een andere oplossing, al is het iets minder netjes, is net voor je het element (met witte kader) sluit, de volgende code opnemen, want het in alle browsers zou moeten oplossen:

code:

<div style="display:block; clear:both; height:0px; overflow: hidden;"></div>

Dus in de index.php? primaverkoopstyling.nl/public_html/templates/strom_10/index.php

bleeeh...ik word gaar Wil dit klaar hebben voor ik naar huis ga...

[ Voor 6% gewijzigd door NRGetic op 10-09-2008 15:46 ]

[OkkE]

Daar kan ik je echt niet mee helpen... Als ik het zo zie, dan denk ik het wel, maar ik heb natuurlijk geen idee welke templates er allemaal zijn, en wat daar allemaal wel en niet in staat. Ik zeg, zet het eens ergens en kijk wat er gebeurd. Werkt het niet, of valt de website verder uit elkaar, dan haal je 'm daar weg.

[NRGetic]

Ik heb hem hier tussen gezet maar er gebeurt weinig helaas (regel 18)

index.php

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/design.css" type="text/css" />
<!--[if IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7only.css"rel="stylesheet"type="text/css"/>
<![endif]-->
<!--[if lte IE 6]>
<link href="templates/<?php echo $this->template ?>/css/ie6only.css"rel="stylesheet"type="text/css"/>
<![endif]-->
</head>
<body>
<div style="display:block; clear:both; height:0px; overflow: hidden;"></div>
<div id="border">
<!-- Begin Wrapper -->
<div id="wrapper">
<!-- Begin Header -->
<div id="top"><jdoc:include type="modules" name="user3" style="xhtml" /></div>
<!-- End Header -->
<!-- Begin Navigation -->
<div id="navigation">
<div id="header"></div>
<div id="newsflash"><jdoc:include type="modules" name="top" style="xhtml" /></div>
<div id="nevigatin-closer"></div>

<!-- End Navigation -->
<!-- Begin Right Column -->
<div id="rightcolumn">
<div id="pathway"><jdoc:include type="module" name="breadcrumbs /></div>
<?php if($this->countModules('user1')) : ?>
<div id="latestnews">
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"><jdoc:include type="modules" name="user1" style="xhtml" /></div>
<div class="rbbot"><div></div></div></div></div>
<?php endif; ?>
<jdoc:include type="component" />
<?php if($this->countModules('user2')) : ?>
<div id="mostread">
<div class="rbroundbox">
<div class="rbtop"><div></div></div>
<div class="rbcontent"><jdoc:include type="modules" name="user2" style="xhtml" /></div>
<div class="rbbot"><div></div></div></div></div>
<?php endif; ?>
</div>
<!-- End Right Column -->
<!-- Begin Left Column -->
<div id="leftcolumn">
<p></p>
<jdoc:include type="modules" name="left" style="xhtml" />
<!-- End Left Column -->
<!-- Begin Footer -->
<!-- End Footer --></div>
<!-- End Wrapper --></div>
</div>
</div>
</body>
</html>

[OkkE]

Omdat -ie nu aan 't begin van het element staat.. Het element wat voor het witte kader zorgt, is "border", zoals in je CSS te zien is (design.css regel 33). Op regel 19 in je index.php begint dit element pas, en deze stopt op regel 60. Dus die code zou je eens op regel 60 moeten zetten (waarbij wat nu op 60 staat, naar 61 zakt).

_{En dat was 't, mijn werkdag zit er weer op. Succes, ik ga naar huis.}

[NRGetic]

haha...de border is nu een stukje gezakt in FF3...maar nog niet genoeg

/edit
nog ff met min-height gestoeid in design.css en nu is de border iig goed in FF3
Alleen de uitlijning in rightcolumn bij Portfolio is nog anders als in IE6...

[ Voor 55% gewijzigd door NRGetic op 10-09-2008 16:58 ]