Jquery header lijnt buiten kader uit

[deTuinman]

Hallo,

Ik ben bezig met een header voor een website. En het gekke is dat hij op mijn computer problemen geeft, en sommige andere pcs en laptops niet.
Ik gebruik IE 8.0.7600 op een WIN7 pc. resolutie 1280x1024.




dit staat in de head:

JavaScript:

<script type="text/javascript">

$(document).ready(function() {      
    

    slideShow();

});

function slideShow() {


    $('#gallery a').css({opacity: 0.0});
    

    $('#gallery a:first').css({opacity: 1.0});
    

    $('#gallery .caption').css({opacity: 0.7});


    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
    

    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
    

    setInterval('gallery()',6000);
    
}

function gallery() {
    

    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));


    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));   
    

    var caption = next.find('img').attr('rel'); 
    

    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);


    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
    
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.8}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 }); 
    

    $('#gallery .caption').animate({opacity: 0.8},100 ).animate({height: '50px'},100 );
    

    $('#gallery .content').html(caption);
    
    
}

</script>
<style type="text/css">


.clear {
    clear:both
}

#gallery {
    position:relative;
    height:231px
}
    #gallery a {
        float:left;
        position:absolute;
    }
    
    #gallery a img {
        border:none;
    }
    
    #gallery a.show {
        z-index:500
    }

    #gallery .caption {
        z-index:600; 
        background-color:#ffffff; 
        color:#000000; 
        height:50px; 
        width:100%; 
        position:absolute;
        bottom:0;
    }

    #gallery .caption .content {
        margin:5px
    }
    
    #gallery .caption .content h3 {
        margin:0;
        padding:0;
        color:#fe0000;
    }
    

</style>

En in de body:

code:

<div id="header">
<div id="gallery">

    <a href="#" class="show">
        <img src="http://01.jpg" alt="" width="972" height="231" title="" alt="" rel=""/>
    </a>
        <div class="caption"><div class="content"></div></div>
</div>
</div>    

</div>

[ Voor 0% gewijzigd door BtM909 op 01-09-2010 14:10 ]

[MrVegeta]

Heb je de site niet online staan? Kijkt wat makkelijker, als ik zo moet gokken zeg ik dat je met de position:absolute verkeerd zit. Kan het niet zeker weten maar 9 van de 10 keer heeft het daar wat mee te maken . En opzich z-index: is ook niet helemaal lekker om te gebruiken. Verder gebruik je ook geen floats, dit is iets wat ik standaard wel altijd doe.

[ Voor 25% gewijzigd door MrVegeta op 01-09-2010 02:08 ]

[Bosmonster]

Als je items in elkaar over wilt laten faden kom je uiteraard niet om absolute en zIndex heen

Door alle javascript wordt het verder lastig hier een oorzaak aan te hangen zonder dat helemaal uit te pluizen. Een testcase zou een welkome toevoeging zijn.

[ Voor 45% gewijzigd door Bosmonster op 01-09-2010 09:52 ]

[deTuinman]

dit is een kant en klare script, maar wil je zeggen dat ik die absolute moet wijzigen voor relative?

www.vvemms.nl/index2.php is de site

modx cms hangt erachter en de template code zit hier in verwerkt

[Bosmonster]

In Chrome doet ie het overigens prima.

Firefox heeft als je absolute gebruikt ook je top/left nodig. Voeg top:0, left:0 toe en hij doet het ook goed.

Die float:left is natuurlijk nogal overbodig naast je position absolute

[ Voor 71% gewijzigd door Bosmonster op 01-09-2010 09:54 ]

[deTuinman]

het werkt!!, danku

[deTuinman]

helaas is het toch nog niet helemaal klaar:

zoals je ziet vindt er een verschuiving plaats die bij firefox wel goed is:

IE:

FF:

*knip*

[ Voor 91% gewijzigd door MueR op 02-09-2010 20:01 ]

[MueR]

We gaan niet door 200 regels code + nog een stylesheet spitten. Wat heb je zoal geprobeerd?

[deTuinman]

iedere left, top , bottom , div, mogelijkheid aangepast, maar deze fout is enkel te zien op geringe systemen

ik verwacht niet dat jullie de hele code doorspitten, maar het leek mij gewoon gemakkelijk

doe maar slotje dan, aangezien je de code hebt weggenomen

[8088]

deTuinman schreef op vrijdag 03 september 2010 @ 00:00:
maar deze fout is enkel te zien op geringe systemen

Ik zou graag willen helpen, maar ik heb hier alleen maar niet geringe systemen staan.

[deTuinman]

als het een te duur woord is, maak er maar paar van

als mij serieus wilt helpen kan ik je de code pmen

[8088]

Natuurlijk wil ik helpen, net zoals de meeste mensen hier. Waar ik op zinspeelde was je vage omschrijving van systemen waarop 't probleem zich voordoet. Je noemde IE 8 in je eerste post, dus daarin heb ik 'm even bekeken. Maar daarin werd de pagina prima weergegeven. Als je echt geholpen wilt worden, zul je toch iets meer moeite moeten doen: geef aan wat er precies fout gaat, hoe 't gereproduceerd kan worden (welke browser, welke versie), wat je hebt geprobeerd om 't zelf op te lossen, etc.

Code PMen gaat voorbij aan het doel van 't forum en is bovendien overbodig aangezien je al een link geplaatst hebt.

[ Voor 4% gewijzigd door 8088 op 03-09-2010 02:45 ]

[MueR]

Goed, genoeg geweest. Ik stel voor dat de TS de Quickstart nog eens goed doorleest. Op deze manier kunnen we niet veel met dit topic. We hebben niet allemaal toevallig een PC staan met de configuratie (die jij vergeet te vertellen), waarop het probleem te reproduceren is.

Je hebt nu twee keer flinke lappen code gepost en wil kost wat kost dat iemand je vertelt dat je op regel 147 waarde X moet aanpassen. Dat schiet niet op. We hebben fatsoenlijke informatie nodig. Het neigt mij nu veel te veel naar een "Kan iemand even .. ?".