Header graphics appear side-by-side in Firefox, but vertically in IE

**aaelghat** · 14 Apr 2007, 07:14 PM

Hi, my cart is here:

http://lifeonrecord.com/cart/

When I view my cart in FireFox, the header looks fine (except for the fact that it's not centered - I'm kind of stymied by that - I've tried every setting I can to center it).

However, in IE the logo is above the rest of the header instead of to the left. How can I rectify this? Thanks!!

**clydejones** · 14 Apr 2007, 07:22 PM

Originally Posted by aaelghat

Hi, my cart is here:

http://lifeonrecord.com/cart/

When I view my cart in FireFox, the header looks fine (except for the fact that it's not centered - I'm kind of stymied by that - I've tried every setting I can to center it).

However, in IE the logo is above the rest of the header instead of to the left. How can I rectify this? Thanks!!

First, you have several validation errors which should be corrected.

The major one is that you have two (2) "head" sections. I've highlighted them in red.

This is from the view source of your site:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>Zen Cart!, The Art of E-commerce</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="LifeOnRecord Weddings LifeOnRecord Events LifeOnRecord Personal Journals ecommerce, open source, shop, online shopping " />
<meta name="description" content="Zen Cart! - LifeOnRecord Weddings LifeOnRecord Events LifeOnRecord Personal Journals ecommerce, open source, shop, online shopping" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="The Zen Cart&trade; Team and others" />
<meta name="generator" content="shopping cart program by Zen Cart&trade;, http://www.zen-cart.com eCommerce" />

<base href="http://lifeonrecord.com/cart/" />

<link rel="stylesheet" type="text/css" href="includes/templates/custom/css/stylesheet.css" />
</head>

<body id="indexBody">

<div id="mainWrapper">



<!--bof-header logo and navigation display-->

<head>

<div id="headerWrapper">

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><a href="http://lifeonrecord.com/cart/"><img src="includes/templates/custom/images/logo.gif" alt="LifeOnRecord" title=" LifeOnRecord " width="272" height="87" /></a></div>




<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

**aaelghat** · 14 Apr 2007, 08:02 PM

Thanks. Your post made me use the FireFox Tools\Validate HTML plug-in - very useful.

I started looking through the code, but I have kind of a basic question... My tpl_header.php file only has one <head> tag which corresponds to the second tag in your pasted code below.

What other file gets read when that page is built that may have the first <head > tag?

**Kim** · 14 Apr 2007, 09:07 PM

Did you create or buy the template?

**aaelghat** · 14 Apr 2007, 09:13 PM

Originally Posted by Kim

Did you create or buy the template?

Which template - the header graphics on my web site which I duplicated in Zen-Cart? I paid a web designer to create those for me and I own them, but I try and do as much as I can on my own to minimize the fees I pay him which is why I'm trying to incorporate them in Zen on my own.

If you mean the Zen-Cart template, I'm just using the default template. I basically copied and pasted portions of the header information from my web site into tpl_header.php.

**aaelghat** · 14 Apr 2007, 09:28 PM

Just to clarify - when I said I'm using the default template, I pasted my code into tpl_header.php in my custom folder.

**clydejones** · 15 Apr 2007, 12:47 AM

Originally Posted by aaelghat

Thanks. Your post made me use the FireFox Tools\Validate HTML plug-in - very useful.

I started looking through the code, but I have kind of a basic question... My tpl_header.php file only has one <head> tag which corresponds to the second tag in your pasted code below.

What other file gets read when that page is built that may have the first <head > tag?

includes/templates/YOUR_TEMPLATE/common/html_header.php

This file contains the <head> </head> tags and your code should go there.

**aaelghat** · 15 Apr 2007, 11:41 PM

I apologize if this has been discussed before, but I couldn't find the answer...

As I go through my code and try to fix validation errors, is there a good tool or utility I can use to help me identify what I need to fix and what I need to do?

I downloaded the Firefox developer toolbar, and the "Validate HTML" tool is helpful, but it doesn't tell me specifically where to look in tpl_header.php.

It also doesn't tell me why the header graphics appear vertically in IE as opposed to Firefox.

I have Dreamweaver, and the PHP code is color-coded, but it doesn't explicitly point out the errors that the Firefox toolbar points out.

Having said that, my remaining validation errors don't seem like big ones, and I'm still stymied why my header graphics appear vertically in IE. Thanks.

Thread: Header graphics appear side-by-side in Firefox, but vertically in IE

Thread Tools

Search Thread

Display

Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Re: Header graphics appear side-by-side in Firefox, but vertically in IE

Similar Threads

Changing Blank Side Box Header Removes all right side boxes

No colour poor graphics distorted side boxes.

Replace side box and centre headers with graphics

Side Box Graphics

Gap between sidebox header and border, but only on one side.

Posting Permissions