Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Page not displaying correctly in FF. Ok in IE

    The problem is clear when you compare the website I am trying to put together by opening it in FF and then in IE.

    A sample of the website is here http://www.geocities.com/robbo_lp144...elopments.html

    The tabs do not overlap the banner in FF, and the blue background for the links on the right does not show, and as the text is white, you cant see the links until you move the mouse over them.

    This is part of the CSS file

    #tabnav { z-index: 2;
    margin-left: 225px;
    white-space: nowrap;
    }

    #tabnav, #tabnav ul li a { padding-top: 5px;
    padding-bottom: 6px;
    }

    #tabnav ul, #tabnav ul li { margin: 0pt;
    padding: 0pt;
    display: inline;
    list-style-type: none;
    }

    #tabnav ul li, #tabnav ul li a { margin-right: 5px;
    }

    #tabnav ul li a { border-top: 1px solid rgb(0, 0, 0);
    border-left: 1px solid rgb(0, 0, 0);
    border-right: 1px solid rgb(0, 0, 0);
    margin: 0pt -1px 0pt 0pt;
    padding-left: 5px;
    padding-right: 30px;
    white-space: nowrap;
    line-height: normal;
    }

    #tabnav ul li a:link, #tabnav ul li a:visited, #tabnav ul li a:active, #tabnav ul li a:hover { text-decoration: none;
    }

    #tabnav ul li span.divider { display: none;
    }

    * html #tabnav ul li, * html #tabnav ul li a { border-top: 1px solid rgb(0, 0, 0);
    width: auto;
    display: inline;
    }

    * html #tabnav, * html #tabnav ul a { height: 0.01%;
    }

    * html #TABNAV { padding: 0pt;
    }

    #tabnav ul li a:link, #tabnav ul li a:visited { padding: 5px 10px 6px;
    text-decoration: none;
    background-color: rgb(65, 105, 225);
    color: rgb(0, 0, 0);
    font-weight: bold;
    }

    #tabnav ul li a:hover, #tabnav ul li a:active, #tabnav ul li a.here, #tabnav a.here, #tabnav ul a.here { background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    }

    #rightnav { z-index: 2;
    margin-left: 713px;
    white-space: wrap;
    }

    #rightnav, #rightnav ul li a { padding-top: 5px;
    padding-bottom: 6px;
    }
    .clear { clear: both;
    }

    #rightnav ul, #rightnav ul li { margin: 0pt;
    padding: 0pt;
    display: inline;
    list-style-type: none;
    }


    Tabnav is the tabs, and rightnav is the links on the right.

    Here is the HTML for the site.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>

    <html>
    <head>
    <script language="javascript">
    function popwin(url)
    {
    window.open(url, 'popwin', 'width=400,height=200,resizable=no,scrollbars=no,toolbar=no,location=no,directories=no,status=no,men ubar=no,copyhistory=no');
    return false;
    }
    </script>
    </head>
    <body>

    <html>
    <head>
    <title>Major Developments - Community Maps</title>


    <link rel="stylesheet" href="style8.css" type="text/css">

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


    <meta content="London, agenda21, greenmap, sustain, green, community, development, clean, environment, network, government, sustainable, map, local, living, ecology, recycle, energy, event, news" name="keywords">

    <meta content="London21 Green Map V2" name="description">

    <link href="inc/greenmap/images/favicon.ico" type="image/x-icon" rel="shortcut icon">

    <meta content="MSHTML 6.00.2900.3157" name="GENERATOR">

    </head>


    <body>

    <div id="wrapper">
    <div id="netbar">
    <div id="netlinks"><a href="http://www.london21.org/user/login">My Account</a>&nbsp;|
    &nbsp;<a href="http://www.london21.org/">London 21</a>&nbsp;|&nbsp;<a class="nethere" href="http://mcsc.london21.org">Community Maps</a>&nbsp;|&nbsp;<a href="http://www.londongreenmap.org/">London
    Greenmap</a>&nbsp;|&nbsp;<a href="http://www.lovelondon.org.uk/">Love London</a>&nbsp;|</div>

    </div>

    <div id="l21header">
    <div id="gmheader"><br>

    </div>

    <div id="maincontent">
    <div id="tabnav">
    <ul>

    <li><a href="http://communitymaps.london21.org/add_content.php">Add
    Content</a> </li>

    <li><a href="http://communitymaps.london21.org/forum.php">Discuss</a>
    </li>

    <li><a class="here" href="http://communitymaps.london21.org/about_map.php">What are 'Community Maps'?</a> </li>

    <li><a href=""http://communitymaps.london21.org/help.php">Help</a>
    </li>

    <li> </li>

    </ul>

    </div>

    <div id="page">
    <div id="greenmaptext">
    <p><b style=""><span style="font-size: 11pt; font-family: &quot;Trebuchet MS&quot;;" lang="EN">Major
    Developments<o></o></span></b></p>

    <br>

    <br>

    <p><span style="font-size: 11pt; font-family: &quot;Trebuchet MS&quot;;" lang="EN"><o></o></span></p>

    <p></p>

    <div id="maincontent">
    <div id="rightbar"><br>

    <ul>

    <li><a href="http://communitymaps.london21.org/">Mapping
    Change for Sustainable Communities</a></li>

    <li><a href="http://communitymaps.london21.org/">Project
    Partners</a></li>

    <li><a href="http://communitymaps.london21.org/">Ecotext</a></li>

    <li><a href="http://communitymaps.london21.org/">Why
    East London?</a></li>

    <li><a href="http://communitymaps.london21.org/">What
    is Bio-Mapping</a></li>

    <li><a href="http://communitymaps.london21.org/">Major
    Developments</a></li>

    </ul>

    </div>

    </div>

    <div id="footer">
    <p align="center"><a href="http://communitymaps.london21.org/">&copy; London
    21</a></p>

    </div>

    </div>

    </div>

    </div>

    </div>

    </body>
    </html>

    It seems as if it is a problem with the CSS as that is where these particular items are formatted.


    Thanks

  • #2
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    9
    Thanks
    0
    Thanked 1 Time in 1 Post
    Can I suggest you start off by running your html code through a validator - there are a few mistakes in there and if you correct these you'll be on a more level playing field.

    http://validator.w3.org/

    There's things like you've got two html tags:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    
    <html>
    and two " throwing links off:

    Code:
    <a href=""http://communitymaps.london21.org/help.php">Help</a>
    Clean things up a bit and then see what happens....

  • #3
    New Coder
    Join Date
    Jun 2007
    Location
    Quebec, Canada
    Posts
    64
    Thanks
    4
    Thanked 3 Times in 3 Posts
    just like this, rightnav is included in the css and rightbar in the html...

    why not giving a background color to the rightbar?

    Code:
    #rightbar ul {
    background-color: rgb(65, 105, 225);
    }
    however...

    you should try using a position:relative with your z-index, but i'm on a slow computer and i cannot test this right now
    i've seen you use the ID of maincontent more than once, an ID should only be used once in a document.

  • #4
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll try and clean the page up a bit. It seems that the first error i mention for the rightbar problem was a simple error missing out the semi-colon at the end of one of the rightbar css codes.

    But im having the problem of the tabs not covering the image in firefox. It probably is a simple error like the previous one. It seems that firefox is a lot more picky in what it will understand than IE.

    Thanks

  • #5
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Actually if you change this
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    to this
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    You will see that IE will probably end up looking the same way as Firefox in which case its not the browser thats the issue, its your code.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #6
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think I have sorted it now.

    It was something to do with FF responding to a certain command in ajusting the place of tabnav in CSS, where IE just seemed to put it where it thought looked best!

    Thanks


  •  

    Posting Permissions

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