Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Infuriating Problem With Gap Below Header


Guest

Recommended Posts

Posted

Being driven nuts by a very simple problem that only seems to rear it's ugly head in Internet Explorer (Firefox, Opera & Safari are fine).

There's a few pixels of blank space appearing below the site header image and the rest of the page content (side column etc).

 

See screenshots ...

 

Internet Explorer (with white line)

http://i206.photobucket.com/albums/bb66/al...oto/Capture.jpg

 

Firefox (as it should be with no gap)

http://i206.photobucket.com/albums/bb66/al...to/Capture2.jpg

 

Obviously there's some extra tags lurking somewhere, but I've tried everything I can think of.

 

With column_right completely removed, the gap is still there, so it's nothing in that code (either column right, or the code on index.php that calls it).

 

The source for the page in IE shows ...

 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="LTR" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title></title>
<base href="removed">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->

<table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="000000">
  <tr><td>
<table width="749" align="center" BGCOLOR="FFFFFF" BORDER="0" bordercolor="ffffff" CELLSPACING="0" CELLPADDING="0" >
  <tr><td BGColor="#ffffff">


<table border="0" width="100%" cellspacing="0" cellpadding="0">

<img src="images/header-index.jpg" width="749" height="351" border="0" usemap="#Maph">
<map name="Maph">
 <area shape="rect" coords="6,78,65,102" href="index.php" alt="Home">
 <area shape="rect" coords="70,77,144,104" href="extra_info_pages.php/pages_id/6" alt="About Us">
 <area shape="rect" coords="156,79,221,104" href="extra_info_pages.php/pages_id/7" alt="Services">
 <area shape="rect" coords="235,76,316,102" href="extra_info_pages.php/pages_id/8" alt="Contact Us">
 <area shape="rect" coords="325,80,384,102" href="account.php" alt="Log In">
 <area shape="rect" coords="394,79,457,101" href="index.php/language/es" alt="Español">
 <area shape="rect" coords="558,146,717,170" href="index.php/cPath/21" alt="Contemporary">
 <area shape="rect" coords="556,170,718,194" href="index.php/cPath/22" alt="Fusion">
 <area shape="rect" coords="559,194,716,220" href="index.php/cPath/23" alt="Rustic">
 <area shape="rect" coords="3,106,200,347" href="index.php/cPath/21" alt="Contemporary">
 <area shape="rect" coords="521,8,739,100" href="index.php" alt="Spaces Interior Collections">
 <area shape="rect" coords="202,105,365,353" href="index.php/cPath/22" alt="Fusion">
 <area shape="rect" coords="371,103,551,349" href="index.php/cPath/23" alt="Rustic">
</map>
<!-- header_eof //-->

<!-- body //-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">


<!-- body_text //-->
<td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">


  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">


	  <tr>
		<td class="main"><img src="images/frontpic.jpg" width="551" height="577">
</td>
	  </tr>

	  <tr>
		<td></td>
	  </tr>

	</table></td>
  </tr>
</table></td>

<td width="198" height="579" valign="top"><table border="0" width="198" cellspacing="0" cellpadding="0">

<img src="images/sidecol.jpg" width="198" height="579" border="0" usemap="#Mapside">
<map name="Mapside"><area shape="rect" coords="10,51,166,74" href="extra_info_pages.php/pages_id/9" alt="Collections Consultant">
<area shape="rect" coords="9,79,165,110" href="extra_info_pages.php/pages_id/10" alt="Curtains And Blinds">
<area shape="rect" coords="9,114,164,143" href="extra_info_pages.php/pages_id/11" alt="Interior Designer">
<area shape="rect" coords="8,179,162,208" href="extra_info_pages.php/pages_id/12" alt="FAQs">
<area shape="rect" coords="7,210,161,239" href="extra_info_pages.php/pages_id/13" alt="Sales Assistant">
<area shape="rect" coords="4,241,161,276" href="extra_info_pages.php/pages_id/14" alt="Client Call Back">
<area shape="rect" coords="8,279,158,308" href="extra_info_pages.php/pages_id/15" alt="Finance">
<area shape="rect" coords="5,309,159,340" href="account.php" alt="Login">
<area shape="rect" coords="7,372,161,405" href="extra_info_pages.php/pages_id/16" alt="Payment Information">
<area shape="rect" coords="6,406,161,437" href="extra_info_pages.php/pages_id/8" alt="Contact Us">
<area shape="rect" coords="5,439,163,469" href="extra_info_pages.php/pages_id/17" alt="Terms & Conditions">
<area shape="rect" coords="7,471,163,504" href="extra_info_pages.php/pages_id/18" alt="Site Map">
<area shape="rect" coords="179,311,204,478" href="" alt="Email Us">
</map>

