Position issue in Internet explorer
hi everyone.
i'm having problem internet explorer , positioning. centered , moving , positioned everywhere except pc's earlier version of ie. have placed code below , can see issue live @ www.bnzr.it in advance help!!
| <!-- instancebegin template="/templates/project.dwt" codeoutsidehtmlislocked="false" --><!doctype html public "-//w3c//dtd html 4.01//en" | |
| "http://www.w3.org/tr/html4/strict.dtd"> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| <!-- instancebegineditable name="doctitle" --> | |
| <title>davide marchetti architetto</title> | |
| <!-- instanceendeditable --> | |
| <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/images/favicon.ico" /> | |
| <style type="text/css"> | |
| <!-- | |
| /** | |
| * slideshow style rules. | |
| */ | |
| #slideshow { | |
| margin: 0 auto; | |
| width: 708px; | |
| height: 346px; | |
| background: transparent url(images/davide-border.png) no-repeat 0 0; | |
| position: relative; | |
| } | |
| #slideshow #slidescontainer { | |
| /* [disabled]margin: 0 auto; */ | |
| width: 700px; | |
| height: 350px; /* allow scrollbar */ | |
| position: relative; | |
| } | |
| /** | |
| * slideshow controls style rules. | |
| */ | |
| .control { | |
| display:block; | |
| width:16px; | |
| height:39px; | |
| text-indent:-10000px; | |
| position:absolute; | |
| cursor: pointer; | |
| } | |
| #leftcontrol { | |
| z-index: 2; | |
| position: absolute; | |
| top:0; | |
| right:30px; | |
| background: url(images/left_control.png) no-repeat 0 0; | |
| } | |
| #rightcontrol { | |
| z-index: 2; | |
| top:0; | |
| right:5px; | |
| background: url(images/right_control.png) no-repeat 0 0; | |
| } | |
| #slideshow #slidescontainer .slide { | |
| margin: 22px auto; | |
| width:700px; /* reduce 20 pixels of #slidescontainer avoid horizontal scroll */ | |
| height:350px; | |
| } | |
| /** | |
| * style rules demo page | |
| */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| color: #000; | |
| font-family: "courier new", courier, monospace; | |
| font-size: xx-small; | |
| font-style: normal; | |
| font-weight: normal; | |
| font-variant: normal; | |
| } | |
| a { | |
| color: #fff; | |
| font-weight:bold; | |
| text-decoration:none; | |
| } | |
| a:hover { | |
| text-decoration:underline; | |
| } | |
| body { | |
| background:#ffffff; | |
| } | |
| #pagecontainer { | |
| margin:0 auto; | |
| width:960px; | |
| } | |
| #pagecontainer h1 { | |
| display:block; | |
| width:960px; | |
| height:114px; | |
| background:#ffffff; | |
| text-indent: -10000px; | |
| } | |
| .slide h2, .slide p { | |
| margin:15px; | |
| } | |
| .slide h2 { | |
| font:italic 24px georgia, "times new roman", times, serif; | |
| color:#ccc; | |
| letter-spacing:-1px; | |
| } | |
| .slide img { | |
| float:right; | |
| margin:0 15px; | |
| } | |
| #footer { | |
| height:100px; | |
| } | |
| #footer p { | |
| margin: 30px auto 0 auto; | |
| display: block; | |
| width: 703px; | |
| height: 40px; | |
| color: #000; | |
| font-family: "courier new", courier, monospace; | |
| } | |
| body,td,th { | |
| color: #000000; | |
| } | |
| #pagecontainer #footer p { | |
| color: #000; | |
| } | |
| #apdiv1 { | |
| position: absolute; | |
| width: 32px; | |
| height: 1px; | |
| z-index: 1; | |
| left: 130px; | |
| top: 441px; | |
| } | |
| #apdiv2 { | |
| position: absolute; | |
| width: 22px; | |
| height: 4px; | |
| z-index: 1; | |
| left: 0px; | |
| top: 349px; | |
| } | |
| #apdiv3 { | |
| position: absolute; | |
| width: 3px; | |
| height: 0px; | |
| z-index: 1; | |
| left: 214px; | |
| top: 350px; | |
| } | |
| #apdiv4 { | |
| position: absolute; | |
| width: 0px; | |
| height: 0px; | |
| z-index: 1; | |
| left: 442px; | |
| top: 350px; | |
| } | |
| #apdiv5 { | |
| position: absolute; | |
| width: 0px; | |
| height: 4px; | |
| z-index: 1; | |
| left: 655px; | |
| top: 350px; | |
| } | |
| #apdiv6 { | |
| position: inherit; | |
| width: 49px; | |
| height: 3px; | |
| z-index: 1; | |
| left: 0px; | |
| top: 1px; | |
| border: 0px; | |
| } | |
| a img { border:0 } | |
| --> | |
| </style> | |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| var currentposition = 0; | |
| var slidewidth = 723; | |
| var slides = $('.slide'); | |
| var numberofslides = slides.length; | |
| //starts automatically | |
| function autoshow(){ | |
| //alert(‘start’); | |
| currentposition = currentposition+1 ; | |
| if(currentposition==numberofslides){ | |
| currentposition=0; | |
| } | |
| // hide / show controls | |
| managecontrols(currentposition); | |
| // move slideinner using margin-left | |
| $('#slideinner').animate({ | |
| 'marginleft' : slidewidth*(-currentposition) | |
| }); | |
| timeout = settimeout(autoshow, 10000); | |
| } | |
| timeout = settimeout(autoshow, 10000); | |
| // remove scrollbar in js | |
| $('#slidescontainer').css('overflow', 'hidden'); | |
| // wrap .slides #slideinner div | |
| slides | |
| .wrapall('<div id="slideinner"></div>') | |
| // float left display horizontally, readjust .slides width | |
| .css({ | |
| 'float' : 'left', | |
| 'width' : slidewidth | |
| }); | |
| // set #slideinner width equal total width of slides | |
| $('#slideinner').css('width', slidewidth * numberofslides); | |
| // insert controls in dom | |
| $('#slideshow') | |
| .prepend('<span class="control" id="leftcontrol">clicking moves left</span>') | |
| .append('<span class="control" id="rightcontrol">clicking moves right</span>'); | |
| // hide left arrow control on first load | |
| managecontrols(currentposition); | |
| $('slideinner').animate({ | |
| 'marginleft' : slidewidth*(-currentposition) | |
| }); | |
| // create event listeners .controls clicks | |
| $('.control') | |
| .bind('click', function(){ | |
| // stop animation | |
| cleartimeout(timeout); | |
| // determine new position | |
| currentposition = ($(this).attr('id')=='rightcontrol') ? currentposition+1 : currentposition-1; | |
| // hide / show controls | |
| managecontrols(currentposition); | |
| // move slideinner using margin-left | |
| $('#slideinner').animate({ | |
| 'marginleft' : slidewidth*(-currentposition) | |
| }); | |
| }); | |
| // managecontrols: hides , shows controls depending on currentposition | |
| function managecontrols(position){ | |
| // hide left arrow if position first slide | |
| if(position==0){ $('#leftcontrol').hide() } else{ $('#leftcontrol').show() } | |
| // hide right arrow if position last slide | |
| if(position==numberofslides-1){ $('#rightcontrol').hide() } else{ $('#rightcontrol').show() } | |
| } | |
| }); | |
| // hide / show controls | |
| managecontrols(currentposition); | |
| // move slideinner using margin-left | |
| $('#slideinner').animate({ | |
| 'marginleft' : slidewidth*(-currentposition) | |
| }); | |
| settimeout(autoshow, 10000); | |
| </script> | |
| <!-- instancebegineditable name="head" --> | |
| <!-- instanceendeditable --> | |
| </head> | |
| <body text="#000000"> | |
| <div id="pagecontainer"> | |
| <h1><a href="">davide marchetti architetto</a></h1> | |
| <!-- slideshow html --> | |
| <div id="slideshow"><!-- instancebegineditable name="editregion1" --> | |
| <div id="apdiv6"><a href="main.html"><img src="images/hd-main.png" width="210" height="20" /></a></div> | |
| <div id="apdiv5"><a href="contact.html"><img src="images/hd-contact.png" width="47" height="19" usemap="#map2" border="0" /> | |
| <map name="map2" id="map2"> | |
| <area shape="rect" coords="-5,-1,62,30" href="contact.html" /> | |
| </map> | |
| </a></div> | |
| <div id="apdiv4"><a href="projects.html"><img src="images/hd-projects.png" width="55" height="19" usemap="#map" border="0" /> | |
| <map name="map" id="map"> | |
| <area shape="rect" coords="-2,-1,60,19" href="main.html" /> | |
| </map> | |
| </a></div> | |
| <div id="apdiv3"><a href="studio.html"><img src="images/hd-studio.png" width="41" height="19" usemap="#studiomap" longdesc="studio.html" border="0" /> | |
| <map name="studiomap" id="studiomap"> | |
| <area shape="rect" coords="-8,-2,78,22" href="studio.html" /> | |
| </map> | |
| </a></div> | |
| <div id="apdiv2"><a href="news.html"><img src="images/hd-news.png" width="78" height="19" usemap="#newsmap" border="0" /> | |
| <map name="newsmap" id="newsmap"> | |
| <area shape="rect" coords="-12,-10,164,65" href="main.html" /> | |
| </map> | |
| </a></div> | |
| <div id="slidescontainer"> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/detroit_1.png" width="714 | |
| " height="325"> | |
| </div> | |
| <div class="slide"><img src="images/projects/main_slideshow/detroit_2.png" width="714 | |
| " height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/detroit_3.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/detroit_4.png" width="714 | |
| " height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/expo_1.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/expo_2.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/expo_3.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/shanghai_1.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/shanghai_2.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/shanghai_3.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"><img src="images/projects/main_slideshow/12_london_1.png" width="714" height="325"></div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/venice_1.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/venice_2.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/venice_3.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"> | |
| <img src="images/projects/main_slideshow/venice_4.png" width="714" height="325"> | |
| </div> | |
| <div class="slide"><img src="images/projects/main_slideshow/08_cesena_1.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/09_cesena_2.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/19_tivoli_1.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/19_tivoli_2.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/20_bnc_flat_1.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/20_bnc_flat_2.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/20_bnc_flat_4.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/29_calls_1.png" width="714" height="325"></div> | |
| <div class="slide"><img src="images/projects/main_slideshow/30_calls_2.png" width="714" height="325"></div> | |
| </div> | |
| <!-- instanceendeditable --></div> | |
| <!-- slideshow html --> | |
| <div id="footer"> | |
| <p align="right"><a href="http://erinpellegrino.com"></a><img src="images/copyright.png" width="221" height="8" usemap="#map3" border="0" /> | |
| <map name="map3" id="map3"> | |
| <area shape="rect" coords="103,-30,246,10" href="http://erinpellegrino.com" /> | |
| </map> | |
| </p> | |
| </div> | |
| </div> | |
| </body> | |
| <!-- instanceend --></html> | |
except pc's earlier version of ie
what mean? looks centered in ie8. before ie8 not worth worrying because people buying new machines time comes new internet explorer.
ciao , luck against spain tomorrow.
More discussions in Dreamweaver support forum
adobe
Comments
Post a Comment