1
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
