Guest allelopath Posted April 6, 2006 Share Posted April 6, 2006 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 More sharing options...
raimo Posted April 6, 2006 Share Posted April 6, 2006 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now