Hi
I am working on a project in CSS and xhtml but when i tested the layout on different browsers i identified a problem in positioning of elements. To be precise, the navigation bar renders well in firefox 11 for ubuntu canonical 1.0 but seems not to work in IE, safari and google chrome. I have not tested with chrome yet....i'm a green horn(just starting) on CSS
here is the code
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Backpacking East Africa, Backpacking Kenya, Backpacking Tanzania, Backpacking Uganda, Backpacking Zambia, Backpacking Zimbabwe, BackPacking Rwanda,</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8"/>
<link href="style1.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id = "header"></div>
<ul>
<li><a href="home">Home</a></li>
<li><a href="about us">about us</a></li>
<li><a href="locations">locations</a></li>
<li><a href="blog">blog</a></li>
</ul>
<div id = "container">
<div id = "box_1"></div>
<div id ="box_2">
<h6>Travel News</h6>
</div>
</div>
<div id = "footer"></div>
</body>
</html>
CSS
/*CSS designed by amaina/
/*---------------------------------------*/
/*HTML elements
/*----------------------------------------*/
/*font family*/
body,table,tr,p,h1,h2,h3,h4,h5,h6,ol,ul,li,a{
font-family:trebuchet ms, arial, helvetica, sans-serif;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/*headings should be conspicuous*/
h1 {
font-weight: normal;
color: #333;
font-size: 1em;
font-weight: bold;
padding: 0 10px 0 10px;
}
h2 {
font-weight: normal;
color: #666;
font-size: 0.8em;
font-weight: bold;
padding: 0 10px 0 10px;
}
/*body layout */
html,body
{
height:100%;
margin: 0px;
padding: 0px;
font-size: 100%;
background-color: #fff;
}
/*paragraph style */
p
{
font-weight: normal;
color: #666;
font-size: 0.8em;
margin-top: 0px;
margin-bottom: 18px;
padding: 0 10px 0 10px;
}
ul {
list-style-type:none;
position:absolute;
top: 150px;
left: 195px;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
display:inline;
list-style-type:none;
}
a:link,a:visited
{
display:block;
border: 0.1em solid #FFFFFF;
width:120px;
font-weight:bold;
color:#424242;
background-color:#F2F2F2;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:capitalize;
}
a:hover,a:active
{
background-color:#E6E6E6;
}
/*header for page*/
#header {
top: 0;
left: 0;
width: 100%;
height: 150px;
background-color:#73AD73;
}
/*Container where to put content*/
#container {
font-size:1.4em;
min-height:100%;
padding-top:90px;
margin: 0 auto;
/*width: 90%;*/
width: 960px;
margin-left: auto;
margin-right: auto;
overflow: auto;
background-color:#FAFAFA;
}
#box_1 {
position:absolute;
top:180px;
left:675px;
width:480px;
height:300px;
background: #2E2E2E;
}
#box_2 {
position:absolute;
top:180px;
left:195px;
width: 480px;
height: 300px;
background:yellow;
}
#footer {
position:relative;
bottom:0px;
left:0px;
width: 100%;
height: 50px;
background: #73AD73;
}