SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    0 Post(s)
    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

    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:


    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


    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:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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;
    vertical-align: top;
    #head {
    background-color: #c6c5d0;
    position: relative;
    #head #borders {
    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%;
    background-color: #00105b;
    left: 736px;
    right: 57px;
    position: absolute;
    top: 159px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #00105b;
    <!-- start of head -->
    <div id="head" style="left: 0px; top: 0px">
    <div id="topImage">
    <img src="" class="leftColumn"/>
    <img src="" class="rightColumn"/>
    <img src="" class="leftColumn"/>
    <img src="" class="rightColumn"/>
    <div id="aboveMenu">
    <img src="" style=/"clear:right;float:left">
    <div id="borders"></div>
    <img src="" class="rightColumn" style=/"border-top: 1px solid #00105b;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:#00105b;">
    <div id="topMenu">
    <img src="" class="leftColumn" />
    <div style="float:left;clear:right">
    <img src="" style="clear:right;float:left;border-left-width:1px;border-left-style:solid;border-left-color:#000105b" />
    <img src="" style="clear:right;float:left" />
    <img src="" style="clear:right;float:left" />
    <img src="" style="clear:right;float:left" />
    <div class="filledBlue"></div>
    <img src="" class="rightColumn" />
    <img src="" class="leftColumn" />
    <div class="main">
    <!-- main content goes here -->main content
    <img src="" class="rightColumn" />
    <div style="float:right;clear:right;height:auto;width:57px;background-color:#00105b"></div>
    <!-- end of head -->
    <div style="background-color:#000066;width:200px;height:100%;color:#FFFFFF;">
    <li>Research Units</li>
    <li>Partners & Networks</li>
    <li>Graduate Program</li>
    <li>Current Students</li>
    <li>Graduated Students</li>
    <li>Job Postings</li>
    <li>Links </li>
    <img src="" class="leftColumn" />
    <img src="" class="leftColumn" />
    <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>
    Attached Images Attached Images


Posting Permissions

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