Solved

Need help understanding CSS Positioning

Posted on 2008-10-02
12
310 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
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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

948 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

21 Experts available now in Live!

Get 1:1 Help Now