Results 1 to 9 of 9

Thread: ajax tabs issues

  1. #1
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ajax tabs issues

    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
    Last edited by cassie; 12-19-2007 at 08:58 PM.

  2. #2
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  3. #3
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  4. #4
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by cassie; 12-19-2007 at 08:35 PM. Reason: clarification

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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*/
    }

  6. #6
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  7. #7
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    oh my gosh, it DID! i love you!

  8. #8
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    You're welcome. A valid doctype can do some amazing things in IE.

  9. #9
    Join Date
    Dec 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •