Solved

Need help understanding CSS Positioning

Posted on 2008-10-02
12
314 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
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

777 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