Solved

Need help understanding CSS Positioning

Posted on 2008-10-02
12
304 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_
12 Comments
 
LVL 3

Expert Comment

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

Expert Comment

by:cameroncooke
Comment Utility
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
Comment Utility
Here is a great resource for understanding CSS properties:
http://reference.sitepoint.com/css/position
0
 
LVL 16

Accepted Solution

by:
rbudj earned 500 total points
Comment Utility
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
Comment Utility
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_
Comment Utility
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
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 3

Expert Comment

by:cameroncooke
Comment Utility
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
Comment Utility
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_
Comment Utility
Great tutorial - explains how to use CSSP in conjunction with natural flow of HTML.
0
 
LVL 6

Author Comment

by:ob1_
Comment Utility
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
Comment Utility
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_
Comment Utility
yeah cameron you didn't realize i had no idea what i was doing LOL. thanks for the input.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
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 …

763 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now