javascript div extending beyond container in IE7 ~ help!

Question

I have an empty div called #lightPole that has a background image of a lightpole. I am running a script to make the lightpole extend the length of the container. Everything looks good in most browsers except IE 7. For some reason that I can't figure out the lightpole is expanding way past the footer. Any ideas?

here's the site - http://greenlight.mybigcommerce.com/

here's the javascript:

<script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>

$(document).ready(function() { var Container_height = $('#Container').height(); $('#lightPole').height(Container_height); });

Here's some of the css related to the divs:

#Container {
height:auto;
width: 1100px;
margin: 0 auto;
background-image:url(../images/containerBackground_2.png)!important; /*this is a hack for IE6 to choose between background images*/
background-image:url(../images/containerBackgroundIE6.png);
background-position: center top;
overflow:hidden;
clear:both;
}


#Outer {
clear: both;
height: auto;
margin: 0 0 0 15px;
overflow: hidden;
padding: 0;
width: auto;

}

#Wrapper {    
clear: both;
float: left;
height: auto;
margin:9px 0 0 43px;
min-height: 350px;/***added to keep footer from hitting light on nav light pole**/
padding: 0;
width: 990px;

}


#LayoutColumn1{
 float: left;
height: 100%;
margin-bottom: 0;
margin-right: 0;
margin-top: 0;
position: relative;
z-index: 88;
clear:both;
}

#lightPole {
background:url(../images/lightPole8aSlice.png);
margin: 0 0 0 19.9px;
/*min-height: 320px;*/
overflow: hidden;
padding: 0;
position: absolute;
width: 15px;
z-index: -100;
 display: inline-block;
float: left;
}

Update - Could this be caused by an improperly closed div or a float not clearing?

Is it correct the piece of code that executes the resizing is commented out? — Kamiel Wanrooij, Jul 25 '11 at 22:53
I was trying a different piece of code to work so thats why it was commented out. — bjstone15, Jul 26 '11 at 15:24

score 0 · Accepted Answer · answered Jul 25 '11 at 22:42

0

I encountered a previous problem that was similiar and it was due to $(document).ready(function() firing before all of the images loaded. try using $(window).load(function(){

answered Jul 25 '11 at 22:42

Johnny Craig

4,974
2
26
27

well since the #lightpole is within the #container, i would say the issue is with the container only because you have overflow:hidden; on the container. so if the container was the correct size, the light pole would be cut off. i would try to set a specific height to the container itself. like 500px. see what that does. if that makes the lightpole cut off, try setting the container height to 100%. overall, i would be making changes to #container, not #lightpole – Johnny Craig Jul 26 '11 at 17:06
So weird! I set the height of the container to 500px and while it cuts out some of the content the the whole left navigation and the lightpole still show as well as the footer. I am thinking that this has something to do with how the CMS assembles the template and IE7 not being able to read where all the closing tags are. – bjstone15 Jul 26 '11 at 17:16
it sounds as though the lightpole's container is not #container. ill check your html – Johnny Craig Jul 26 '11 at 17:21
you have broken divs. i went in the middle of your html and started removing divs and ended up with a few extra tags leftover. thats where the problem is coming from – Johnny Craig Jul 26 '11 at 17:31
Alright, I think I got the divs all cleaned up, atleast on the default page, but it stills acting up in IE7. I was thinking of a work around using an if statement such as: – bjstone15 Jul 26 '11 at 20:28
heres a simplified version of what you want `` – Johnny Craig Jul 26 '11 at 20:35

score 0 · Answer 2 · answered Jul 25 '11 at 22:52

0

You appear to load 2 versions of jquery at the same time: jquery 1.3.2 and 1.5.2. Although I haven't pinned your problem on that just yet, it's probaly best to remove one of these.

answered Jul 25 '11 at 22:52

Kamiel Wanrooij

12,164
6
37
43

score 0 · Answer 3 · answered Jul 26 '11 at 15:56

0

In my experience, I have had images react differently with the following pieces of code:

$('#myimage').height(200);

vs

$('#myimage').attr('height',200);

The first one, the one that you are using, adds the height to the style attribute, which as you have discovered, works well in MOST browsers.

The second one sets the height attribute itself, and will work in more browsers. I don't have an IE7 instance, but you could try this.

answered Jul 26 '11 at 15:56

frosty

21,036
7
52
74

I am a complete newb to javascript. So is this saying 'the attribute myimage will be some height plus 200 pixels? – bjstone15 Jul 26 '11 at 16:51
The first piece, the piece that you are using, will do this '
...
' – frosty Jul 26 '11 at 17:28
The second piece will do this '
...
' – frosty Jul 26 '11 at 17:29
Also, if you like any of the answers provided you, you should click on the Up arrow next to them, so that you have a good rating of accepting answers. – frosty Jul 26 '11 at 17:31
It wont let me Up arrow because I don't have a big enough reputation :P – bjstone15 Jul 26 '11 at 21:15

javascript div extending beyond container in IE7 ~ help!

3 Answers3