Thu, 2006-04-06 04:46
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>
Thu, 2006-04-06 05:14
#1
absolute position ignored
The way you're going about your layout is going to lead to all sorts of problems eventually so I'd recommended ditching all the absolute positioning and rethinking how you're approaching it.
If you can tell us what sort of layout you're after, we can suggest better ways to go about it.
Thu, 2006-04-06 14:15
#2
absolute position ignored
As the absolute positioning suggests, I want each of the 'things' (don't know the word) at a certain position. What's the best way to do that?
Thu, 2006-04-06 21:51
#3
absolute position ignored
Most of the time you just need to use the margins of elements and sometimes you'll need to use floats as well.
Thu, 2006-04-06 23:15
#4
margins
Are these "margins" the same as a margin on a piece of paper? (left, right, top, bottom)? Why is it better to use these than absolute positioning?
Thu, 2006-04-06 23:21
#5
absolute position ignored
Every element has margin, padding and border. Margins act outside the element, padding act inside. By using margin-top: 50px you can place an element 50px away from the one above it.
To find out why using absolute positioning can be a bad thing, take a look at http://www.tyssendesign.com.au/index.php/articles/css/absolute-positioning-pitfalls/
Fri, 2006-04-07 00:27
#6
absolute position ignored
ok, you've set me straight on absolute positioning.
I've changed it to using margins.
A couple other details...
In the body, it is ignoring the background color (it displays white, not #7c683d). (it may in fact be ignoring all of the body properties)
In the menu, it is ignoring the font color (it displays blue, not white) and the text-decoration (it is underlining the links)
These values are not overridden in the html files. Can you give any reason for this?
New code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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;
}
<!-- margin: top right bottom left-->
.leaves-top
{
position: absolute;
top: 0px;
left: 0px;
margin: 0px 0px 0px 0px;
padding: 5px;
border: 4px solid #ff0000;
height: 30px;
width: 1025px;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 30px;
width: 1025px;
}
html>body .leaves-top
{
height: 30px;
width:1025px;
/* ie5win fudge ends */
}
.menu
{
margin: 0px 0px 0px 0px;
padding: 5px;
border: 3px solid #ff00ff;
background: #fff;
width: 1025px;
height: 40px;
background-color: #7c683d;
font-family: verdana, arial, helvetica, sans-serif;
color: #ffffff;
text-decoration: none;
/* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 1025px;
height: 40px;
}
html>body .menu
{
width:1025px;
height: 40px;
/* ie5win fudge ends */
}
.content
{
margin: 0px 0px 0px 0px;
padding: 10px;
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
{
margin: 0px 0px 0px 0px;
padding: 10px;
border: 4px solid #00ff00;
background: #7c683d;
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 : 1025 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>
Fri, 2006-04-07 01:01
#7
absolute position ignored
Before getting into the problems, you're using an XHTML 1.1 doctype which needs to be served as application/xhtml+xml not text/html. Unfortunately, IE doesn't handle the application/xhtml+xml mimetype, so the first thing you need to do is choose the correct doctype: http://www.alistapart.com/stories/doctype/
Fri, 2006-04-07 03:56
#8
absolute position ignored
So that article lists "Doc types that work" but gives no basis for deciding which to use, nor does w3c.
Fri, 2006-04-07 04:26
#9
absolute position ignored
Use either HTML 4.0 Strict or XHTML 1.0 Strict.
Fri, 2006-04-07 23:56
#10
absolute position ignored
Deducing from your words, XHTML 1.0 Strict doctype can be served as text/html, so i guess i'll choose that.
Sat, 2006-04-08 00:52
#11
absolute position ignored
so i think it is ignoring the font color in the menu.
It must be the case that properties do not apply to hypertext links (which are what the menu is).
Correct?
If so, how to specify the font and bold for these?
Sat, 2006-04-08 02:00
#12
absolute position ignored
allelopath wrote:
so i think it is ignoring the font color in the menu.
It must be the case that properties do not apply to hypertext links (which are what the menu is).
Correct?
If so, how to specify the font and bold for these?
Totally incorrect. :oops: Please don't blame CSS for your failure to understand it.
Properties apply to the element you apply them to with your selector.The "a" selector applies to the <a> tag, just like the p selector applies to the <p> tag.
**EDIT **
You likely have a syntax error either in your html or your CSS. That's what validators are there to help you find. If it's not a syntax error it's probably a typo that applies your selector to something else other than you think it applies.