Results 1 to 9 of 9
  1. #1
    Join Date
    Jan 2007
    Posts
    103
    Plugin Contributions
    0

    Default Help: Looks Great in Firefox / Safari - Crap In IE

    Ok - so I have sweated for over two weeks alongside a few colleagues to push and pull zencart into a decent design. I have read these forums till my eyes have bled. This was supposed to be a simple install and simple to customise but it has been like pulling out my own teeth.

    Anyway, I finally got the design sorted out and now I discover it looks great in Safari and in Firefox but the layout is all screwed up in Internet Explorer.

    Plus I discover Paypal Express and Nochex APC don't work.

    At this stage I am about to scream at my PC, throw out the past two weeks work and go to OSCommerce where I can purchase a template and throw a store online within a few hours.

    Please - someone save me from myself. Why does the layout look different on IE but fine in Firefox and Safari. What is wrong with the CSS - can someone point me in the right direction because I am incredibly frustrated.

    RANT OVER - Thanks for allowing me to let off steam

  2. #2
    Join Date
    Mar 2006
    Posts
    208
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    What is exactly your question ?
    And please..breath...relax
    Tell us the CSS bug, maybe a link to your shop?

    At this stage I am about to scream at my PC, throw out the past two weeks work and go to OSCommerce where I can purchase a template and throw a store online within a few hours.
    Sure?

  3. #3
    Join Date
    Jan 2007
    Posts
    103
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    Deep breaths -> hmmm

    I cannot give you a link to a live site because it is on a local XP machine. But I can try to describe the problem.

    The header uses a single background image and the logo is overlaid into position using the logowrapper. This is a fixed width layout. Now, in Firefox and Safari, the background image spans the entire fixed width header table exactly as it should, but in IE, it only shows half the table and chops off the end. There is an empty white space for the rest of the table header.

    Here is the css code for the header:

    #logo {
    float: left;
    padding-left: 0px;
    }

    #logoWrapper{
    background-image: url(../images/hdr_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    height:183px;
    }
    #tagline {
    color: #ffffff;
    font-size: 1.5em;
    padding-top:40px;
    padding-right:50px;
    text-align : right;
    vertical-align: middle;
    }

    #headerWrapper{
    margin: 0em;
    padding: 0em;
    }

    I cannot find anything wrong with it to cause IE to fall over

  4. #4
    Join Date
    Jan 2007
    Posts
    103
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    I think it is the shopping cart display code we placed in the header rather than a CSS issue, but it escapes me why IE reads the code different to Firefox and Safari.

    Here is my code from tpl_header.php - note the addition of <-- bof cart header display -->

    <?php
    // Display all header alerts via messageStack:
    if ($messageStack->size('header') > 0) {
    echo $messageStack->output('header');
    }
    if (isset($_GET['error_message']) && zen_not_null($_GET['error_message'])) {
    echo htmlspecialchars(urldecode($_GET['error_message']));
    }
    if (isset($_GET['info_message']) && zen_not_null($_GET['info_message'])) {
    echo htmlspecialchars($_GET['info_message']);
    } else {

    }
    ?>
    <!--bof-header logo and navigation display-->
    <?php
    if (!isset($flag_disable_header) || !$flag_disable_header) {
    ?>
    <div id="headerWrapper">
    <!-- bof cart header display -->
    <div id="navCartWrapper" class="cartheader">
    Your Basket:&nbsp;<?php echo ($_SESSION['cart']->count_contents()); ?>&nbsp;item(s)&nbsp;&nbsp;Total:&#163;<?php echo ($_SESSION['cart']->show_total()); ?>
    </div>
    <!-- eof cart header display -->


    <!--bof-branding display-->
    <div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' .

    zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' .

    HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
    <?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic',

    SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
    <?php
    if (HEADER_SALES_TEXT != '') {
    ?>
    <div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
    <?php
    }
    ?>
    <?php
    if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
    if ($banner->RecordCount() > 0) {
    ?>
    <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
    <?php
    }
    }
    ?>
    </div>
    <?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
    </div>

    <!--eof-branding display-->

  5. #5
    Join Date
    Mar 2006
    Posts
    208
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    Ok...easy try first:
    1. change
    background-image: url(../images/hdr_bg.jpg);
    to
    background: url(../images/hdr_bg.jpg) repeat-x;

    2. define width for your logoWrapper
    same goes for #logo and at least height 1&#37;;

    3. #logo {
    float: left;
    padding-left: 0px;
    }

    define your paddings like:
    padding:1em 1em 1em 0em;
    (directions are clockwise, first define is top, second right...etc)
    and prefer to use em's instead of px

    Let's see what happens

  6. #6
    Join Date
    Jun 2003
    Posts
    33,715
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    ...or change the logo height as specified in the includes/languages/english/header.php
    Please do not PM for support issues: a private solution doesn't benefit the community.

    Be careful with unsolicited advice via email or PM - Make sure the person you are talking to is a reliable source.

  7. #7
    Join Date
    Jan 2007
    Posts
    103
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    Ok - it is actually this code (as mentioned in my previous post) which was added to tpl_header.php and which is causing the problem in IE.

    <!-- bof cart header display -->
    <div id="navCartWrapper" class="cartheader">
    Your Basket:&nbsp;<?php echo ($_SESSION['cart']->count_contents()); ?>&nbsp;item(s)&nbsp;&nbsp;Total:£<?php echo ($_SESSION['cart']->show_total()); ?>
    </div>
    <!-- eof cart header display -->

    Why would this code cause the layout to look different in IE but fine in Firefox and Safari?

    If I remove the code from tpl_header.php the layout looks exactly as it should, therefore does not seem to be a CSS styling issue.

    Kim - one of the first things I did was adjust the logo height in the language files but thanks for the tip anyway



  8. #8
    Join Date
    Jan 2007
    Posts
    103
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    Nope - I was wrong. Pivey - please accept my apologies. After leaving it for the night and coming back (rather calmer) then re-reading your post, I did exactly what you suggested and re-wrote the styles for the header.

    This worked 100% (aside from a 10px margin which I can live with) so now the page looks the same in IE, Firefox and Safari (well apart from very minor differences).

    My header CSS now looks like this:

    /*HEADER CSS*/

    #logo {
    float: left;
    padding-left: 0em;
    width:212px;
    height:183px;
    }

    #logoWrapper{
    background-image: url(../images/hdr_bg.jpg);
    background-repeat: repeat-x;
    background-color: #ffffff;
    width:745px;
    height:183px;
    margin: 0em;
    padding: 0em;
    }
    #tagline {
    color: #ffffff;
    font-size: 1.5em;
    padding-top:40px;
    padding-right:50px;
    text-align : right;
    vertical-align: middle;
    }

    #headerWrapper{
    margin: 0em;
    padding: 0em;
    }

    /* End Header CSS */



    Thanks very much for helping me to sort this out and my apologies for having doubted you. Looks like I don't need to go to OSC after all

  9. #9
    Join Date
    Mar 2006
    Posts
    208
    Plugin Contributions
    0

    Default Re: Help: Looks Great in Firefox / Safari - Crap In IE

    Hi bekinky,

    glad you solved the issue.
    IE is the buggiest browser available today...this because the major www users browse with and as a common result > many have to report bugs.
    However, IE excuses a lot of errors as well.

    A floated element within a floated parent causes IE sometimes to resize the div's...unless you tell him/her the dimensions.
    However...best is always to define dimensions for your elements.

    Regarding your 10px margin...I am not sure, as I can't have a look at your page...maybe a clear:left or clear:right can solve the space issue.

    After all, I can understand you, but it would be wise to start see behind Zen Cart's php code and to realize that the custumization features and design freedom you get for free is impressive.
    Start here:
    http://www.yourhtmlsource.com/stylesheets/
    http://www.emanuelblagonic.com/2006/...ssion/#more-41
    http://www.oswd.org/designologue/year/2006/month/4
    http://www.pixelpusher.biz/archive/default.asp?cat=16

 

 

Similar Threads

  1. Please help! Looks OK in Firefox, Not OK in I.E. ?!
    By myemmadoodle in forum Templates, Stylesheets, Page Layout
    Replies: 33
    Last Post: 2 Jan 2012, 09:42 PM
  2. Looks different in Safari and Firefox
    By Coffinwear in forum General Questions
    Replies: 0
    Last Post: 30 Oct 2010, 06:35 PM
  3. Looks great in Firefox, broken in IE. help :)
    By linnx in forum Templates, Stylesheets, Page Layout
    Replies: 0
    Last Post: 1 Mar 2010, 07:06 PM
  4. Looks awesome in most browsers, like crap in IE7
    By afinta in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 8 Feb 2008, 06:21 PM
  5. My website looks terrible in FireFox... Please HELP
    By YairOz in forum General Questions
    Replies: 3
    Last Post: 26 Oct 2007, 02:00 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR