Yet another CSS Problem (borders this time)

[Freakish_05]

To the CSS guru's

The following CSS is my site container:

#container
	{
	position: absolute;
	left: 10px;
	right: 10px;
	border-left-color: #660099;
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: #660099;
	border-right-style: solid;
	border-right-width: 1px;
	}

However, the borders fail to appear See Thus. The offending CSS file can be found Here in case I've messed something up further down.

Thanks for reading

 

[Augmented]

The problem is your usage of position: fixed on all the child elements of #container, e.g. #top, #content.

position: fixed; removes an element from the normal document flow. This means that the element does not affect the position or dimensions of other elements on the page - it just sits on top of the page in its own space, if you like. Therefore there are no elements inside #container that will make it expand vertically or horizontally, and so while the borders are being applied, #container is actually sitting as a tiny 1px box in the top-left corner.

To fix this, you need to revise your layout positioning, not using position: fixed.

More about the position property: http://www.quirksmode.org/css/position.html

 

[Freakish_05]

Hail Augmented!

What you said....bang on. Changed to static/relative/absolute and everything works!

However, I need to keep the elements that are fixed, fixed if you know what I mean. How do I achieve this without using position: fixed?

Cheers in advance