IE monster on the loose!!! Lite Red Template

**hardwiredtemplates** · 10 Aug 2011, 05:55 AM

Hello wonderful folks of zen carters.

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

.

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?...roducts_id=185

How can I tame this IE monster to behave

Once again much appreciations for all your contributions.

**SPH** · 10 Aug 2011, 09:08 AM

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/...e_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
www.prommart.com

**stevesh** · 10 Aug 2011, 11:10 AM

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;
}

**hardwiredtemplates** · 11 Aug 2011, 08:04 AM

Originally Posted by 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..

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

http://megasaveonline.com/index.php?...oducts_id=1352

Please help!!!

**hardwiredtemplates** · 11 Aug 2011, 10:12 PM

Originally Posted by 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..

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

http://megasaveonline.com/index.php?...oducts_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** · 11 Aug 2011, 10:36 PM

Originally Posted by 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

<div id="productMainImage ">
<div id="right_side">

what ever that goes in here

</div> 
</div> 

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,

**SPH** · 11 Aug 2011, 11:47 PM

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** · 11 Aug 2011, 11:48 PM

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

**hardwiredtemplates** · 12 Aug 2011, 12:21 AM

Originally Posted by 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/showth...=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)

**dbltoe** · 12 Aug 2011, 02:53 AM

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

Thread: IE monster on the loose!!! Lite Red Template

Thread Tools

Search Thread

Display

IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Re: IE monster on the loose!!! Lite Red Template

Similar Threads

Lite Red Template help needed

Lite Red HTML problem

Lite Red remove the -> symbol after a categories name having subcategories

Lite red template not showing "important links" sidebox

Lite Red 1.1 Template not showind product description

Bookmarks

Bookmarks

Posting Permissions