Forum Moderators: not2easy
Here is the source html code (no local image is used)
Any help is highly appreciated.
Thank you,
M.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#head .leftColumn {
float: left;
clear: left;
}
#head .rightColumn {
float: right;
clear: right;
}
.main{
position:relative;
margin-left:10px;
margin-top:10px;
height:100%;
float:left;
vertical-align: top;
}
#head {
background-color: #c6c5d0;
height:160px;
position: relative;
}
#head #borders {
background:#acadca;
height: 14px;
left: 200px;
right: 295px;
position: absolute;
top: 145px;
border-top-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #2E2F6E;
border-right-color: #2E2F6E;
border-bottom-color: #2E2F6E;
border-left-color: #2E2F6E;
}
#head img {
display: block;
margin: 0px;
padding: 0px;
}
body {
margin: 0px;
padding: 0px;
width: 100%;
}
.filledBlue
{
height:16px;
background-color: #00105b;
left: 736px;
right: 57px;
position: absolute;
top: 159px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00105b;
}
-->
</style>
</head>
<body>
<!-- start of head -->
<div id="head" style="left: 0px; top: 0px">
<div id="topImage">
<img src="http://www.fisheries.ubc.ca/images/template/a1.gif" class="leftColumn"/>
<img src="http://www.fisheries.ubc.ca/images/template/a2.gif" class="rightColumn"/>
<img src="http://www.fisheries.ubc.ca/images/template/b1.gif" class="leftColumn"/>
<img src="http://www.optfaq.com/tmp/images/added/topwithmountain.png" class="rightColumn"/>
</div>
<div id="aboveMenu">
<img src="http://www.fisheries.ubc.ca/images/template/d1.gif" style=/"clear:right;float:left">
<div id="borders"></div>
<img src="http://www.optfaq.com/tmp/images/added/topwithmountain-2.png" class="rightColumn" style=/"border-top: 1px solid #00105b;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#00105b;">
</div>
<div id="topMenu">
<img src="http://www.fisheries.ubc.ca/images/template/f1.gif" class="leftColumn" />
<div style="float:left;clear:right">
<img src="http://www.fisheries.ubc.ca/images/template/home.off.gif" style="clear:right;float:left;border-left-width:1px;border-left-style:solid;border-left-color:#000105b" />
<img src="http://www.fisheries.ubc.ca/images/template/members.off.gif" style="clear:right;float:left" />
<img src="http://www.fisheries.ubc.ca/images/template/projects.off.gif" style="clear:right;float:left" />
<img src="http://www.fisheries.ubc.ca/images/template/news.off.gif" style="clear:right;float:left" />
</div>
<div class="filledBlue"></div>
<img src="http://www.fisheries.ubc.ca/images/template/f2.gif" class="rightColumn" />
</div>
<img src="http://www.fisheries.ubc.ca/images/template/sidebartop.gif" class="leftColumn" />
<div class="main">
<!-- main content goes here -->main content
</div>
<img src="http://www.fisheries.ubc.ca/images/template/right.gif" class="rightColumn" />
<div style="float:right;clear:right;height:auto;width:57px;background-color:#00105b"></div>
</div>
<!-- end of head -->
<div style="background-color:#000066;width:200px;height:100%;color:#FFFFFF;">
<ul>
<li>Events</li>
<li>Mission</li>
<li>Research Units</li>
<li>Partners & Networks</li>
<li>Publications</li>
<li>Graduate Program</li>
<li>Current Students</li>
<li>Graduated Students</li>
<li>Gallery</li>
<li>Job Postings</li>
<li>Links </li>
</ul>
<img src="http://www.fisheries.ubc.ca/images/template/sidebarbottom.gif" class="leftColumn" />
<img src="http://www.fisheries.ubc.ca/images/template/ubcbottom.gif" class="leftColumn" />
</div>
<div style="background:#00105b;float:left;width:100%;color:#FFFFFF;padding-bottom:10px;padding-top:10px" align="right">Copyright © 1999-2008 UBC Fisheries Centre </div>
</body>
</html>
The issues are:
(IE)
1. The right part of the top border of the "News" button is missing
2. Some texts are missing in the left side navigation bar (a few <li>)
3. There is a dark blue line (2px height, maybe) at the bottom-left corner
(FF,Opera,Safari)
1. There is a thin dark blue line on the left of the "Home" button (right after the boat)
2. At the bottom-right corner, there is a blank area, which is supposed to be filled with dark blue.
