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
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?
Quote:
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?
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 :no:
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: <?php echo ($_SESSION['cart']->count_contents()); ?> item(s) Total:£<?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-->
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%;
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
Re: Help: Looks Great in Firefox / Safari - Crap In IE
...or change the logo height as specified in the includes/languages/english/header.php
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: <?php echo ($_SESSION['cart']->count_contents()); ?> item(s) 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
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 :lol:
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 :laugh: 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