SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cross browsers CSS compatibility

    I am trying to convert a TABLE intensive html page to a css based page. I think I have done most parts but there are a few issues that I cannot solve. Could you please help?

    The URL I am converting is www.fisheries.ubc.ca

    I have written my questions on two screenshots (ie.jpg and ff-opera-safari.jpg). Please refer to those two pictures for details.

    No local image is used in the HTML file. So you can just copy & paste and try it.

    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.

    Many thanks,

    source file:

    Code:
    <!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&nbsp;&nbsp; </div>
    </body>
    </html>
    Attached Images Attached Images


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •