?
Solved

Need help understanding CSS Positioning

Posted on 2008-10-02
12
Medium Priority
?
328 Views
Last Modified: 2012-05-05
Hi I am new to CSS Positioning. I am creating a page in dreamweaver. I am applying a different style to each element on the page, with a "fixed" position, and using "top" and "left" indicators to position the element.

The page is displaying correctly for the most part, but for one test with IE7 the left-hand menu displays incorrectly.

Is this the correct way to do CSSP? Is there a better way to position the elements?

Thanks,
Bob
@charset "utf-8";
.vline {
	top: 132px;
	left: 180px;
	position: fixed;
}
.hands {
	position: fixed;
	top: 132px;
	left: 190px;
}
.thinc {
	position: fixed;
	left: 0px;
	top: 0px;
}
.bmenu {
	position: fixed;
	left: 190px;
	top: 470px;
}
.thclouds {
	position: fixed;
	top: 500px;
	left: 0px;
}
 
.lmenu {
	position: fixed;
	top: 125px;
	left: 12px;
}

Open in new window

0
Comment
Question by:ob1_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
12 Comments
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22626289
Try using position: absolute; as position: fixed is not supported by IE6
0
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22626324
Also if you are positioning these elements relative to the BODY you might want to add this:
html, body{
  height: 100%;
}
 
body {
  margin: 0px;
}

Open in new window

0
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22626348
Here is a great resource for understanding CSS properties:
http://reference.sitepoint.com/css/position
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 16

Accepted Solution

by:
rbudj earned 2000 total points
ID: 22626416
When using CSS for layouts, CSS and browsers alike follow a natural flow.  Basically what that means is that whatever <div>'s you place first on your page are the divs that will display first.  Because <div>'s are block elements, each div you place skips to the next line.  Now, when you use the position element, you take the css element OUT of the natural flow.  For some reasons, this is ok but most of the time you will run into problems.  Each browser follows the natural flow of CSS so when you use the position element, you force the browser to decide the best way to interpret the CSS, hence the reason you end up with different results on different browsers.  So try not to use position:fixed.  Instead, look into the float element.

here is a wonderful tutorial to bring you up to speed.

http://www.subcide.com/tutorials/csslayout/
0
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22626455
rbudj, I partly agree with what you are saying, but absolute positioning is very reliable across browsers, because you are basically telling the browser the exact coordinates to draw the item. I would use floats for column based layouts, but absolute positioning relative to the parent can be very handy and I have found to be perfect across web browsers.
0
 
LVL 6

Author Comment

by:ob1_
ID: 22626535
ok i just switched all my code from fixed to absolute and am waiting for my tester to get back to me.

what i don't understand though is what these objects would be relative to, on top of being absolutely positioned? or how they would be relative to the body? here is my html if that helps to answer.  all the java stuff is just for a "spry" menu and created by Dreamweaver.

thanks for the info guys.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="vline.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
</head>
 
<body onload="MM_preloadImages('Calendar-light-14pt.jpg','WedMenu-light-14pt.jpg','Contact-light-14pt.jpg')">
 
<p><img src="logo_homepage.jpg" width="176" height="120" /></p>
<table width="200" border="0" class="lmenu">
  <tr>
    <td><ul id="MenuBar1" class="MenuBarVertical">
      <li>
        <div align="right"><a href="#">Welcome</a> </div>
      </li>
      <li>
        <div align="right"><a href="#">Worship</a></div>
      </li>
      <li>
        <div align="right"><a href="#">Mission</a> </div>
      </li>
      <li>
        <div align="right"><a href="#">Fellowship</a></div>
      </li>
      <li>
        <div align="right"><a href="#">Congregational Care</a></div>
      </li>
      <li>
        <div align="right"><a href="#">Christian Education</a></div>
      </li>
      <li>
        <div align="right"><a href="#">Youth</a></div>
      </li>
    </ul>    </td>
  </tr>
</table>
<p><img src="thin_clouds.jpg" width="792" height="16" class="thinc" /></p>
<p><img src="vertical_line.jpg" width="3" height="343" class="vline" />
<img src="hands.jpg" width="530" height="341" class="hands" /></p>
<table width="319" border="0" class="bmenu">
  <tr>
    <td width="61"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','Calendar-light-14pt.jpg',1)"><img src="Calendar-dark-14pt.jpg" name="Image5" width="57" height="17" border="0" id="Image5" /></a></td>
    <td width="9"><span class="style1">|</span></td>
    <td width="150"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','WedMenu-light-14pt.jpg',1)"><img src="WedMenu-dark-14pt.jpg" name="Image6" width="150" height="19" border="0" id="Image6" /></a></td>
    <td width="10"><span class="style1">|</span></td>
    <td width="67"><p class="style1"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','Contact-light-14pt.jpg',1)"><img src="Contact-dark-14pt.jpg" name="Image7" width="67" height="19" border="0" id="Image7" /></a></p>    </td>
  </tr>
</table>

Open in new window

0
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22626711
Elements that use position: absolute are positioned relative to their parent, if the parent element is also positioned (i.e. set to position: absolute or relative), if it is not the element is relative to the body.
0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22629604
I think you are missing one crucial consideration here -- the size of the browser window (which anyone can resize at any instant, and which changes depending upon screen resolution) is the "defining space" for your absolute positioning.  Therefore when you use absolute, you must get the dimensions of the browser window in pixels first, and adjust the absolute positioning based on the browser window size.

Quite frankly, this is a pain in the neck.  I don't know if anyone above told you, but absolute positioning is the last way you want to code a web page, if you can get it to work other ways, like relative, do that first, as a relative layout will "flow" with the browser resizes and screen resolution changes.  Look into relative.
0
 
LVL 6

Author Closing Comment

by:ob1_
ID: 31502457
Great tutorial - explains how to use CSSP in conjunction with natural flow of HTML.
0
 
LVL 6

Author Comment

by:ob1_
ID: 22629667
Thanks scrathcyboy you are right - changing to absolute did not fix my issue, giving my page a natural flow with DIV and CSS was the way to go.
0
 
LVL 3

Expert Comment

by:cameroncooke
ID: 22631794
I think the crucial thing here is whether the site is using a liquid layout of fixed dimensions. I get based on your CSS example I overlooked the fact that you are not using specifying any dimensions, may bad.

If you are using a liquid layout then stay away from absolute positioning as mentioned above as it wont work and use the natural flow instead.

0
 
LVL 6

Author Comment

by:ob1_
ID: 22634245
yeah cameron you didn't realize i had no idea what i was doing LOL. thanks for the input.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

800 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question