Height issue with Ajax Tabs Content script v2.2

**TomT** · 04-16-2009, 09:54 PM

1) Script Title:
Ajax Tabs Content script v2.2

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...axtabscontent/

3) Describe problem:
I've set up a simple 4 tab layout. This looks fine in Firefox 3, but in IE7 the height of the iframe is a lot smaller.

Is there anyway to get the iframe the same height and width in IE & Firefox ??

Here is my test code:

index.htm

HTML Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="ajaxtabs/ajaxtabs.js"></script>
</head>
<body>

<ul id="countrytabs" class="shadetabs">
<li><a href="1.php" rel="#iframe">1</a></li>
<li><a href="2.php" rel="#iframe">2</a></li>
<li><a href="3.php" rel="#iframe">3</a></li>
<li><a href="4.php" rel="#iframe">4</a></li>
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:1000px; margin-bottom: 1em; padding: 10px"></div>

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>

This is my ajaxtabs.css

Code:

/* ######### CSS for Shade Tabs. Remove if not using ######### */

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}

.shadetabs li{
display: inline;
margin: 0;
}

.shadetabs li a{
text-decoration: none;
position: relative;
z-index: 1;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid #778;
color: #2d2b2b;
background: white url(shade.gif) top left repeat-x;
}

.shadetabs li a:visited{
color: #2d2b2b;
}

.shadetabs li a:hover{
text-decoration: underline;
color: #2d2b2b;
}

.shadetabs li a.selected{ /*selected main tab style */
position: relative;
top: 1px;
}

.shadetabs li a.selected{ /*selected main tab style */
background-image: url(shadeactive.gif);
border-bottom-color: white;
}

.shadetabs li a.selected:hover{ /*selected main tab style */
text-decoration: none;
}

Thanks in advance.

**ddadmin** · 04-17-2009, 09:18 AM

Inside the .js file, the HTML used to create the IFRAME is the following line:

Code:

	this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'

The above by default means the iframe's height should automatically be based on the height of the content DIV container which houses it, but if for some reason that's not working properly, you can either directly modify the HTML above, or style the "tabcontentiframe" CSS class with an explicit height value.

**BrightStarPro** · 08-28-2009, 06:21 AM

I'm having the same problem as well. I've changed the height of the tabcontentiframe which does adjust accordingly in Firefox, but it appears to have no effect in IE8. I'm still trying to troubleshoot this... Any suggestions?

**BrightStarPro** · 08-28-2009, 08:17 AM

Just to visually demonstrate what I'm experiencing...

Here's a screen cap in Firefox 3 of my Ajax tabs using iframes to display content:

And here's a screen cap in Internet Explorer 7 (and 8 is no different) using the exact same Ajax tabs with iframes displaying the content:

As you can see the height of the scroll bar in the iframe from FF matches the height of the div, but in IE the iframe is locked into being just one height. It's causing the scroll bar to appear when not needed, and when it is, its locked into that specific height, which causes it to be shorter than the height of the div.

I've edited this specific line of code from the ajaxtabs.js file (specifically the line that starts with "min-height") to edit the height of the iframe (to my knowledge this is the only way to control the height of the iframe in this whole script):

Code:

this.defaultIframe='<iframe src="about:blank" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" class="tabcontentiframe" style="width:100%; height:auto; min-height: 215px"></iframe>'

It works great in FF. But no matter what I value I set it to, the height of the iframe remains constant in IE... WHY?!

Here is the script which contains the actual tabs

Code:

<ul id="countrytabs" class="shadetabs">
<font face="trebuchet ms">
<li><a href="hydrating_cleanser_description.htm" rel="#iframe">DESCRIPTION</a></li>
<li><a href="hydrating_cleanser_ingredients.htm" rel="#iframe">INGREDIENTS</a></li>
</ul>
</font>

<div id="countrydivcontainer" style="border:1px solid gray; width:325px; height:215px; margin-bottom: 1em; padding: 0px">
//Optional default content here.
</div>

<script type="text/javascript">

var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

These two code sets are the only things I've edited in the script. If anyone can provide any assistance, I'd be very grateful.

Thanks

**BrightStarPro** · 08-29-2009, 06:04 AM

*bump*

**PeteB** · 03-23-2010, 02:07 PM

I got all the problems above, and each suggested solution had no effect.

But I got it to work by amending :

class="tabcontentiframe" style="width:100%; height:auto; min-height: 100px"></iframe>'

to be:

class="tabcontentiframe" style="width:100%; height:100%; min-height: 100px"></iframe>'

hth

Thread: Height issue with Ajax Tabs Content script v2.2

Thread Tools

Search Thread

Height issue with Ajax Tabs Content script v2.2

Bookmarks

Bookmarks

Posting Permissions