Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts

    Horizontal image set wrapping when browser is not maximized

    Hi,

    I can't quite figure out why, but the horizontal image set I have contained in the div 'logoC' wraps onto a second line if the user's browser isn't maximized (or big enough), and even after the user maximizes the window the images stay stuck where they were: you can see it here www.enviromark.ca/head/ (open it in a shrunken browser window)

    Does anybody know why this is occurring? I would like it so that regardless of window size they display horizontally in one line

    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    * html #pageContainer {
    height:100%;
    }
    * img {
    border: 0 
    }
    #pageContainer {
    min-height: 100%;
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    #topText {
    position: relative;
    margin-top:75px;
    margin-left: 75px;
    }
    #logoC {
    margin-left: 175px
    }
    #bottomText {
    margin-left: 75px;
    margin-top: 67px
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 25px;
    width: 70px;
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #contentarea {
    position: relative;
    margin-left: 155px;
    margin-top: 27px;
    margin-right: 150px;
    }
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Testing</title>
    
    
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    // Common Functions
    // By Vic Phillips (30-June-2007) http://www.vicsjavascripts.org.uk
    
    
    // Functional Code - No Need to Change
    
    var zxcEvt=0;
    
    function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
     if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
     for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
     if (zxcp){ zxcp.appendChild(zxcele); }
     if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
     return zxcele;
    }
    
    function zxcStyleValue(zxcobj,zxcp){ //  pass object and property, returns property value
     if (zxcobj.currentStyle) return zxcobj.currentStyle[zxcp.replace('-','')];
     return document.defaultView.getComputedStyle(zxcobj,null).getPropertyValue(zxcp.toLowerCase());
    }
    
    function zxcStyleRules(){
     var zxcssheets=document.styleSheets;
     var zxcruleary=[];
     var zxcstyleary=[];
     for (var zxc0=0;zxc0<zxcssheets.length;zxc0++){ zxcstyleary.push((document.all)?zxcssheets[zxc0].cssText:zxcssheets[zxc0]); }
     if (document.all){
      for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
       zxcstyleary[zxc1]=zxcstyleary[zxc1].split('}');
       for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].length-1;zxc1a++){
        zxcruleary.push(zxcstyleary[zxc1][zxc1a].replace(/\s/g,'')+'}');
       }
      }
     }
     else {
      for (var zxc1=0;zxc1<zxcstyleary.length;zxc1++){
       for (var zxc1a=0;zxc1a<zxcstyleary[zxc1].cssRules.length;zxc1a++){
        zxcruleary.push(zxcstyleary[zxc1].cssRules[zxc1a].cssText.replace(/\s/g,''));
       }
      }
     }
     return zxcruleary
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    function zxcWWHS(){
     if (window.innerHeight) return [window.innerWidth-10,window.innerHeight-10,window.pageXOffset,window.pageYOffset];
     else if (document.documentElement.clientHeight) return [document.documentElement.clientWidth-10,document.documentElement.clientHeight-10,document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.clientWidth,document.body.clientHeight,document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcNoTxtNodes(zxcp){
     var zxcclds=zxcp.childNodes,zxcary=[];
     for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
     for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
     return zxcclds;
    }
    
    function zxcMse(zxcevt){
     if(!zxcevt) var zxcevt=window.event;
     if (document.all) return [zxcevt.clientX+zxcDocS()[0],zxcevt.clientY+zxcDocS()[1]];
     return [zxcevt.pageX,zxcevt.pageY];
    }
    
    function zxcDocS(){
     if (!document.body.scrollTop) return [document.documentElement.scrollLeft,document.documentElement.scrollTop];
     return [document.body.scrollLeft,document.body.scrollTop];
    }
    
    function zxcEventAdd(zxco,zxct,zxcf) {
     if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
     else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
     else {
      var zxcPrev=zxco["on" + zxct];
      if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
      else { zxco['on'+zxct]=zxco[zxcf]; }
     }
    }
    
    function zxcAddEvent(zxc,zxcfun,zxcevt){
     if (zxc.addEvent){ return; }
     zxc.addEvent=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'addEvent');
    }
    
    function zxcAddEvt(zxc,zxcfun,zxcevt){
     zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
     zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
     zxcEvt++;
    }
    
    function zxcRemoveEvt(zxcfun,zxcevt){
     if ( zxco.removeEventListener ){ zxco.removeEventListener(zxcevt,zxcfun,false); }
     else if (zxco.detachEvent){ zxco.detachEvent('on'+zxcevt,zxcfun); }
    }
    
    function zxcOpacity(zxcobj,zxcopc) {
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    function zxcCkEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     if (zxce.target) zxceobj=zxce.target;
     else if (zxce.srcElement) zxceobj=zxce.srcElement;
     if (zxceobj.nodeType==3) zxceobj=tt_eobj.parentNode;
     var zxcft;
     if (zxce.type=='mouseout'){ zxcft=zxcEventTo(zxce); }
     else { zxcft=zxcEventFrom(zxce); }
     if (zxcft.oop){ return false; }
     while (zxcft.parentNode){
      if (zxcft.oop){ return false; }
      zxcft=zxcft.parentNode;
     }
     return true;
    }
    
    function zxcCkEventObj(zxce){
     if (!zxce) var zxce=window.event;
     zxce.cancelBubble=true;
     if (zxce.stopPropagation) zxce.stopPropagation();
     var zxceobj=(zxce.relatedTarget)?zxce.relatedTarget:(zxce.type=='mouseout')?zxce.toElement:zxce.fromElement;
     while (zxceobj.parentNode){
      if (window['zxc'+zxceobj.id]){ return false; }
      zxceobj=zxceobj.parentNode;
     }
     return true;
    }
    
    //-->
    </script><script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcResetImages(zxcid2){
     var zxcp=document.getElementById(zxcid2);
     zxcp.hold=null;
     if (zxcp.ary){
      for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
       if (zxcp.mirror[zxc0][2].oop){
        if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
       }
       if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
       if (zxcp.ary[zxc0][2].oop){
        if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
       }
       if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
      }
     }
    }
    
    function zxcInitImages(zxcid1,zxcid2){
     var zxcp1=document.getElementById(zxcid1);
     var zxcp2=document.getElementById(zxcid2);
     zxcNoTxtNodes(zxcp1);
     zxcNoTxtNodes(zxcp2);
     var zxcimgs1=zxcp1.getElementsByTagName('IMG');
     var zxcimgs2=zxcp2.getElementsByTagName('IMG');
     zxcp2.mirror=[];
     zxcp2.ary=[];
     for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
     for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
     for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
      zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
      var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
      zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
     }
     for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
      zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
      zxcp2.ary[zxc4][2].onclick=zxcp2.ary[zxc4][0].onclick;
      var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
      zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
      zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseover');
      zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','mouseout');
      zxcAddEvt(zxcp2.ary[zxc4][2],'zxcMseOverOut','click');
     }
     zxcp2.hold=null;
     zxcp2.holdmirror=null;
    }
    
    
    function zxcMseOverOut(zxcevt){
     var zxcp=this.parentNode;
     var zxcdivs=zxcp.childNodes;
     for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
      if (zxcdivs[zxc0]==this) break;
     }
     if (zxcevt.type=='click'){
      if (zxcp.hold&&zxcp.hold!=this) zxcFadeDo(zxcp.hold,'mouseout'); // to fix  * If I click a second time on an image in links_BW (double-click slowly), the image fades back from colored to gray and stays that way. Can you set the script to verify that an image in links_BW is not already "set to color" to avoid this?
      zxcp.hold=this;
      if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
      zxcp.holdmirror=zxcp.mirror[zxc0][2];
      zxcFadeDo(zxcp.holdmirror,'mouseover');
     }
     else if (this!=zxcp.hold){
      zxcFadeDo(this,zxcevt.type);
    // zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // to make horizontal fade onmouseover
     }
    }
    
    function zxcFadeDo(zxcobj,zxcmde){
     if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
     if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
     clearTimeout(zxcobj.oop.to);
     zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2;  // adjust speed here
     if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
     else zxcobj.oop.swap();
    }
    
    function zxcCkOpactiy(zxcobj){
     if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
     return true;
    }
    
    var zxcOOPCnt=0;
    
    function zxcFadeOOP(zxcobj,zxcident){
     this.to=null;
     this.ref='oop'+zxcOOPCnt++;
     window[this.ref]=this;
     this.obj=zxcobj.childNodes[1];
     zxcES(zxcobj.childNodes[0],{zIndex:'0'});
     this.ud=0;
     this.inc=0;
     this.opacity(0);
    }
    
    zxcFadeOOP.prototype.swap=function(){
      if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
      this.opacity(this.inc+=this.ud);
      this.setTimeOut('swap()',10);
     }
    }
    
    zxcFadeOOP.prototype.cont=function(){
     if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
      this.opacity(this.inc-=this.ud);
      this.setTimeOut('cont()',10);
     }
     else if (this.ud<0&&this.inc>0){
      this.ud=-this.ud
      this.setTimeOut('cont()',10);
     }
    }
    
    zxcFadeOOP.prototype.opacity=function(zxcopc){
     if (zxcopc<0||zxcopc>100) return;
     if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
     else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
     else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
     else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
    }
    
    zxcFadeOOP.prototype.setTimeOut=function(zxcf,zxcd){
     this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
    }
    
    //-->
    </script>
    
    </head>
    
    <body onload="zxcInitImages('logoC','links_BW')">
    <div id="pageContainer">
    	<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
    	<div id="logoC">
    		<img src="images/logoButtons/info_C.gif" >
    		<img src="images/logoButtons/YPP_C.gif" >
    		<img src="images/logoButtons/social_C.gif" >
    		<img src="images/logoButtons/med_C.gif" >
    		<img src="images/logoButtons/legal_C.gif" >
    		<img src="images/logoButtons/J2K_C.gif" >
    		<img src="images/logoButtons/street_C.gif" >
    	</div>
    	<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
    	<div id="links_BW">
    		<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
    		<img src="images/logoButtons/YPP_BW.jpg" >
    		<img src="images/logoButtons/social_BW.jpg" >
    		<img src="images/logoButtons/med_BW.jpg" >
    		<img src="images/logoButtons/legal_BW.jpg" >
    		<img src="images/logoButtons/J2K_BW.jpg" >
    		<img src="images/logoButtons/street_BW.jpg" >
    
    	</div>
    	<div class="clear"></div>
    	<div id="contentarea"></div>
    
    	<script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:hidden;top:420px;left:0px;" >
    <input size=10 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=10 cols=100 ></textarea>
    </form>
    
    </div>
    </body>
    </html>
    Thanks
    Last edited by canadianjameson; 07-10-2007 at 10:55 PM.
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    During initialisation the images are in absolutely positioned DIVs.
    This is carried out sequentially so if the width of the containing div width is less than the required position of the last image left+width the divs will wrap.

    Try:

    1) Stop using margins.

    2) Specifying the required width of the parent DIV.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I would also recommend you place all of the script into an external file so that you don't have to replicate it on all the pages you create. It's pointless unless you only use it on that page, and if you do use it site-wide then it will reduce loading times dramatically once the script has been run once.
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •