Hi all,
I'm hoping someone could help me out with this problem as I've created quite a headache trying to figure this out. Here it is:
I'd like to know if someone could tell me why my navbar alignment continues to show up differently on different monitors and/or browsers.
I use different monitors to work. On my laptop screen which is a about a 12" and i use another widescreen monitor which is about 1080px. The laptop shows alignment is ok. when I go to the widerscreen monitor, nav alignment is off. How can i fix so that it shows up the same no matter which monitor? I've done 100% on both background and nav alignment. Please help. Below is the format;
*|* {
margin:0pt;
padding:0pt;
}
body {
background: url(oldpaperrev.jpg);
background-color:#9E5F27;
font-family:georgia,serif;
font-weight: bold;
font-size:18px;
color:#000000;
margin:0;
padding:0;
width: 80%;
}
p {
line-height:1.5;
padding-bottom:12px;
}
ul
{
list-style-type:none;
margin:0;
padding:0;
}
h1 {
font-size:20px;
font-weight:bold;
color:#000000;
line-height:1.5;
}
h2 {
font-size:14px;
font-weight:bold;
color:#000000;
line-height:1.5;
}
#wrapper {
width:960px;
margin:0pt auto;
}
#sitename {
height:55px;
width:960px;
font-size:30px;
color:#gggggg;
font-weight:normal;
padding-top:32px;
text-align:right;
font-style:italic;
}
#content-wrapper {
float:center;
width:960px;
}
#header-image {
}
#image {
width:952px;
height:221px;
align: center;
}
#contents-body {
float:left;
width:960px;
padding:0 20px 10px 15px;
color:#000000;
}
#navigation {
float:left;
width:300px;
margin-bottom:9px;
font-size:12px;
color:#000000;
position: absolute;
top:250px;
left:400px;
height: 100%;
width: 100%;
}
#navigation-links ul {
margin:8px;
padding:;
display: inline;
height: 100%;
width: 100%;
}
#navigation-links li {
font-size:13px;
list-style-type:none;
padding:5px 5px 8px 5px;
display: inline;
}
#active {
color:#636563;
}
#navigation-links a:link {
display:inline;
color:#000;
font-weight: bold;
font-size: 16px;
text-decoration:none;
}
#navigation-links a:hover {
color:#EAB988;
text-decoration:none;
}
#navigation-links a:visited {
color:#EAB988;
text-decoration:none;
}
#active a:link {
color:#EAB988;
text-decoration:none;
}
#active a:hover {
color:#EAB988;
text-decoration:none;
}
#active a:visited {
color:#EAB988;
text-decoration:none;
}
a:link, a:hover, a:visited {
color:#EAB988;
font-weight:normal;
text-decoration:none;
}
#contents {
float:left;
width:704px;
padding:20px 0 0 20px;
}
#footer {
float:left;
background-color:#9E5F27;
width:960px;
height:39px;
margin-bottom:30px;
}
#footer-contents {
float:left;
color:#7F3D17;
font-family:palatino,"times new roman",serif;
padding:12px 10px 0 12px;
}
input {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}
textarea {
background-color:#fff;
border:1px solid #999;
font-size:12px;
}