Div problems visible in Firefox

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • TheHobbit
    New Member
    • Apr 2007
    • 1
    #1

    Div problems visible in Firefox

    Hi there
    I am a real newbie to CSS so please excuse any daft questions! I am trying to create a page with a header that contains a small square logo in top left corner with 2 longer divs to the rigt side of this extending across the top of the page, one above the other but not extending below the bottom of the logo. Hope that makes sense.
    Problem is:
    Displays fine in Safari (I am using a Mac) but the layout is a real mess in Firefox. Not tried it on a Windows box with IE yet as having read some posts here it seems FF is the yardstick to test these things so clearly I have messed up somewhere!
    Any help will be greatly appreciated as it has been driving me nuts. I have tested the code compliance and not got any errors.
    The HTML for this is here.It is a PHP file. I have dumped out a lot of the PHP stuff. The main display bit is near the bottom


    Thanks
    Mark

    *****
    <?php require_once('C onnections/pbConn.php'); ?>
    <?php
    if (!function_exis ts("GetSQLValue String")) {
    function GetSQLValueStri ng($theValue, $theType, $theDefinedValu e = "", $theNotDefinedV alue = "")
    {
    $theValue = get_magic_quote s_gpc() ? stripslashes($t heValue) : $theValue;

    $theValue = function_exists ("mysql_real_es cape_string") ? mysql_real_esca pe_string($theV alue) : mysql_escape_st ring($theValue) ;

    switch ($theType) {
    case "text":
    $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
    break;
    case "long":
    case "int":
    $theValue = ($theValue != "") ? intval($theValu e) : "NULL";
    break;
    case "double":
    $theValue = ($theValue != "") ? "'" . doubleval($theV alue) . "'" : "NULL";
    break;
    case "date":
    $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
    break;
    case "defined":
    $theValue = ($theValue != "") ? $theDefinedValu e : $theNotDefinedV alue;
    break;
    }
    return $theValue;
    }
    }

    $maxRows_rstKen nels = 10;
    $pageNum_rstKen nels = 0;
    if (isset($_GET['pageNum_rstKen nels'])) {
    $pageNum_rstKen nels = $_GET['pageNum_rstKen nels'];
    }
    $startRow_rstKe nnels = $pageNum_rstKen nels * $maxRows_rstKen nels;

    $colname_rstKen nels = "-1";
    if (isset($_GET['CountyId'])) {
    $colname_rstKen nels = (get_magic_quot es_gpc()) ? $_GET['CountyId'] : addslashes($_GE T['CountyId']);
    }
    mysql_select_db ($database_pbCo nn, $pbConn);
    $query_rstKenne ls = sprintf("SELECT * FROM Kennels WHERE CountyId = %s ORDER BY Town ASC", $colname_rstKen nels);
    $query_limit_rs tKennels = sprintf("%s LIMIT %d, %d", $query_rstKenne ls, $startRow_rstKe nnels, $maxRows_rstKen nels);
    $rstKennels = mysql_query($qu ery_limit_rstKe nnels, $pbConn) or die(mysql_error ());
    $row_rstKennels = mysql_fetch_ass oc($rstKennels) ;

    if (isset($_GET['totalRows_rstK ennels'])) {
    $totalRows_rstK ennels = $_GET['totalRows_rstK ennels'];
    } else {
    $all_rstKennels = mysql_query($qu ery_rstKennels) ;
    $totalRows_rstK ennels = mysql_num_rows( $all_rstKennels );
    }
    $totalPages_rst Kennels = ceil($totalRows _rstKennels/$maxRows_rstKen nels)-1;
    ?><HTML>
    <HEAD>
    <TITLE>01_hom e</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
    <LINK rel="stylesheet " href="Default.C SS" type="text/css">
    </HEAD>


    <div id="page">

    <div id="header">

    <div id="logo">
    <IMG SRC="images/logo.png" ALT="PetBooker logo">
    </div>

    <div id="titlebox">
    <div id="title" class="styleTit le"> Pet Booker.co.uk <span class="styleSub Title"> Find someone to take care of your loved ones </span>
    </div>

    <div id ="navigation ">
    <ul>
    <li><a href="index.php ">Home</a></li>
    <li><a href="#">Find a Kennel</a></li>
    </ul>
    </div>
    </div>
    </div>



    <div id ="content">


    </div>

    </div>


    </BODY>
    </HTML>
    <?php
    mysql_free_resu lt($rstKennels) ;
    ?>

    ******

    CSS Code

    *****
    body {
    margin: 0;
    padding: 0;
    font: 90% Arial, Helvetica, sans-serif;
    background: #FFFFFF;
    }

    #page {
    width: 766px;
    background-color: #FFF;
    }

    #titlebox {
    float: left;
    width: 648px;
    margin: 0;
    padding: 0 ;
    border: 0;
    }

    #logo {
    float: left;
    margin: 0;
    padding: 0 ;
    border: 0;
    }

    #title {
    padding-top:2px;
    padding-bottom: 55px;
    background-color: #D14009;
    }

    #navigation {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align:center;
    background-color: #8FB061;
    margin-top: 2px;
    padding-top: 5px;
    padding-bottom: 6px;
    }

    #navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-top: 2px;
    }

    #navigation li {
    display: inline;
    }

    #navigation a:link, #navigation a:visited {
    padding: 3px 10px 2px 10px;
    color: #FFFFFF;
    background-color: #CC6633;
    text-decoration:: none;
    border: 1px solid #711515;
    }

    #navigation a:hover {
    color: #FFFFFF;
    background-color: #711515;
    }

    td {
    text-align: left;
    vertical-align: top;
    font-family:Tahoma;
    font-size:11px;
    color:#474747;
    }

    a {
    text-decoration: none;
    }

    a.1 {
    text-decoration: none;
    /*color: 000000;*/
    }
    .t11 {
    font-family: Tahoma;
    font-size: 11px;
    font-style: normal;
    }
    body {margin:0px;pad ding:0px}
    .style1 {
    color: #FFFFFF;
    font-weight: bold;
    }
    .style2 {color: #8faf61}
    .style2Strong
    {
    color: #8faf61;
    font-weight: bold
    }

    .style3 {
    color: #ee7345;
    font-size: 10px;
    }
    .style4 {color: #696562}
    .style5 {font-size: 11px}
    .style7 {color: #8faf61; font-weight: bold; }
    .style8 {
    color: #ee7345;
    font-size: 11px;
    font-weight: bold;
    }
    .style9 {font-size: 11px; color: #ee7345;}
    .styleTitle {font-size:24px; color: #8faf61; bold; }
    .styleSubTitle {font-size:16px; color: #8faf61; bold; }
    .styleSearchHea der {font-size:16px; color: #FFFFFF; bold; }
    .styleSearchSub Header {font-size:10px; color: #FFFFFF; bold; }

    .styleNavBarSep erator
    {
    margin-left:5px;
    margin-right:5px;
    margin-bottom:2px
    }

    .style2Right
    {
    text-align: right;
    }

    .rightimg
    {
    float: right;
    margin-top:2px;
    }


    .KennelsTable {
    border: 1px solid #D6DDE6;
    border-collapse: collapse;
    width: 80%
    }

    .KennelsTable td {
    border: 1px solid #D6DDE6;
    padding: 4px;
    }

    .KennelsTable th {
    border: 1px solid #828282;
    background-color: #CC6633;
    font-weight; bold;
    text-align: left;
    padding-left: 4px;
    }

    .KennelsTable caption {
    font: bold medium Arial, Helvetica, sans-serif;
    color: #336633;
    text-align: left;
    padding-top: 3px;
    padding-bottom: 8px;
    }
    *********


    Many thanks again
    Mark
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      The PHP doesn't do us any good because we have no way to execute it. You say it's a real mess in FF but, to me, it looks like what you say it should be so an image posted or, preferably, an online link would be better or a better description as to what is wrong.

      You are missing a proper doctype. See the sticky about this at the top of this board. Also, your CSS does not validate. There are a few errors there.

        Comment

        • Leo Smith
          New Member
          • Mar 2007
          • 45
          #3
          I am not sure this helps, since what you are saying seems a bit vague to me. But I have created a toolbar (has drop lists and/or tables in some of the toolbars) with a shadow image. This are is created with div tags and works for both the latest versions of IE and FF (MAC included). The toolbars are placed across the top of my page and are always visible. When the window is scrolled, the area that is not fixed scrolls under the toolbar area. These toolbars are locked at the top by using the style position:fixed and a relative position of top:0px and left:0px with a width of 100% (height changes with toolbar requirements). The catch is that fixed position is directly related to z-order. So if you want it to stay on top while you scroll under it, the divs will need to be the last set of visible div's created and displayed.

          I hope this helps,
          Leo

            Comment

            Previous template Next
            Working...