IE monster on the loose!!! Lite Red Template

Hello wonderful folks of zen carters.

I must say the community has been very very very helpful which is why I am here again:D.

Site looks ok in Firefox but IE version 6 and 7 are making site fall apart and any help would be appreciated. I've only tested these versions of IE since they are on my home PC, so I don't know if problem exist in other version of IE.

Please view these two links two links in IE version 6 or 7:

http://megasaveonline.com/
and
http://megasaveonline.com/index.php?main_page=product_info&cPath=35_36&products_id=185

How can I tame this IE monster to behave

Once again much appreciations for all your contributions.

I didn't see anything unusual in my IE9 and I don't have the other browsers.

So I looked using the online IE checker I use:

http://ipinfo.info/netrenderer/index.php

Yes, messed-up in IE7; didn't bother checking IE6.

I've tested this and this series of templates, all are pretty nice. Here is the demo template at:

http://(sorry, site offline)/1-3-9d/index.php?main_page=index&template_dir=lite_red

I ran it in the above online browser checker and it looks okay in IE6 & 7.

You've done alot of work, especially in the header area. I suppose that's where it's messing up. No suggestion other than maybe backing up step by step until it's no longer broken.

sph
https://www.prommart.com

You can fix the header problem by setting the height of logoWrapper in the stylesheet to at least the height of your header image (127px).

I can't tell exactly what's causing the right column to be pushed out, but I'd look at the code for the slideshow first. You should remove the extra <html> and <body> tags, and this doesn't look right:

.centerdiv>div{ /Proper way to center a relative div/
width: 400px;
margin-left: 10px;
}

stevesh:

You can fix the header problem by setting the height of logoWrapper in the stylesheet to at least the height of your header image (127px).

I can't tell exactly what's causing the right column to be pushed out, but I'd look at the code for the slideshow first. You should remove the extra <html> and <body> tags, and this doesn't look right:

.centerdiv>div{ /Proper way to center a relative div/
width: 400px;
margin-left: 10px;
}

Thanks Steve the header is now fixed by your suggestion. I have removed the slide show js entirely I could not find the extra <html> tags so the whole thing is gone.

For the right side being pushed I originally had this in my product_info.css

#right_side {
margin: 0em 0 0 383px;
border: 1px solid #C8CACB;
background-color: #F4F8F9;
width: 410px;
height: 320px;
}

Adding 410 + 383 = 793px which I doubt is the size of the center box (not sure what the size is it's not mentioned anywhere)

so knowing this I've reduced it to:
#right_side {
margin: 0em 0 0 381px;
border: 1px solid #C8CACB;
background-color: #F4F8F9;
width: 350px;
height: 320px;
}
381+350 = 731px which I still doubt is the size of the center box but seems to work for IE 7

Still however the page does not look the same in IE 7 and ffox. I am trying to achieve the ffox look in IE but no dice..:frusty:

My suggestion I would like to move the code of the whole right_side DIV inside the:
productMainImage DIV then I guess I can use floats instead of these weird margins, but I do not have ANY IDEA where to paste the code:frusty:

http://megasaveonline.com/index.php?main_page=product_info&cPath=35_38&products_id=1352

Please help!!!

hardwiredtemplates:

Thanks Steve the header is now fixed by your suggestion. I have removed the slide show js entirely I could not find the extra <html> tags so the whole thing is gone.

For the right side being pushed I originally had this in my product_info.css

#right_side {
margin: 0em 0 0 383px;
border: 1px solid #C8CACB;
background-color: #F4F8F9;
width: 410px;
height: 320px;
}

Adding 410 + 383 = 793px which I doubt is the size of the center box (not sure what the size is it's not mentioned anywhere)

so knowing this I've reduced it to:
#right_side {
margin: 0em 0 0 381px;
border: 1px solid #C8CACB;
background-color: #F4F8F9;
width: 350px;
height: 320px;
}
381+350 = 731px which I still doubt is the size of the center box but seems to work for IE 7

Still however the page does not look the same in IE 7 and ffox. I am trying to achieve the ffox look in IE but no dice..:frusty:

My suggestion I would like to move the code of the whole right_side DIV inside the:
productMainImage DIV then I guess I can use floats instead of these weird margins, but I do not have ANY IDEA where to paste the code:frusty:

http://megasaveonline.com/index.php?main_page=product_info&cPath=35_38&products_id=1352

Please help!!!

Sorry to quote myself but how do I go about putting <div id="right_side"> inside main product image Div either by moving the code or by CSS declarations.

If I accomplished I believe then I can use float:left to put the right_side box immediately to the right of the main image. (Would I be right with this assumption?). Currently I am doing this by this in the CSS file

#right_side {
margin: 0em 0 0 381px;
}

This could then perhaps fix the issue of IE making two seperate boxes( one for main image and another for right_side Div - Hope I am right with this assumption too)

View link here

Many thanks folks...

hardwiredtemplates:

Sorry to quote myself but how do I go about putting <div id="right_side"> inside main product image Div either by moving the code or by CSS declarations.

If I accomplished I believe then I can use float:left to put the right_side box immediately to the right of the main image. (Would I be right with this assumption?). Currently I am doing this by this in the CSS file

#right_side {
margin: 0em 0 0 381px;
}

This could then perhaps fix the issue of IE making two seperate boxes( one for main image and another for right_side Div - Hope I am right with this assumption too)

View link here

Many thanks folks...

Thanks folks I've managed to do the above by doing this in case others could benefit.

in my tpl_product_info_display.php I've added

what ever that goes in here

I now have got the same look in IE and ffox but I do need a little assistance. I still have a white are between the two boxes and I do not wish to use negative margin does anyone know why this is happening.

Is this caused by some kind of a script and how can I eliminate it.

Sincerely,

On your homepage, your first few flyout menus go behind your homepage banner.

I've also never seen a fly-out menu that also scrolls. Not sure what to make of that.

Always want to check validation before making too many changes. 20+ errors fixed might make a real difference in presentation.

SPH:

On your homepage, your first few flyout menus go behind your homepage banner.

I've also never seen a fly-out menu that also scrolls. Not sure what to make of that.

Thanks for the pointer, but that was just an earlier test and I forgot to delete it however, it's now gone..by by

and for the flyout menus going behind the homepage banner this is an issue that other experience and I've posted it here: http://www.zen-cart.com/forum/showthread.php?t=68676&page=66

dbltoe by validating is this where it's done: http://validator.w3.org/ and do I enter every page of the site or just the main domain(home page)?

Any ideas on why there is a gab between the two boxes here - by two boxes I mean the image box (grey border) and right_side box(also grey border)

Yes, you can use w3c or add the HTML tidy addon to firefox. And I'd check 'em all.

SPH:

On your homepage, your first few flyout menus go behind your homepage banner.

I've also never seen a fly-out menu that also scrolls. Not sure what to make of that.

dbltoe:

Yes, you can use w3c or add the HTML tidy addon to firefox. And I'd check 'em all.

Thank you so much for suggesting the html tidy addon I was totally lost with w3 validator.

I ran the home page has no errors but 25 warning
all product page have no errors but higher warning but under 100.

A also visited few other sites majority of sites contains errors so I understand that errors can be over looked as long as they are not so high.

2. Ran the home page on w3 validator: result - 10 errors and 9 warnings.

at this point I am a little confused on what to do.

p.s. my php and css knowledge is very limited so be gentle please.