Internet Explorer Issues - z-index, white space, etc.

[mafiasam]

Hello, I am having serious issues with the way Internet Explorer is displaying different elements of my store...


my site:
http://www.oldwestgames.com

my resources:
I do have a basic understanding of CSS.
Very little knowledge of PHP.
I have Adobe GoLive which is awesome for editing CSS.
my zencart version is 1.3.0.2
I am using the future zen template.

my ISSUES:

1. Obviously you can see the white space above the "bread crumb" and the three "columnwrappers". I tried to adjust this and I can get the Internet Explorer white space to lessen a bit but then when you go into Firefox and look at it the aforementioned elements disappear behind the header making it impossible to navigate the store in Firefox so I am forced to leave the white space. Is there a fix for this?

2. The menu dropdowns code I have used (http://www.zen-cart.com/forum/showthread.php?t=43597) look and work great in Firefox but there is a problem in Internet Explorer. The longest menu is long enough to span the white space and lie underneath the right sidebox container. (If the previous issue were fixed this issue would be more drastic obviously) The code for the dropdowns includes z index references. I tried to add a negative z index to the sidebox container so it jumped above the dropdowns but it didn't work. Is there a fix for this?

3. Last thing...notice that the featured products box for the main center column is not surrounding the products that are included there. The border for that box actually disappears behind the display of the products. I have thought about turning off the border (setting it to zero) but it looks great in firefox and I am wondering if there might be a better solution than just hiding the flaw?

Anyways, these are all IE issues. I have no problems with firefox. Since more people are starting to use firefox I would hate to not be able to support it (note the firefox banner). At the same time I don't want my store looking unprofessional and confusing in IE.

Please HELP.

Thanks
Sam
http://www.oldwestagames.com

[kuroi]

1. Obviously you can see the white space above the "bread crumb" and the three "columnwrappers". I tried to adjust this and I can get the Internet Explorer white space to lessen a bit but then when you go into Firefox and look at it the aforementioned elements disappear behind the header making it impossible to navigate the store in Firefox so I am forced to leave the white space. Is there a fix for this?

This seems to me to be most likely because you have a sprinkling of <p></p> (and occasionally <div></div>) pairs being generated and included in your HTML. This is not normal, so I can't tell you where they are coming from, but for example, a couple appear just above your breadcrumbs. When they appear FF and IE treat them differently. FF recognises that they are empty tags that in its view shouldn't be there and strips them out. IE treats them with more respect and gives them each the height that would be given to normal content if it existed.

2. The menu dropdowns code I have used (http://www.zen-cart.com/forum/showthread.php?t=43597) look and work great in Firefox but there is a problem in Internet Explorer. The longest menu is long enough to span the white space and lie underneath the right sidebox container. (If the previous issue were fixed this issue would be more drastic obviously) The code for the dropdowns includes z index references. I tried to add a negative z index to the sidebox container so it jumped above the dropdowns but it didn't work. Is there a fix for this?

You don't say whether you had "positioned" the sidebox container. z-indices only work on positioned elements. BTW, your javascript declaration looks faulty to me. "<script type="text/javascript">" would be more normal, though this doesn't seem to be causing any obvious problems.

3. Last thing...notice that the featured products box for the main center column is not surrounding the products that are included there. The border for that box actually disappears behind the display of the products. I have thought about turning off the border (setting it to zero) but it looks great in firefox and I am wondering if there might be a better solution than just hiding the flaw?

You can achieve this by forcing IE to calculate a height for the container. Do this by adding the styling in red below to your CSS

.centerBoxWrapper { background-color: #fff; margin: 0; background-image:none; background-repeat:no-repeat; background-position:left top; border: solid 2px #9a7664; height: 1% }

[mafiasam]

1.

This seems to me to be most likely because you have a sprinkling of <p></p> (and occasionally <div></div>) pairs being generated and included in your HTML. This is not normal, so I can't tell you where they are coming from, but for example, a couple appear just above your breadcrumbs. When they appear FF and IE treat them differently. FF recognises that they are empty tags that in its view shouldn't be there and strips them out. IE treats them with more respect and gives them each the height that would be given to normal content if it existed.

That's great! I was able to track down the problem. The code for the dropdowns was actually enveloped in paragraph code. Removed it and IE and firefox look near similar in regards to the spacing. amazing! thank you.

2.

You don't say whether you had "positioned" the sidebox container. z-indices only work on positioned elements. BTW, your javascript declaration looks faulty to me. "<script type="text/javascript">" would be more normal, though this doesn't seem to be causing any obvious problems.

This is still not fixed unfortunately...I am looking at the dropdowns styling and noticing that some of the styles have z-indices but no positioning. I am thinking this may be thee problem but I don't have a clue how to resolve it...

hoping that if I post the styles you or someone can give me some direction...

#nav        { color: #fff; font-size: 10px; font-weight: bold; line-height: 1px; background-color: #000; list-style-type: none; list-style-position: outside; margin: -1px 0 0; padding: 0; position: relative; z-index: 1000; top: 0; width: 800px; height: 15px; border-top: 1px solid #000000; border-bottom: 1px solid #000000   }

#nav ul   { color: #fff; font-size: 10px; line-height: 1px; background-color: #000; text-align: center; list-style: none; margin: 0; padding: 0; position: relative; z-index: 1000    }

#nav a  { color: #fff; font-size: 10px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: bold; line-height: 140%; background-color: #000; text-decoration: none; text-align: center; display: block; z-index: 1000; width: auto; height: auto  }

#nav a:link, #nav a:visited, #nav a:active       { color: #fff; background-color: #000; z-index: 1000 }

#nav a:hover, #nav a:focus     { color: #000; background-color: #9A7664; z-index: 1000 }

#nav li    { text-align: left; z-index: 1000; width: 160px; float: left }

#nav li ul          { background-color: #fff; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.leftside          { background-color: #fff; margin-left: -1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul.rightside           { background-color: #fff; margin-left: 1px; position: absolute; z-index: 1000; left: -999em; width: 159px; border-top: 1px solid #000000; border-right: 1px solid #000000; border-left: 1px solid #000000 }

#nav li ul li   { background-color: #fff; z-index: 1000; width: 159px; border-bottom: 1px solid #000000  }

#nav li ul li a:hover   { z-index: 1000; border-style: none }

#nav li:hover ul, #nav li.sfhover ul     { z-index: 1000; left: auto }

#nav li ul ul      { margin: -16px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.two_lines      { margin: -31px 0 0 158px; position: absolute; z-index: 1000 }

#nav li ul ul.left_popout     { margin: -31px 0 0 -158px; position: absolute; z-index: 1000 }

#nav li:hover ul ul, #nav li.sfhover ul ul  { z-index: 1000; left: -999em }

#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul   { z-index: 1000; left: auto }

/* extra positioning rules for limited noscript keyboard accessibility */

#nav li a:focus + ul   { margin-left: 0; z-index: 1000  }

#nav li li a:focus + ul  { margin-left: 200px; z-index: 1000 }

#nav li li a:focus     { color: #9A7664; background: #000; margin-left: 1000em; z-index: 1000 }

#nav li li li a:focus     { color: #fff; background: #000; margin-left: 200px; z-index: 1000 }

#nav li:hover a:focus, #nav li.sfhover a.sffocus     { color: #9A7664; background-color: #000; margin-left: 0; z-index: 1000 }

#nav li li:hover a:focus + ul, #nav li li.sfhover a.sffocus + ul     { color: #9A7664; background-color: #000; margin-left: 10em; z-index: 1000 }

I am thinking that it might be in the "extra positioning rules" where there's a problem. I think those are included for IE compatibility. Any ideas?

3.

You can achieve this by forcing IE to calculate a height for the container. Do this by adding the styling in red below to your CSS

Again, amazing! Worked perfectly.

Thank you so much...

If I could just get that dropdown styling set up properly now.... :)

[mafiasam]

:bump:

have been trying desperately to fix that second issue with the dropdown menus not positioning above the three lower columns in Internet Explorer...

experimented with almost every position and z-index I could imagine but i'm not exactly well versed in divs and positioning and I may just be confusing the issue even more if I start applying positions and z-indeces to divs willy nilly...

the other two issues have been resolved...

please help!

[mafiasam]

:bump:

have been trying desperately to fix that second issue with the dropdown menus not positioning above the three lower columns in Internet Explorer...

experimented with almost every position and z-index I could imagine but i'm not exactly well versed in divs and positioning and I may just be confusing the issue even more if I start applying positions and z-indeces to divs willy nilly...

the other two issues have been resolved...

please help!

look I'm quoting myself...lol

okay, I finally made a discovery but it's less than totally resolved. as soon as I fix one thing the next thing creeps up behind me.

so i discovered a div relative position applied to the #contentmainwrapper

#contentMainWrapper {
	position: relative;
	top: 15px;
	}

Tried to apply a z-index to it but no matter what number i used I couldn't get it to work.

When I yanked out that relative positioning the dropdowns floated to the top. voila!

however that 15px got pulled out as well so now the top of the #contentmainwrapper is cut off in IE so that the top sidebox borders are not visible. this is less problematic than it was previously and I think I can probably add something the contentmainwrapper code to push it down without using div positioning.

I guess I have to keep exerimenting with it. any ideas?

[vr4indian]

remove all the occ. of this


<br class="clearBoth" />


solved..


vishal DOT comp AT gmail DOT com

[mafiasam]

remove all the occ. of this


<br class="clearBoth" />


solved..


vishal DOT comp AT gmail DOT com

cool, i'm going to try that as soon as I get to my work computer. i'll let you know.

thanks

[mafiasam]

remove all the occ. of this


<br class="clearBoth" />


solved..


vishal DOT comp AT gmail DOT com

Unfortunately this did not solve the problem at all...

it merely shoved the header to the right of center above the main store in firefox...
it did nothing to the IE view...

thanks though...

[mafiasam]

false alarm - not solved

[mafiasam]

solved:

since firefox and IE don't read empty paragraph html code the same way i had to figure out a mixture of paragraph and line break html code that worked perfectly to display the page appropriately.

 /**
  * prepares and displays left column sideboxes
  *
  */
?>
<div id="navColumnOneWrapper" style="width: <?php echo BOX_WIDTH_LEFT; ?>"><?php require(DIR_WS_MODULES . zen_get_module_directory('column_left.php')); ?></div></td>
<?php
}
?>
<p></p><p></p><br>
<td valign="top">
<!-- bof  breadcrumb -->

seems to have done the job...all is well now...