PDA

View Full Version : strange display with ie8



gilexpat
01-26-2011, 09:20 AM
1) Script Title: thumbnail viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: with mozilla the action work perfect but with Ie 8 and opera the footer and the caption appears on the right of the image . I try to remove the caption but still the close button appears on the right side of the image.
i try to reduce the picture but still same problem. Is it a specific problem with ie 8 , any ideas how to solve it is welcome thank you all for an help

Beverleyh
01-26-2011, 09:44 AM
I'm not sure what you're trying to say as the demo looks fine to me.

If this is something that is happening on your own installation, its probably something in your other CSS thats cascading down and affecting alignment. We'd need a link to your problematic page to offer suggestions though.

ddadmin
01-26-2011, 10:06 PM
Does this problem occur on the DD demo page, or just on your own page? If the later please post a link to the page on your site that contains the problematic script so we can check it out.

gilexpat
01-30-2011, 08:16 AM
Hi Beverleyh, in fact yes the demo works perfectly. I thinks your' re right I may have something interferring in the css. As I'm working locally I can give a link I just can copy the source code here :

<!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="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="fr" http-equiv="Content-Language" />
<title>Autotour apercu de la namibie</title>
<style type="text/css">
.initial2{font-weight:bold;background-color:goldenrod;align:center}
</style>
<script type="text/javascript">
<!--
/***********************************************
* Rollover background-color button Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")
var buttontarget="myframe"
function change(e, color){
var el=window.event? event.srcElement: e.target
if (el.tagName=="INPUT"&&el.type=="button")
el.style.backgroundColor=color
}
function jumpto2(url){
if (buttontarget=="myframe")
window.location=url
else if (buttontarget=="_new")
window.open(url)
else
parent[buttontarget].location=url
}
//-->
</script>
<link rel="stylesheet" href="styles.css" type="text/css" />
<link rel="stylesheet" href="thumbnailviewer.css" type="text/css" />
<script src="thumbnailviewer.js" type="text/javascript"></script>
<script type="text/javascript" src="code.jquery.com/jquery-latest.js"></script><!--Common jQuery plugin here -->
<script language="JavaScript" src="slider-js/jquery.jcarousel.js" type="text/javascript"></script>
<link rel="stylesheet" href="slider-js/jquery.jcarousel.css" type="text/css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
// Configuration goes here
});
});
</script>
<script type="text/javascript" src="include/jquery.twit.min.js"></script>
<script type="text/javascript" src="include/jquery.twit.js"></script>
<link href="include/jquery.twit.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="include/jquery.example.js"></script>
<script type="text/javascript" src="include/jquery.validate.pack.js"></script>
<script type="text/javascript" src="include/jquery.contactable.js"></script>
<link rel="stylesheet" href="include/contactable.css" type="text/css" />
<link href="include/ad.css" type="text/css" rel="stylesheet" /><!--ad css here -->
<script type="text/javascript">
//Contact starts here
$(function(){
$('#contactAt').contactable({
recipient: 'email@companyname.com',
subject: 'The Quick Message'
});
});
$(document).ready(function(){
$('div#headerBt').click(
function() {
$('#headerContent').animate({"marginTop": "-=60px"}, "slow");
$(this).animate({"marginTop": "-=60px"}, "slow").animate({"marginTop": "+=5px"}, "fast");
$('#TotalBodyId').animate({"marginTop": "-=60px"}, "slow");
$('#TotalBodyId').css({backgroundPosition: "0 0"});
});
$('div#footerBt').click(
function() {
$('#footerContent').animate({"marginBottom": "-=45px"}, "slow");
$(this).animate({"marginBottom": "-=45px"}, "slow").animate({"marginBottom": "+=5px"}, "fast");
$('#fotplug').hide('slow');
});
});
</script>
<style type="text/css" media="all">
#fotplug{
width:100%;
height:40px;
float:left;
}
</style>
<script type="text/javascript" src="include/index.js"></script>
<style type="text/css">/*<![CDATA[*/ #topcontrol{ opacity: 3; z-index: 9000; } /*]]>*/
</style>
<style type="text/css">
<!--
.centre
{
width:580px;
height: 1390px;
overflow:auto;
border: 0px;
}
//-->
.style1 {
font-weight: bold;
}
.style2 {
border: 1px solid #BC955C;
}
.style3 {
margin-right: 130;
color: #5B5A5A;
}
.style4 {
text-align: justify;
}
.style5 {
color: #5B5A5A;
}
.style8 {
color: #5B5A5A;
margin-right: 0px;
}
.style9 {
text-align: justify;
font-size: x-large;
color: #727272;
}
.style10 {
color: #727272;
}
</style>
</head>
<body>
<div id="contactAt">
</div>
<div id="top-wrap">
<div class="body-wrap" style="left: 0px; top: 0px">
<h1 class="style8" style="height: 134px; width: 53px;">
<a href="english-about.html"><img alt="" height="40" src="images/flagen.png" style="z-index: 1; width: 40px; height: 40px; position: absolute; top: 200px; left: 278px" /></a></h1><!-- logo here -->
<em class="ttip">Voyage Spécialiste</em>
<ul class="nav" style="height: 56px">
<li><a href="index-2.html"><span>Accueil</span></a></li>
<li><a href="about.html"><span>Nous</span></a></li>
<li><a href="namibie.html" class="active"><span>Namibie</span></a></li>
<li><a href="botswana.html"><span>Botswana</span></a></li>
<li><a href="afrique du sud.html"><span>Afrique du sud</span></a></li>
<li><a href="afrique australe.html"><span>Afrique Australe</span></a></li>
<li><a href="planning.html"><span>Conseils</span></a></li>
<li><a href="condition.html"><span>Conditions</span></a></li>
<li><a href="contact.php"><span>Contact</span></a></li></ul>
<img src="images/text2.png" height="103" width="181" />
<div class="rightPan" style="height: 1435px">
<img src="images/top-curve.png" width="630" height="30" alt=" " align="left" />
<div class="innerContent" style="height: 1405px">
<div class="mainContent">
<div class="centre">
<h2>Apercu de la Namibie / Autotour (11 jours/10 nuits) </h2>
<ul class="blog">
<li style="height: 6px"><h5>Itinéraire détaillé</h5><br />
<li style="width: 558px" class="style3"><p style="width: 558px; height: 20px;"><span class="style4">
Pour une 1ere approche de la Namibie avec le Parc Animalier D’Ethosa / Les
paysages Vallonnes du Damaraland, les dunes de Sossusvlei, la station balnéaire
de Swakopmund et Windhoek.</span><br />
<p class="post">
<table style="width: 100%"><tr><td style="width: 109px">
<a href="images/promo1.jpg" rel="thumbnail" title="Votre camping van et votre maison pour 10 jours!"><img src="images/promo1s.jpg" style="width: 60px; height: 60px" /></a></td><td class="style4"><strong>Jour 1 - WINDHOEK</strong><br />
Arrivée à WINDHOEK. Prise en charge à l&#39;aéroport d&#39;un véhicule de
location de cat B. 4X4 en supplément nous consulter . Installation à
votre hôtel en ville. Chambre mise à disposition à partir de 13h00.
Reste de la journée libre.<br /></td></tr>
<tr><td style="width: 109px">
<a href="images/promo2.jpg" rel="thumbnail" title="Le lodge ou vous aller résider pour la nuit!"><img src="images/promo2.jpg" style="width: 60px; height: 60px" /></a></td>
<td><strong>Jour 2 - (petit déjeuner, dîner) - WINDHOEK / SESRIEM (env. 320 km)</strong><br />
Arrivée aux dunes de SOSSUSVLEI. Nuit dans un lodge sous tente avec lits et sanitaires privés.<br />
</td>
</tr>
<p class="link" style="text-align: center"><form onMouseover="change(event, 'saddlebrown')" onMouseout="change(event, 'goldenrod')">
<input type="button" value="Autotours" class="initial2" onClick="jumpto2('namibie.html')" />
<input type="button" value="Safaris aeriens" class="initial2" onClick="jumpto2('namibie.html')" />
<input type="button" value="Patchwork" class="initial2" onClick="jumpto2('namibie.html')" />
</form></p> </li >
</ul >
</div></div>
</div><!--end of inner content -->
&nbsp;</div><!--end of rightPan-->
</div><!--end of right content -->
</div><!--end of body -wrapper-->
<div id="footer-wrap">
<div id="footer">
<!--copyright content here-->
<p class="copyright">© namibie-voyage.com</p>
<p class="sign">Designed by: Esydesign</p>
<ul class="footNav">
<li><a href="privacy.html">Confidentialité</a></li><li>|</li>
<li><a href="sitemap.html">Sitemap</a></li><li>|</li> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="style10"> </span><span class="style9">
<li><span lang="fr">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></li>
Le spécialiste de l&#39;afrique australe</span></ul><!--end of footer navigation-->
</div><!--end of footer-content-->
</div><!--end of footer-wrap-->
</div><!--end of outer-wrapper-->
<script language="JavaScript" src="include/scroll.js" type="text/javascript"></script>
</body>
</html>

Well thank for your concern and to let me know is somethings look wrong to you.
bye and good day. Gilexpat

gilexpat
01-30-2011, 08:21 AM
Hello DD - the demo on line work perfect. I wish i can give a link but i'm working locally not yet on line so I will continue to check as beverlyh told me in the css i may have something wrong.