<!-- right_navigation_eof //-->
</table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<table border="0" width="100%" cellspacing="0" cellpadding="0">


</table>

  </td></tr>
</table>


  </td></tr>

</table> 

<!-- footer_eof //-->

</body>
</html>

 

The relevant parts of the relevant osC files (I think anyway) are:

 

Top part of index.php

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html <?php echo HTML_PARAMS; ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<?php echo CHARSET; ?>"> 
<title><?php echo TITLE; ?></title>
<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">
<!-- header //-->

<?php 


// TTT Code
if ($current_category_id == '21') {
require(DIR_WS_INCLUDES . 'headercont.php'); 
} else { 
if ($current_category_id == '84') {
require(DIR_WS_INCLUDES . 'headercont.php'); 
} else { 
if ($current_category_id == '85') {
require(DIR_WS_INCLUDES . 'headercont.php'); 
} else { 
if ($current_category_id == '22') {
require(DIR_WS_INCLUDES . 'headerfusion.php');
} else { 
if ($current_category_id == '86') {
require(DIR_WS_INCLUDES . 'headerfusion.php');
} else { 
if ($current_category_id == '87') {
require(DIR_WS_INCLUDES . 'headerfusion.php');
} else { 
if ($current_category_id == '23') {
require(DIR_WS_INCLUDES . 'headerrustic.php');
} else { 
if ($current_category_id == '88') {
require(DIR_WS_INCLUDES . 'headerrustic.php');
} else {
if ($current_category_id == '89') {
require(DIR_WS_INCLUDES . 'headerrustic.php');
} else { 
require(DIR_WS_INCLUDES . 'header.php');
}}}}}}}}}
?>

<table border="0" width="100%" cellspacing="0" cellpadding="0"> 

<?php
 if ($category_depth == 'nested') {

 

Part of index.php that handles default.php

<?php
 } else { // default page
?>
<td width="100%" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">


  <tr>
	<td><table border="0" width="100%" cellspacing="0" cellpadding="0">


	  <tr>
		<td class="main"><?php echo TEXT_MAIN; ?></td>
	  </tr>

	  <tr>
		<td><?php //include(DIR_WS_MODULES . FILENAME_NEW_PRODUCTS); ?></td>
	  </tr>

	</table></td>
  </tr>
</table></td>
<?php
 }
?>

<td width="198" height="579" valign="top"><table border="0" width="198" cellspacing="0" cellpadding="0">
<?php require(DIR_WS_INCLUDES . 'column_right.php'); ?>
<!-- right_navigation_eof //-->
</table></td>
 </tr>
</table>
<!-- body_eof //-->

<!-- footer //-->
<?php require(DIR_WS_INCLUDES . 'footer.php'); ?>
<!-- footer_eof //-->

</body>
</html>
<?php require(DIR_WS_INCLUDES . 'application_bottom.php'); ?>

 

and finally header.php

///////////////////
if ( CENTER_SHOP_ON == 'on' ) {
///////////////////	  
// [0001] Background Color ON/OFF and CellPadding for around the shop?
///////////////////
  if ( CENTER_SHOP_BACKGROUND_ON == 'on' ) {
?>
<table width="100%" cellpadding="<?php echo CENTER_SHOP_PADDING; ?>" cellspacing="0" border="0" bgcolor="<?php echo CENTER_SHOP_BACKGROUND_COLOR_OUT; ?>">
  <tr><td>
<?php
  } 
///////////////////	
// [0001] Shop Width Size and Shop Background Color
///////////////////
?>
<table width="<?php echo CENTER_SHOP_WIDTH; ?>" align="center" BGCOLOR="<?php echo CENTER_SHOP_BACKGROUND_COLOR; ?>" BORDER="<?php echo CENTER_SHOP_BORDER; ?>" bordercolor="<?php echo CENTER_SHOP_BORDERCOLOR; ?>" CELLSPACING="<?php echo CENTER_SHOP_CELLSPACING; ?>" CELLPADDING="<?php echo CENTER_SHOP_CELLPADDING; ?>" >
  <tr><td BGColor="#ffffff">
<?php
 }
