Solved

Need help understanding CSS Positioning

Posted on 2008-10-02
12
316 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Accepted Solution

by:
rbudj earned 500 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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 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