how to do it in css?

[Fiska]

I'm now working on the bottom of the page, but I don't know how to achieve
bottom navigation of the page (see the attached pic this is how it should be), but the thing is that this on the pic I can't implement it on CSS , now as it is there is no bottom navigation, instead it should have been as in the pic attached!

here is the url http://test.rrota.net/qytetaret.html

therefore left navigation is not working on mozilla , IE is ok

help would be appreciated
fiska

[Paul O'B]

Hi,

Id be inclined to absolutely place that right footer so that you can get it exact (assuming theres nothing to go underneath it).

#bottomline {
 background-color: #DDD6C6;
 width: 647px;
 height: 5px;
 border-bottom: 1px solid #000;
 border-right: 1px solid #000;
 border-left: 1px solid #000;
 color: #000;
}
*html #bottomline {overflow : hidden; margin-bottom : 0;}/* IE */
#bottomleft{
 background-color: #FFCC00;
 margin :0;
 padding:0;
 width: 214px;
 border-bottom: 1px solid #000;
 border-left: 1px solid #000;
 color: #000;
}
#bottomleft h1{
 padding:0;
 padding-left: 10px;
 line-height:16px;
 margin:0;
 position:relative;
}
#bottom {position:relative;margin-top:-1px;}
* html #bottom{margin-top:0}
#bottomright {
 position:absolute;
 left:215px;
 top:0;
 background-image: url(http://test.rrota.net/common/images/bott.gif);
 background-repeat: repeat-x; 
 padding: 0;
 width: 433px;
 border-right:1px solid #3D3D3D;
 line-height: 24px;
 height:24px;
 }
#bottomright img{
 border:none;
 position:absolute;
 left:-7px;
 top:0;
 display:block;
} 
#bottomright a{
}
#bottline {
 background-color: #728AA9;
 overflow: hidden;
 height: 5px;
 width: 219px;
 float: left;
 margin-top: -6px;
 border-left : 1px solid #000;
 border-bottom : 1px solid #000;
 color: #000;
}

html:

  <!-- end of the border-->
  <div id="bottomlineqyt"></div>
  <div id="bottom"> 
	<div id="bottomleft"><h1>© 2004 Bashkia a Tiranes</h1></div>
 <div id="bottomright"><img src="http://test.rrota.net/common/images/edge.gif" alt=""  /> 
	  <a href="#">fjdskl</a></div>
  </div>
</div>
<!-- end of the central-->
</body>

That evens up the display in ie and firefox.

Paul

(BTW Your left menu at ther top needs a bit of work in firefox as the lines are overlapping but I asssume you are working on that.)