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?...roducts_id=185
How can I tame this IE monster to behave
Once again much appreciations for all your contributions.
Re: IE monster on the loose!!! Lite Red Template
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
Re: IE monster on the loose!!! Lite Red Template
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;
}
Re: IE monster on the loose!!! Lite Red Template
Quote:
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..: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?...oducts_id=1352
Please help!!!
Re: IE monster on the loose!!! Lite Red Template
Quote:
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..: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?...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...
Re: IE monster on the loose!!! Lite Red Template
Quote:
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> <!-- close right_Side Div/Container -->
</div> <!-- close productMainImage -->
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,
Re: IE monster on the loose!!! Lite Red Template
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.
Re: IE monster on the loose!!! Lite Red Template
Always want to check validation before making too many changes. 20+ errors fixed might make a real difference in presentation.
Re: IE monster on the loose!!! Lite Red Template
Quote:
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)
Re: IE monster on the loose!!! Lite Red Template
Yes, you can use w3c or add the HTML tidy addon to firefox. And I'd check 'em all.
Re: IE monster on the loose!!! Lite Red Template
Quote:
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.
Quote:
Originally Posted by
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.
