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 10 of 10
  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

    little display: inline issue

    Hey,

    I'm having a little trouble, which is probably due to how I set up the css... maybe you can tell me.

    (please use IE, i havent got it working in FF yet )

    if you go to www.enviromark.ca/head/ and click on the fourth black / white button (the stethoscope -- turns green), then click one of the links, you'll see the e-mail icon on the right hand side go downwards.

    How do i prevent this? position: absolute doesn't work

    Code:
    #emailSection {
    display: inline;
    clear: both;
    float: right;
    width: 150px;
    margin-right: 40px;
    text-align: center;
    margin-top: 10px
    }
    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
    Regular Coder Jutlander's Avatar
    Join Date
    Jun 2007
    Location
    In my own sick little world :P
    Posts
    425
    Thanks
    1
    Thanked 12 Times in 12 Posts
    I don't get anything when pressing that link, it's just blank...
    .
    .

  • #3
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    http://www.enviromark.ca/head/index.htm

    problem fixed, sorry about that

    make sure you're using internet explorer
    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 :)

  • #4
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    I'm going to bump this because I'm still having the problem.

    any ideas on why the div containing the e-mail icon / text seems to be attached to the main content div? I assume it's a simple answer but i havent been able to fix it
    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 :)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This appears to work.

    Code:
    #emailSection {
    clear:both;
    display:inline;
    float:right;
    margin-right:40px;
    margin-top:10px;
    text-align:center;
    width:150px;
    position:absolute;
    left:80%;
    top:75%;
    }
    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    you may not need this - float:right;

    Frank
    Last edited by effpeetee; 08-10-2007 at 12:59 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Thanks frank,

    It does appear to work on a given screen resolution and maximized browser,\, however if you shrink the window size / change resolution it's position goes wonky (this is why I avoid using %'s to position on a page... it is easy to do and looks fantastic until you open it on another computer and the objects are not where you wanted them :/

    The problem here is that it seems to be inheriting some attributes from another element on the page and I cant figure out what... or how to stop it because clearing doesn't seem to work :/
    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 :)

  • #8
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    It's odd really. Most of the sources I have read; suggest %ages to overcome changes due to differing screen resolutions.
    Is it just a browser problem or have I mis-understood.

    CSS - Constantly Surprising Someone!

    Heh heh

    Frank!

    It's very slow posting tonight.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #9
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Edit
    Index2.htm seems to display as i want it too in FF, but not in IE... this makes life easier -- one little hurdle left

    I have managed to put together a visual of what is going on and I will bold the affected code in both situations. This should make life easier for those who are trying to help me solve the problem

    I have also given both divs a border to help the visualization:

    www.enviromark.ca/head/index.htm
    www.enviromark.ca/head/probs/index2.htm

    the change that has been made between these two files is as follows -- see bold:


    index.htm:
    Code:
    <div id="contentarea"></div>
    <div id="emailSection"></div>
    index2.htm:
    Code:
    <div id="emailSection"></div>
    <div id="contentarea"></div>
    here's the entire html code
    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/mainTest.css" type="text/css">
    <link rel="stylesheet" href="../css/rightNav.css" type="text/css">
    <script type="text/javascript" src="../js/DynamicAjaxContent.js"></script>
    <script type="text/javascript" src="../js/Toggle.js"></script>
    <script type="text/javascript" src="../js/customWin.js"></script>
    <script type="text/javascript" src="../js/link_titles.js"></script>
    <script type="text/javascript" src="../js/rightNav_switcher.js"></script>
    <script type="text/javascript" src="../js/effects/FadeImages.js"></script>
    <script type="text/javascript" src="../js/effects/Animator.js"></script>
    <script type="text/javascript" src="../js/effects/BorderFade.js"></script>
    <link href="../p7ssm/p7ssm_03.css" rel="stylesheet" type="text/css" media="all">
    <script type="text/javascript" src="../p7ssm/p7SSMscripts.js"></script>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function  zxcWatchDog(){
     if (document.getElementById('pageHolder')) zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');
     else setTimeout('zxcWatchDog()',20);
    }
    /*]]>*/
    </script>
    <script type="text/javascript">
    /*<![CDATA[*/
    function assignMouseOver(){
     var olinks_BW = document.getElementById("links_BW");
     var oldOnMouseOver = olinks_BW.onmouseover;
     if (typeof oldOnMouseOver != 'function') {//If onmouseover is not a function we can safely overwrite it.
      olinks_BW.onmouseover = function(){zxcOnce('nav_helper');}
     } 
     else {//Otherwise create a new function that calls the old onmouseover function plus our new function.
      olinks_BW.onmouseover = function() {
       if (oldOnMouseOver) {
        oldOnMouseOver();
       }
       zxcOnce('nav_helper');
      }
     }
    }
    
    
    function zxcOnce(zxcid){ 
     	if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000)
    }
    
    function zxcOnceClick(zxcid){
    	 if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000);
    }
    
    /*]]>*/
    </script>
    </head>
    
    <body onload="zxcInitImages('logoC','links_BW'); setTimeout(assignMouseOver,5000);">
    <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/health_C.gif" >
    		<img src="../images/logoButtons/legal_C.gif" >
    		<img src="../images/logoButtons/J2K_C.gif" >
    		<img src="../images/logoButtons/streetwork_C.gif" >
    	</div>
    	<div id="bottomText"><img src="../images/logoButtons/bottom_text.gif"></div>
    	<img src="../images/logoButtons/titles/blank_title.gif" id="blank_title" name="title_display"> 
    	<div id="links_BW" onclick="mClear(); zxcOnceClick('nav_helper')">
    		<img name="infoButton" src="../images/logoButtons/info_BW.gif" onclick="email('info'); ajaxpage('../info.htm', 'contentarea'); loadobjs('../css/info.css');" onmouseover="on1();" onmouseout="off1();">
    		<img name="YPPButton" src="../images/logoButtons/YPP_BW.gif" onclick="email('YPP'); ajaxpage('../YPP.htm', 'contentarea'); loadobjs('../css/ypp.css');"  onmouseover="on2();" onmouseout="off2();">
    		<img name="socialButton" src="../images/logoButtons/social_BW.gif" onclick="email('social'); ajaxpage('../social.htm', 'contentarea'); loadobjs('../css/social.css')" onmouseover="on3();" onmouseout="off3();">
    		<img name="healthButton" src="../images/logoButtons/health_BW.gif" onclick="email('medical'); ajaxpage('../medical.htm', 'contentarea'); loadobjs('../css/medical.css')" onmouseover="on4();" onmouseout="off4();">
    		<img name="legalButton" src="../images/logoButtons/legal_BW.gif" onclick="email('legal');" onmouseover="on5();" onmouseout="off5();">
    		<img name="J2KButton" src="../images/logoButtons/J2K_BW.gif" onclick="email('J2K');" onmouseover="on6();" onmouseout="off6();">
    		<img name="streetworkButton" src="../images/logoButtons/streetwork_BW.gif" onclick="email('streetwork');" onmouseover="on7();" onmouseout="off7();">
    	</div>
    		<img src="../images/nav_helper.jpg" id="nav_helper">
    	<div class="clear"></div>
    	<div id="navcontainer" onclick="zxcResetImages('links_BW'); zxcOnceClick('nav_helper')">
    		<ul id="navlist">
    			<li><a id="about" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('navTester.htm', 'contentarea');">About Us</a></li>
    			<li><a id="people" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">People:<br>Past and Present</a></li>
    			<li><a id="media" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">Media / Press</a></li>
    			<li><a id="getinvolded" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">Get Involved</a></li>
    			<li><a id="donate" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">Donate</a></li>
    			<li><a id="forums" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">Forums</a></li>
    			<li><a id="extraLinks" class="default" href="#" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this); ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/ypp.css');">Links</a></li>
    		</ul>
    	</div>
    	<div id="emailSection"></div>
    	<div id="contentarea"></div>
    	
    </div>
    <!-- Put this script element at the end of the body element. -->
    <script type="text/javascript">
    	// The deprecated media type text/javascript is used for IE compatibility.
    	var d = document;
    	var domain = "headandhands.ca";
    	function email(name) {
    		// This removes the anchor element if it already exists.
    		if (d.getElementById("email")) {
    			d.getElementById("email").parentNode.removeChild(d.getElementById("email"));
    		}
    		var anchor = d.createElement("a");
    		var image = d.createElement("img");
    		var span = d.createElement("span");
    		anchor.setAttribute("id", "email");
    		anchor.setAttribute("href", "mailto:" + name + "@" + domain);
    		// window.status code is omitted since Fx, IE7, Op, et al block it by default; window.status is also non-standard code.
    		image.setAttribute("alt", ""); // This attribute is required for validity in HTML.
    		image.setAttribute("width", "###"); // This decreases the perceived load time.
    		image.setAttribute("height", "###"); // This decreases the perceived load time.
    		image.setAttribute("src", "../images/mail.jpg");
    		// The border attribute is presentational and should be replaced with equivalent CSS.
    		span.appendChild(d.createTextNode("email " + name));
    		// The br element should not be used; a span element with the CSS display: block declaration applied is more appropriate.
    		anchor.appendChild(image);
    		anchor.appendChild(span);
    		// Replace <elementReferenceHere> with the appropriate reference.
    		document.getElementById("emailSection").appendChild(anchor);
    	}
    	email("social");
    </script>
    </body>
    </html>
    and here's the CSS
    Code:
    /* CSS Document */
    * {
    padding: 0;
    margin: 0;
    outline: 0;
    }
    * html #pageContainer {
    height:100%;
    font-family: "verdana", trebuchet ms, arial, sans-serif;
    font-size: 12px;
    }
    * img {
    border: 0 
    }
    * a {
    color: #0000A0;
    text-decoration: none;
    text-align: center
    }
    #pageContainer {
    display: inline;
    min-height: 100%;
    }
    #pageHolder {
    display: inline;
    margin-top: 40px;
    margin-left: 40px;
    }
    .centerLinks {
    text-align: center;
    }
    .centerLinks a {
    color: #006633
    }
    .clear {
    clear:both;
    font-size:0;
    line-height:0px;
    }
    .bold {
    font-weight: bold
    }
    #topText {
    position: relative;
    margin-top: 77px;
    margin-left: 75px;
    }
    #logoC {
    margin-left: 175px
    }
    #bottomText {
    margin-left: 75px;
    margin-top: 70px
    }
    #blank_title {
    float: left;
    position: absolute;
    margin-left: 35px;
    height: 30px;
    width: 150px;
    }
    #linkHolder {
    margin-left: 35px;
    margin-top: 25px;
    width: 150px;
    height: 25px;
    border: 1px solid black
    }
    #links_BW {
    float: left;
    position: absolute;
    display: block;
    margin-left: 75px;
    margin-top: 45px;
    width: 70px;
    margin-bottom: 10px
    }
    #topBorder {
    position: relative;
    display: block;
    margin-top:75px;
    margin-left: 75px;
    }
    #contentarea {
    position: relative;
    margin-left: 155px;
    margin-top: 25px;
    padding-right: 20px;
    width: 600px;
    border: 1px solid black;
    }
    #emailSection {
    clear:both;
    display:inline;
    float: right;
    margin-right:40px;
    margin-top:10px;
    text-align:center;
    width: 150px;
    border: 1px solid black;
    }
    #emailSection span {
    display: block
    }
    #emailSection a {
    text-decoration: none;
    color: black;
    }
    #nav_helper {
    display: inline;
    position: relative;
    margin-left: 200px
    }
    I have put in red another possible cause of this... however this just occurred to me so I don't know if it applies

    Basically what I need is to have the e-mail icon / text stay in the position it is in regardless of the height of the contentarea div
    Last edited by canadianjameson; 08-10-2007 at 08:08 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 :)

  • #10
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    Hi Frank,

    To address your point: %'s can be wonderful, however in my experience they work fantastically under the assumption that the user has a browser window of equal or larger size than yours

    What you need to do is (and I havent tried this yet but may look into its feasibility) get the page to verify that a user has a particular browser window size, and if the user has less... then dont use %'s...

    try it out. open a page of yours and then shrink the window to half size and see what happens
    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 :)


  •  

    Posting Permissions

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