little display: inline issue

canadianjameson · 08-02-2007, 05:11 PM

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
}

Jutlander · 08-02-2007, 05:14 PM

I don't get anything when pressing that link, it's just blank...

canadianjameson · 08-02-2007, 05:23 PM

http://www.enviromark.ca/head/index.htm

problem fixed, sorry about that

make sure you're using internet explorer

canadianjameson · 08-09-2007, 05:43 PM

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

effpeetee · 08-10-2007, 11:36 AM

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

effpeetee · 08-10-2007, 12:18 PM

you may not need this - float:right;

Frank

canadianjameson · 08-10-2007, 05:39 PM

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 :/

effpeetee · 08-10-2007, 07:58 PM

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.

canadianjameson · 08-10-2007, 08:04 PM

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

canadianjameson · 08-10-2007, 08:24 PM

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