?>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<?php ///////////////////////////////////////////////////////////////////////////////////
// HEADER START 
///////////////////////////////////////////////////////////////////////////////////////?>
<img src="images/header-index.jpg" width="749" height="351" border="0" usemap="#Maph">
<map name="Maph">
 <area shape="rect" coords="6,78,65,102" href="index.php" alt="Home">
 <area shape="rect" coords="70,77,144,104" href="extra_info_pages.php/pages_id/6" alt="About Us">
 <area shape="rect" coords="156,79,221,104" href="extra_info_pages.php/pages_id/7" alt="Services">
 <area shape="rect" coords="235,76,316,102" href="extra_info_pages.php/pages_id/8" alt="Contact Us">
 <area shape="rect" coords="325,80,384,102" href="account.php" alt="Log In">
 <area shape="rect" coords="394,79,457,101" href="index.php/language/es" alt="Español">
 <area shape="rect" coords="558,146,717,170" href="index.php/cPath/21" alt="Contemporary">
 <area shape="rect" coords="556,170,718,194" href="index.php/cPath/22" alt="Fusion">
 <area shape="rect" coords="559,194,716,220" href="index.php/cPath/23" alt="Rustic">
 <area shape="rect" coords="3,106,200,347" href="index.php/cPath/21" alt="Contemporary">
 <area shape="rect" coords="521,8,739,100" href="index.php" alt="Spaces Interior Collections">
 <area shape="rect" coords="202,105,365,353" href="index.php/cPath/22" alt="Fusion">
 <area shape="rect" coords="371,103,551,349" href="index.php/cPath/23" alt="Rustic">
</map>
<?php ///////////////////////////////////////////////////////////////////////////////////
// HEADER END 
///////////////////////////////////////////////////////////////////////////////////////?>

 

Could some kind soul please put me out of my misery and point me in the right direction?

 

Thanks,

Ali.

Posted
Being driven nuts by a very simple problem that only seems to rear it's ugly head in Internet Explorer (Firefox, Opera & Safari are fine).

There's a few pixels of blank space appearing below the site header image and the rest of the page content (side column etc).

 

 

<title><?php echo TITLE; ?></title>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

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

</head>

<body marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">

<!-- header //-->

 

<?php

// TTT Code

if ($current_category_id == '21') {

require(DIR_WS_INCLUDES . 'headercont.php');

} else {

if ($current_category_id == '84') {

require(DIR_WS_INCLUDES . 'headercont.php');

} else {

if ($current_category_id == '85') {

require(DIR_WS_INCLUDES . 'headercont.php');

} else {

if ($current_category_id == '22') {

require(DIR_WS_INCLUDES . 'headerfusion.php');

} else {

if ($current_category_id == '86') {

require(DIR_WS_INCLUDES . 'headerfusion.php');

} else {

if ($current_category_id == '87') {

require(DIR_WS_INCLUDES . 'headerfusion.php');

} else {

if ($current_category_id == '23') {

require(DIR_WS_INCLUDES . 'headerrustic.php');

} else {

if ($current_category_id == '88') {

require(DIR_WS_INCLUDES . 'headerrustic.php');

} else {

if ($current_category_id == '89') {

require(DIR_WS_INCLUDES . 'headerrustic.php');

} else {

require(DIR_WS_INCLUDES . 'header.php');

}}}}}}}}}

?>

Hmmm...doesn't appear to be a bog-standard osc version. Running some kind of template system me thinks. Osc vanilla has cellpadding in 2 places on index.php and product_info cart etc etc. that affect head spacing. Padding + margins in the stylesheet will affect layout.

If its a bought template contact the providor for support perhaps.

<!-- body //-->

<table border="0" width="100%" cellspacing="3" cellpadding="3">

<tr>

<td class="col_left" valign="top"><table border="0" class="col_left" cellspacing="0" cellpadding="2">

<!-- left_navigation //-->

Posted

internet destroyer strikes again!

 

i'm a mac user, so, not being able to recreate the problem, i'll only be able to offer limited help.

 

my first advice is to change this:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 

this has fixed many a strange cross-browser problem.

 

the doctype declartion in the standard osC package is wrong (an egregious fault, imho), and so forces browsers into "Quirks" mode, which results in quirky behavior. worse still, there may be some quirky coding to "fix" the quirks of quirks mode, so even after you correct the doctype declartion, you may have some troubleshooting to do. but frequently, just changing that doctype declartion will make your problem go away.

 

if that doesn't fix it, after correcting the doctype declartion, take yourself to the W3 validator service (http://validator.w3.org/) and validate the source code. and i mean the resultant html, not the original php. i think you will find some structural errors that may be your problem.

 

if that doesn't correct your problem, then try validating your CSS at the w3 css validator (http://jigsaw.w3.org/css-validator/)

 

cheers,

rj

Posted
my first advice is to change this:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

 

to this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

forgot to mention that the capitalizing is important, which is why the stock osc doctype isn't recognized.

Posted

Thanks for your replies. Still can't get rid of it!

 

Went back to standard header and rebuilt it line by line.

 

With the standard osCommerce logo, cart links etc everything is fine, but as soon as I remove those and replace them with the image the dreaded gap appears again.

 

Anyway, thanks again - will keep at it.

 

Ali.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...