By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,677 Members | 1,798 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,677 IT Pros & Developers. It's quick & easy.

Div problems visible in Firefox

P: 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
Apr 24 '07 #1
Share this Question
Share on Google+
2 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Apr 24 '07 #2

P: 45
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
Apr 25 '07 #3

Post your reply

Sign in to post your reply or Sign up for a free account.