.height() fine in Chrome, Opera & Firefox but not IE8 and Safari?

JavaScript
1

Hi all,

The below code works fine in Chrome, Opera and Firefox.

It does NOT work fine in IE8 or Safari. In both these browsers the height of the DIV that’s being set is usually shorter than the other DIV it’s being aligned with.

Here’s the code I’m using to resize the problematic DIV:

[B]Function resize(height) {

   $(document).ready(function(){
      
   
		var div = $( "#annoucement-area-243" );
		var startHeight = div.height();					
		var endHeight = height; //$("#annoucement-area-880").innerHeight();
		div.height( startHeight ).animate({ height: endHeight });								

		var div = $( ".content-annoucement-243" );
		var startHeight = div.height();						
		var endHeight = height; //$(".content-annoucement-880").innerHeight();
		div.height( startHeight ).animate({ height: (endHeight - 40)});		
	
	});

}

});[/B]

Here’s the CSS of the affected DIV ID and DIV class:

[B]#annoucement-area-243 {
float: left;
width: 243px;
overflow: hidden;
text-align: justify;
background: url(…/images/shadow6.png) bottom center no-repeat;
}

.content-annoucement-243 {
width: 171px;
padding: 0px 35px 0px 35px;
background: #fff;
border: solid #b1b1b1 1px;
border-top: 0;
border-bottom: 0;
text-align: center;
}[/B]

I’m guessing the problem lies somewhere with padding/margins being thrown in there by IE8 and Safari but not the other browsers.

Any ideas?

Thanks,

2

In IE the .height() and .width() of the viewport is off by 4 and 2 pixels, simply add 4px to the width and 2px to the height like so

var startHeight = div.height()+2;

and this corrects the offset width and height in IE’s viewport

3

Well this isn’t possible for me to test reliably unless I’m missing somewhere?

The site uses JS/JQuery so disabling it will for example extend all sections of the accordion and corrupt much of the page layout.

I have tried disabling JS though and while the layout goes belly up I can’t see the length of the DIV changing. I’ve put a banner in there and the whitespace between where the vertical banner ends and the end of the DIV (.content-annoucement-bottom-243) is the same so this would imply that disabling JS doesn’t affect .content-annoucement-243’s height.

One idea might be to set the DIV background to black, this way it should show where the extra margin/padding is being stuffed in. I’ll give this a go.

4

I’ve set the background of .content-annoucement-243 to black.

In all browsers (IE8, IE7, IE6, Chrome, Safari, Opera, Firefox and Flock) there’s absolutely no left or right margin/padding being applied and both the top and right also have no additional margin/padding thus affecting .content-annoucement-top-243 and .content-annoucement-bottom-243.

All points back to it being a height issue. For some reason for example 1718px != 1718px in IE and Safari. It’s astonishing that this issue hasn’t cropped up anywhere else. I think the cause is the accordion, IE & Safari seem to be getting confused when it expands on page load showing the first accordion section. :confused:

5

Are the heights of these div’s the same in all browsers with JavaScript disabled?

6

and

Very strange. The width of the DIV when I test it in IE8 & Safari is perfect, just as it should be, as originally set in the CSS.

As for the height, the height in IE8 is short by about 25px so much more than 2px. In IE7 the height is short by about 15px. In IE6 (which I’m not officially supporting any longer) the height is short by about 45px.

In Safari the height is short by about 15px.

All the above tests are results from clicking the same accordion section. Given this the DIV containing the accordion should extend the same and indeed it does. For this reason extending the height of the other DIV to fixed values should also always yield the same result (as proven in 4 browsers).

The value (how much shorter or longer the DIV is than that expected) however fluctuates in these browsers (IE8, IE7, IE6, Safari) depending on which part of the accordion gets clicked. For this reason I don’t think it’s a case of (I’m IE8 (for example) so I’ll throw in my own fixed padding/margin just for fun). It’s rather a case of (I’m IE8 (for example) so I’ll throw in my own varying padding/margin based on some other values that only I know).

Flock (which I believe to be based on Safari) on the other hand renders the DIV perfectly so that makes Chrome, Firefox, Opera and Flock (4) browsers which just follow the code instead of adding in their own code.

So this begs to ask, are you guys using IE8, IE7?

I’m going to try clearing the cache again to see if this helps. If if doesn’t it’s anyone’s guess I suppose in regards to what’s going on here :rolleyes:

If a solution to the above cannot be found then I can resort to manually appending a +X value to the height. The only problem here is that conditional statements will only fix the problem in IE. How would I detect Safari though? The User agent property can’t be relied on.

7

Thanks for your input.

Can you give a link or full code so that the miss-alignment can be seen?

A link isn’t possible since at the moment all of the site is located off-line and tested on localhost. I can however provide any code that maybe useful if you tell me what you need to see? Above I posted the DIV’s ID and class CSS.

To give you an idea what may influence the DIV’s in question here, here is a how its setup within the page itself:

<!-- Start of Annoucement –>
<div id=“annoucement-area-243” style=“float: right;”>
<div class=“content-annoucement-top-243”></div>
<div class=“content-annoucement-243” style=“height: 1788px;”>
<?php include($doc_root.‘/init/banners/2010-july-campaign.php’); ?>
</div>
<div class=“content-annoucement-bottom-243”></div>
</div>
<!-- End of Annoucement –>

I’ve bolded the DIV’s of which their height is being dynamically amended. Of course the other DIV’s around them may be the cause of the problem even though 3 browsers all render it correctly. The CSS of the other DIV’s (as I trust this will be helpful) is:

.content-annoucement-top-243 {
height: 10px;
width: 243px;
font-size: 1px;
margin: 0px 0px 0px 0px;
}

and

.content-annoucement-bottom-243{
height: 10px;
width: 243px;
font-size: 1px;
margin: 0px 0px 20px 0px;
}

As I’m not changing these via jquery I don’t see how they could all of a sudden interfere. Just a reminder, in most cases the lengths of the DIV’s in IE7/8 and Safari will be shorter than what they should be. This would imply both browsers are somehow stripping away some margin/padding?

Do you have a valid DTD?

The page the DIV’s are located on (in rather) as well as all pages of this website always have the following DTD set:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Has the css a basic reset?

* {margin:0;padding:0;}

I have modified the code to reset margin and padding both to 0 but this doesn’t help length wise, it also introduces a width problem (but this can be easily fixed by reinstating the correct margin/padding). The modified code looks like this:

var div = $(“#annoucement-area-243” );
div.css(“margin”,“0”);
div.css(“padding”,“0”);
var startHeight = div.height();
var endHeight = height; //$(“#annoucement-area-880”).innerHeight();
div.height( startHeight ).animate({ height: endHeight });

		var div = $(".content-annoucement-243" );
		div.css("margin","0");
		div.css("padding","0");
		var startHeight = div.height();	
		var endHeight = height; //$(".content-annoucement-880").innerHeight();
		div.height( startHeight ).animate({ height: (endHeight - 40)});

Anything else needed?

8

I can’t reproduce the problem; all browsers look identical.

9

Can you give a link or full code so that the miss-alignment can be seen?
Do you have a valid DTD?
Has the css a basic reset?

* {margin:0;padding:0;}