Hi,
I'm experiencing an issue with my CSS when working in Firefox. It should be pretty simple. Everything is working fine except that I cannot seem to get the links in the header aligned to the right (the color will change as well as any other modifications except alignment). The only way I can do it is to float it right, but that reverses the order of the links and seems wrong. Maybe there is a better way to deal with the links in the header than the span that I've used? I will have some more links in the header in another position, though, so I need to specify which links I'm referring to somehow...
Take a look at the code below:
First, the HTML:
"<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="screen">@import "layout2.css";</style>
</head>
<body>
<div id="all">
<div id="head">
<span class="headlinks">
<a href="#">Logout</a>
</span>
</div>
<div id="menu">
</div>
<div id="content">
</div>
</div>
</body>
</html>"
Now, the CSS:
/* Layout2.css */
#all {
border: none;
position: absolute;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
}
.headlinks a {
text-align:right;
color:#ffffff;
}
#head {
border: none;
position: absolute;
left: 0%;
width: 100%;
height: 10%;
background-color:#336699;
}
#head h1 {
margin-top: 1%;
text-align:right;
}
#menu {
border: none;
position: absolute;
left: 1%;
top: 12%;
width: 20%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color:#b1b2a3;
}
#content{
border: none;
position: absolute;
left: 25%;
top: 12%;
width: 72%;
height: 90%;
padding-left: 1%;
padding-right: 1%;
background-color: #eeeeee;
}
Thanks!