Jump to content

absolute position ignored


Guest allelopath
 Share

Recommended Posts

Guest allelopath

I have some CSS which specifie absolute position, yet is is ignored.For example, .leaves-bottom { position: absolute; top: 800; left: 0;appears at 0,0 (top left hand corner)Can anyone tell me what is wrong?Full code is:<html><head><title>CSS Layout</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><style type="text/css">body{ margin:0; padding:0; font-family: verdana, arial, helvetica, sans-serif; background-color: #7c683d; color: #ffffff; text-decoration: none;}A:link { color: #0000FF; }A:visited { color: #000088; }A:active { color: #FF0000; }.leaves-top { position: absolute; top: 0; left: 0; margin: 0; padding: 5px; border: 4px solid #000; height: 11px; width: 1023px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; height: 11px; width: 1023px;}html>body .leaves-top { width:1023px; height: 11px; /* ie5win fudge ends */}.menu { position: absolute; top: 0; left: 0; margin: 0; padding: 5px; border: 3px solid #dddddd; height: 40px; width: 1025px; background-color: #7c683d; font-family: verdana, arial, helvetica, sans-serif; color: #ffffff; text-decoration: none; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; height: 40px; width: 1025px;}html>body .menu { height: 40px; width:1025px; /* ie5win fudge ends */}.content { position: absolute; top: 140; left: 60; margin: 0 0 0 0px; padding: 5px; border: 2px solid #222222; background: #fff; width: 800px; height: 640px; background-color: #7c683d; font-family: verdana, arial, helvetica, sans-serif; color: #ffffff; text-decoration: none; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width : 800px; height: 640px;}html>body .content { width : 800px; height: 640px; /* ie5win fudge ends */}.leaves-bottom { position: absolute; top: 800; left: 0; margin: 0 0 0 0px; padding: 10px; border: 1px solid #cccccc; background: #fff; width : 1025px; height: 65px; /* ie5win fudge begins */ voice-family: "\"}\""; voice-family:inherit; width : 1025px; height: 65px; }html>body .leaves-bottom { width : 1025px; height: 65px; /* ie5win fudge ends */}</style></head><body><div class="leaves-top">Leaves-top : 1023 x 11</div><div class="menu">Menu : 1025 x 40</div><div class="content">Content : 800 x 640</div><div class="leaves-bottom">Leaves-bottom : 1025 x 65</div></body></html>

Link to comment
Share on other sites

Can anyone tell me what is wrong?
Hi!1st, there is missing doctype, add very first line of Your document these 2 lines:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">CSS errors: (there must always be a measure unit with all other values than 0).leaves-bottom {position: absolute;top: 800;left: 0;should be:.leaves-bottom {position: absolute;top: 800px;left: 0;.content {position: absolute;top: 140;left: 60;should be:.content {position: absolute;top: 140px;left: 60px;No other errors found.Advise: install newest Firefox browser with Tidy and Console2 extensions. Console2:http://forums.mozillazine.org/viewtopic.php?t=318102Firefox Tidy:http://users.skynet.be/mgueury/mozilla/With those tools You can find this kind of errors and warnings in seconds. :)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...