SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firebird bug or issues with CSS or Java Script? You decide :D

    In Firebird (if you have it) take a look at the following two pages::


    http://www.vitaminshoppeonline.com/
    http://www.vitaminshoppeonline.com/b...utrition.shtml

    Then, if you have time, look at the same two pages in latsest versions of IE and Opera.

    The problem is:

    As you can see, in pages with relatively small amounts of content, like http://www.vitamin-shoppe-online.com...utrition.shtml, for example, (or any of the page links beneath the main site logo at the top of any page at http://www.vitaminshoppeonline.com/) the footer gets pushed WAY down the page, like nearly 1400 pixels, at least in my latest build of FB .7 which I got from the nightly build page.

    In Opera and IE this does not happen.

    I am wondering if this is a bug in FB, a bug in the jar file, a bug in the script? Or, is this a style issue that can be easily fixed.

    Would love some input.

    Tim

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tim!

    I'm having puter problems and don't have access to all my resources right now, but I'll try to look at it as soon as I can.

  3. #3
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just a quick thought...

    MM_reloadPage() may conflict with your own resize listener (adjustLayout).

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've got Firebird 0.6.1 on Win2K.

    I notice that the footer is properly positioned after I resize the window - this clue should help us.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just thinkin out loud...

    This is probably the same issue we always run into when using js to modify layout. I'm guessing, but the 'incorrect' position of the footer is possibly the 'correct' position before the elements are floated left.

    It's possible that you need "overflow:hidden" css on the elements that get their heights adjusted.

    It's also possible that those elements need to have "position:relative" css.

    But try each of these things separately - not all at once.

  6. #6
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike thank you for these suggestions. I will try these out one at a time,

    But thank you for all of your input!!!



    tim

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welcome, Tim.

  8. #8
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Rats, nothin doin. I tried each and every one of your suggestions, and nothing worked . SHOOT!

    Grrrrrr



    TMan

  9. #9
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Mike are YOU the guy who runs cross-browser.com???

    Man it is SUCH an honor!

    I LOVE your web site. You just blew me out of the water with the DHTML you have governing it. You are so dang talented (AND busy). So I am REALLY pleased that you even took the time to try and help.

    You are THE man!!

    I love DHTML

    I played with it myself for some time at www.iron-bound.com

    When you go to index2.php, there is a nice menu across the top running left to right and there is a Fitness Section when you can test some fairly cool DHTML in the fitness programs section

    This site was a bust financially, but it was fun to build.

    But I digress.........


    So I take it that you have seen this issue before??
    It sure is a puzzler, thats for sure.

    I have not had sleep for 48 hours because of this dang footer issue.

    I am getting seepy!!


  10. #10
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hmmmmmm

    Quote Originally Posted by MikeFoster
    just thinkin out loud...

    This is probably the same issue we always run into when using js to modify layout. I'm guessing, but the 'incorrect' position of the footer is possibly the 'correct' position before the elements are floated left.

    It's possible that you need "overflow:hidden" css on the elements that get their heights adjusted.

    It's also possible that those elements need to have "position:relative" css.

    But try each of these things separately - not all at once.

    Mike, I took the liberty of testing one of your theories, i.e., about the footer displacement being the actual correct placement before the script floats it left.

    I removed all script from the code and loaded one of the small pages on a clan cache and the footer appeared nice and neat underneath the columns, which suggests that there is something about the script itself that is not working on pages with so little content in the contentcontent div tag.

    I tried the pages with the netscape resize script removed and that did not fix the issue. The footed still loaded 1400 pixels down the page.

    Now, remember, this only happens in firebird, not in IE or Opera. I do not have Mozilla, so I am not sure about that one.

    My guess is that for some reason the scripts will not float the footer left unless that page is resized. Strange.

    It does seem to work on the other pages with more content. I just do not understand.

    Anyway, I hope this gives you something to go on.

    Tim

  11. #11
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Tim,

    Mike are YOU the guy who runs cross-browser.com???

    Man it is SUCH an honor!
    Thanks very much, Tim. I'm really glad you like my work and are using it. People like you make it all worthwhile.

    I'll have another look at your site later tonight.

  12. #12
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your welcome Mike.

    My guess is that it is in the JS file some where. I know that sounds daunting, but we have determined that if we remove both the JS file line and teh script line that the page loads correctly and validates, so it must be in the JS file?? I dunno You are the expert. I hopeyou are able to find something

    Thanks

    Tim

  13. #13
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    More Clues::

    Quote Originally Posted by MikeFoster
    Hi Tim,


    Thanks very much, Tim. I'm really glad you like my work and are using it. People like you make it all worthwhile.

    I'll have another look at your site later tonight.
    Mike look at http://vitamin-shoppe-online.com/Thursday.shtml in Firebird first, and then Opera.

    Now, have a look at these two screen shots from Firebird.

    Before the resize::


    http://vitaminshoppeonline.com/image...k_b_resize.jpg

    After the resize::

    http://vitaminshoppeonline.com/image...k_A_resize.jpg

    There are 3 interesting points to make here.

    One, Opera displays the above page just like Firebird does in the second screen shot. In other words, Opera does not need to be resized like Firebird does, as it initially loads the page "correct" the first time. It does not need to be resized because the middle column and image do not overlap into the footer like it seems to do in Firebird.

    Two, and more impotantly, even after the resize fix, the script is not doing what it should be doing because in theory, the two gray columns should be flush with the bottom of the Digest A Meal image (the middle column). In other words, the longer of the three columns (which in this case is the contentcontent column - or the middle column that contains the primary text and images) should drive the height of the other two columns (left and right). Instead, the middle column extends beyond the 2 grey columns by about an inch, yet it does not "force" the two grey columns to adjust along with it.

    Three, IE displays the page almost like it should with the exception of the fact the on my machine, the RIGHT grey floating column was initially about 15 pixels shorter than the left column. The left and middle columns lined up nicely. A quick resize of the page forced the rightcolumn to adjust accordingly.

    It seems to me that somehow the script is not able to make all the columns the same height without a resize of the page. This would initially lead me to believe that the NS resize fix that resides on all of my pages was causing a conflict (as you suggested earlier yesterday) but, I have removed my NS resize fix from several pages in an effort to fix this "conflict" and it does not work, hence it must not exist in the first place. Even without the NS resize fix, there are overlapping issues and blocks tend to cross over into one another, creating havoc until the page is resized.

    One last comment::

    It seems to me that of all 3 browsers, IE comes the closest to getting it right. This is good for us as designers because currently 95% of the browser market is IE. However, I think Firebird will become very popular soon. As fate would have it, Opera and Firebird are very strict when it comes to CSS and while they are less forgiving of CSS violations than IE is, they are useful in that they force us to look more closely at our code.

    The fact that IE has few problems with my code is merely an indication that it may be ignoring a boo-boo in my coding somehow. Although prior to adding the x.js element (and changing my stylesheet to accomodate the x.js element) I had no issues whatsoever with the pages displaying in any of the three browsers I use.

    That Opera and Firebird pick up on some flaw and display the pages similarly suggests to me that either I have goofed up somehow in the CSS sheet (although the pages do validate and so does the style sheet - with or without the x.js elements) or somehow there is something in that x.js script that is not quite right.

    Anyway, from your standpoint finding such an error (if indeed it is in your script to begin with) may prove to be too time consuming. On the other hand, since Micro***t seems to have decided not to develop IE any further, Opera and Firebird stand to soon become the browsers of choice for people. So, if there is a problem in that x.js code (again, this is hardly a forgone conclusion...just a slight possibility...I am NOT a coder, so I am out of my element here), then all of the sudden, cross browser compatibility becomes even more of an issue. Do you think the issue could be in the x.js coding?

    Just some thoughts

    Tim

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've got many posts to reply to this morning, so I'll have to be quick...

    In Firebird, when the middle column's height is changed, it pushes the footer (which has 'position:static') down by the same amount. This is not a problem with the script - this is just the way Firebird render this. X doesn't do anything you don't tell it to do - and the only thing you're telling it to do is to change the heights of 3 elements. I've noticed subtle problems like this when scripting floated elements.

    I downloaded it and got it to work. I've commented all my changes with "mf". Here's all the changes I made:

    1) In new_layout.css:
    Code:
    #footer {
    height: 50px;
    /* visibility: hidden; mf */
    padding: 10px 10px 10px 10px;
    margin-top: 20px;
    }
    #leftcontent, #rightcontent, #contentcontent {  /* mf */
      position:relative; overflow:hidden;
    }
    #content {
    position:relative; overflow:hidden; /* mf */
    background-color: #ffffff;
    margin: 0;
    margin-left: 23%;
    margin-right: 23%;
    }
    #left, #right {
    position:relative; overflow:hidden; /* mf */
    background-color: #eeeeee;
    width: 20%;
    }
    2) In the script in the html page I removed the MM reload code (it's redundant) and made the following changes:
    Code:
    <script type="text/javascript">
    document.write("<" + "style>#footer{position:absolute;}<" + "/style>");
    function adjustLayout(init)
    {
      if (!init && xNN4) { // mf
        location.reload();
        return;
      }
    
      // Get natural heights
      var cHeight = xHeight("contentcontent");
      var lHeight = xHeight("leftcontent");
      var rHeight = xHeight("rightcontent");
    
      // Find the maximum height
      var maxHeight = Math.max(cHeight, Math.max(lHeight, rHeight));
    
      // Assign maximum height to all columns
      xHeight("content", maxHeight);
      xHeight("left", maxHeight);
      xHeight("right", maxHeight);
    
      // Position the footer
      xMoveTo("footer", 0, xPageY("left") + maxHeight); // mf
    }
    
    window.onload = function()
    {
      xAddEventListener(window, "resize", adjustLayout, false);
      adjustLayout(1); // mf
    }
    </script>

  15. #15
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wow.......you will never guess what happened on the way to the Opera!

    This has been just about the most frustrating, yet fascinating learning experience I have ever had.

    I fixed it, the whole site, by just changing a couple lines of code. Isn't that usually the way.

    Basically, there was one thing I was certain of: before I decided that equal column heights mattered so much, the site had no problems. It was based in large part on the Dreamweaver MX 2004 template (a great program by the way). And in that "template" state, it pretty much worked.

    Then, as fate would have it, I accidentally stumbled across your scripts in a Kevin Yank article that referenced the scripts found at your cross-browser.com. As you know, the article explained how these scripts forced column heights. After I learned you could force equal column heights, I became dissatisfied with Dreamweavers notion of what a multi-columns, CSS controlled layout should look like. I did not like the look of my page when the middle content section far exceeded the height of the left and right columns. That is when I became rather anal about it all. I made the several changes necessary in an effort to get the look I wanted:

    1) I incorporated the x.js file in Kevins tutorial and the scripts that accompanied it. The scripts, combined with the x.js file, forced the height adjustments I was looking for.

    2) Then, I had to reorganize the div id tags in my documents, give them new names, nest some div id tags within parent div id tags, etc etc.

    3) Then, I changed the original external css sheet to reflect those additional classes, name changes and parameter tweaks (such as the addition of margins, paddings etc).

    That is when I began to have the problems with the footer, overall cross-browser chaos and so forth, which you have tried valiantly to help me fix. Moreover, I didn't realize until this morning that IE was also having problems of its own that had gone unnoticed up to this point. And you KNOW if IE doesn't display a page well, there is something hugely rotten in Denmark (by the way, your latest solution did not work either ).

    So, entirely frustrated I decided to switch back to my original format, sans your x.js file, scripts and my CSS modifications. Lucky for me I backed up that entire directory just in case I wanted to revert back. Whew!!!

    But than a thought hit me. What if I took your column scripts, altered THEM to reflect the names of the Div ID tags I had in MY original CSS format, and applied your x.js file to MY original site structure? Remember, that original format worked, even though the columns heights were a big problem and unsightly, the pages laid out nicely and there were no issues with overlapping blocks, etc.

    Well, guess what, it worked!!!

    I had to tweak the .content, .feature and .story classes in my style sheet, but look at the result!

    I doubt you will see any glitches. I have tested it in Opera, Firebird, IE and in 2 resolutions: 800x600, which I don't like, and 1024x768, which is my pride and joy, and they both work!

    As an aside, I was tempted to try the format of a tutorial e-mailed to me by another great Bard of the Code like yourself, Herbert Peters. Great guy. The example can be seen at http://www.redmelon.net/tstme/3cols2/noborder.htm , but frankly, it was too contrived for my liking. The code for it, especially the CSS, was simply a hodge podge of flotsam and hacks that worked, but it was far from being easy to tweak and customize without ruining the entire structure of the page. So, it was either this way or no way.

    Go to http://vitaminshoppeonline.com and try some of those links underneath the big logo. Also, try "About Us", About Our Products" "Contact Us"

    I think you will agree it looks nicer. If it makes any money, then all of this hair pulling and jumping about would have been worth it

    I really appreciate all you did to try to help me !!

    As you see, this was a tough cookie to bite into.

    Tim

  16. #16
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's great, Tim! I've learned alot from this also

    Good luck with the site. I hope you do well with it.

  17. #17
    SitePoint Enthusiast vso's Avatar
    Join Date
    Oct 2003
    Location
    VA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, you have learned that some of us out here are total ijuts!

    Hehehehe

    Well, I love the way YOUR solution makes my site look. I am glad I stuck it out.

    By the way, I am looking to trade some links off my blog. Would you like me to link to your site?? You do not have to link to me if you don't want to. But I love your site and your scripts are really helpful to people! Maybe I can get traffic to your site!

  18. #18
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    Quote Originally Posted by vso
    By the way, I am looking to trade some links off my blog. Would you like me to link to your site??
    Sure, that'd be great, Tim. On the Projects page of my site I have a list of people using my libraries. I'd be glad to list you there and it'd be an honor to be mentioned on your site. (if you want, pm me some links to your blog and any sites using X)

    BTW, looking over some of your posts reminds me of something that you hit right on - always start with a good css layout first, then add javascript. Not only does it make your js more robust, but if the user has js disabled then they'll get a nice css layout. cool

    Thanks!


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
  •