ajax tabs issues

**cassie** · 12-17-2007, 05:29 PM

1) Script Title:
ajax tabs 2.0
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...tent/index.htm

i'm having issues. first issue, iframe height, second issue, tabs offset. i think when you pull up the links it will be more or less self explanatory what is stumping me. in the demo link, it works perfectly, sizing the iframe as i specified. (i edited the container id in the html, and also the iframe size in the .js file.)

i copied the code directly from the demo and pasted it into the other page, and both are calling from the same .js files. i thought perhaps it was the tables that was throwing it off, but i tested that in the demo page on my hard drive and it continued to work without a problem. but i didn't upload that little test.

anyway, if anyone could take a look.... http://grapevinefellowship.org/working/iforum.html
http://grapevinefellowship.org/working/demo.htm

**cassie** · 12-17-2007, 05:32 PM

oh heck, forget the size part of the issue, apparently my browser didn't clear the cache. whew! i was so stumped on that! so all i really need is how to fix the offset issue!

**ddadmin** · 12-18-2007, 05:53 AM

Regarding alignment, I assume you mean on this page, how the shown contents appear centered? If so, this simply has to do with the CSS you're using the style "grapevinedivcontainer":

Code:

<div id="grapevinedivcontainer" style="border:0px solid #54587E; width:90%; height:900px; margin-bottom: 1em; padding: 10px">
<p>This is some default tab content, embedded directly inside this space and not via Ajax. It can be shown when no tabs are automatically selected, or associated with a certain tab, in this case, the first tab.</p>
</div>

Either remove the code in red, or set it to 100% instead.

**cassie** · 12-19-2007, 08:23 PM

actually i want the container centered, i just don't know how to get the tabs centered over the container. by leaving the width 90%, it prevents ending up with a horizontal scroll bar at the bottom when it's viewed in 800X600 res. (because it pushes out the sides of the table i've put it in.)

ok, i just discovered i DO still have the height issue... but only in IE.

the iframe height appears exactly as i want it using firefox. in IE, the container height is correct but the iframe height is not.

someone PLEASE help me figure out how to make this work in IE. if not, i'm gonna have to scrap the whole design and start from scratch, and i really do not want to do that.

oh, and the updated link (since i've got most of the site's revision complete) is www.grapevinefellowship.org/working

**ddadmin** · 12-19-2007, 11:07 PM

Both of these issues are CSS in nature. Firstly, you should add a valid doctype at the top of the page to ensure IE renders CSS correctly. Replace what you currently have:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>

with this instead:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Secondly, to get the tabs to align with the content DIV, set its width to 90% as well:

Code:

.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
text-align: center;
width: 90%;
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*/
}

**cassie** · 12-20-2007, 12:12 AM

thanks, i appreciate the tips, and will implement them, if i can get the iframe height to work in IE. actually i'll go ahead and fix the doctype and cross my fingers that THAT will resolve the height of the iframe...

do you have any idea how to fix that problem?

**cassie** · 12-20-2007, 12:20 AM

oh my gosh, it DID! i love you!

**ddadmin** · 12-20-2007, 12:47 AM

You're welcome.

A valid doctype can do some amazing things in IE.

**cassie** · 12-20-2007, 01:05 AM

i guess i'd have to upgrade my namo program for it to put a valid doctype in it automatically.... and frankly, i don't like the newer version of namo. i'm a creature of habit, i know how to use the version i have installed! but, i can always just bookmark this discussion to refer back to!

Thread: ajax tabs issues

Thread Tools

Search Thread

ajax tabs issues

Bookmarks

Bookmarks

Posting Permissions