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('Connections/pbConn.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
$maxRows_rstKennels = 10;
$pageNum_rstKennels = 0;
if (isset($_GET['pageNum_rstKennels'])) {
$pageNum_rstKennels = $_GET['pageNum_rstKennels'];
}
$startRow_rstKennels = $pageNum_rstKennels * $maxRows_rstKennels;
$colname_rstKennels = "-1";
if (isset($_GET['CountyId'])) {
$colname_rstKennels = (get_magic_quotes_gpc()) ? $_GET['CountyId'] : addslashes($_GET['CountyId']);
}
mysql_select_db($database_pbConn, $pbConn);
$query_rstKennels = sprintf("SELECT * FROM Kennels WHERE CountyId = %s ORDER BY Town ASC", $colname_rstKennels);
$query_limit_rstKennels = sprintf("%s LIMIT %d, %d", $query_rstKennels, $startRow_rstKennels, $maxRows_rstKennels);
$rstKennels = mysql_query($query_limit_rstKennels, $pbConn) or die(mysql_error());
$row_rstKennels = mysql_fetch_assoc($rstKennels);
if (isset($_GET['totalRows_rstKennels'])) {
$totalRows_rstKennels = $_GET['totalRows_rstKennels'];
} else {
$all_rstKennels = mysql_query($query_rstKennels);
$totalRows_rstKennels = mysql_num_rows($all_rstKennels);
}
$totalPages_rstKennels = ceil($totalRows_rstKennels/$maxRows_rstKennels)-1;
?><HTML>
<HEAD>
<TITLE>01_home</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">
<LINK rel="stylesheet" href="Default.CSS" 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="styleTitle"> Pet Booker.co.uk <span class="styleSubTitle"> 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_result($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;padding: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; }
.styleSearchHeader {font-size:16px; color: #FFFFFF; bold; }
.styleSearchSubHeader {font-size:10px; color: #FFFFFF; bold; }
.styleNavBarSeperator
{
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
