3 Replies Latest reply on May 11, 2010 7:17 AM by Thumbslinger

    CSS/jQuery Framwork: the best of both worlds..

    Thumbslinger Level 1

      Well, today I decided to play with creating a CSS framework using JQuery in an effort to avoid, from the beginning, having to compensate for any of the various bugs in IE that happen when using either Absolute or floats in positioning.

       

      As I am working for a large corporation, we have to cater to IE 6, 7 and fringe 8 as well as Safari and Firefox both on the Mac and Windows.

       

      So far, I have tested successfully on both platforms and in all those major browsers and I've put together the best of Absolute positioning (precise placement by coordiates) and floated elements, which allow for document flow to expand as needed and yet maintain the placement of absolutely placed divs.

       

      No actual positioning is given in the css or jquery. The utility .position in jquery references other elements/divs/etc on the page as a base without resorting to using 'relative' on any element.

       

      The idea is this:

      A wrapper contains any 'absolutely' positioned divs. Those divs are placed in relation to that wrapper's top left corner using jquery. In the document flow, that wrapper appears after, say, a few paragraphs and is followed by say, more paragraphs/content. Since no "relative" declaration is used on the wrapper and no 'absolute' on the children, should any new content be added before that wrapper div (which doesn't have relative declared) the wrapper will move down accordingly taking with it the 'absolutely' positioned divs inside.

       

      Now, the trick to making this work was using one line of jquery to dynamically find the height of the largest/tallest div within the wrapper div and then dynamically set the height of the wrapper div to that number. The wrapper div could have some bottom padding or better yet, the last element within one of the 'absolutely' placed div could have a class that added some bottom margin should space be needed.

       

      So, once you have it set up, more content can be added and the expansion will happen based on content. This means no dealing with double-margin bugs, peek-a-boo bugs, 3 pixel jogs etc, etc. And, no conditionals need be used nor underscore hacks and the like to make things work in IE 6.

       

      I'll post some files as an example once the attachment option is back on.

       

      Just wanted to share this experiment and idea. I'll be posting it elsewhere but will return here once functionality of the attachment is back up.

        • 1. Re: CSS/jQuery Framwork: the best of both worlds..
          mari8899 Level 1

          Dude seriously, forget IE 6 and possibly even IE 7, i strongly recommend you avoid trouble with these. IE 9 is comming soon IE 6 is history, with IE9  IE7 will also be history. Don't trouble yourself with oldest browsers.

          • 2. Re: CSS/jQuery Framwork: the best of both worlds..
            bemdesign Level 4

            @mari8899 - in certain corporate and public environments, IE 6 is still needed to access key business software and web applications that were originally created when IE 6 was 1) a business standard 2) The most standards compliant browser of its time. Those days are long gone, but businesses and public sector organizations (like your local governemnt) are loath to spnd money upgrading these old web applications and software. Eventually though, the cost of maintenance and security will change the business equation and they'll upgrade. Until then, IE 6 still has a small, dwindling nich that some web designers and developers will have to cater for.

            • 3. Re: CSS/jQuery Framwork: the best of both worlds..
              Thumbslinger Level 1

              As BemDesign pointed out, the corporate (read bigger) world of commerce and finance depends on so many different variables than a small mom and pops shop or even a mid-size company like any given record label deal with that developer skills need to be fully encompassing... not just knowing the latest tricks and thinking that anybody using the net is using (at the moment) the latest Safari, specifically on the Mac.

               

              I'm really glad I had to delve out of the ad world of cool motion graphics and niche sites to a more global market because as other companies grow, they are relying on markets, not technology, to boom their business. That being understood, it's about knowing a target audience and how to reach them no matter how old/out dated their tech may be.

               

              However, I will relish the day when HTML emails have gone by-by and browsers automatically update themselves (let all the privacy and security gripes cease.. don't put information you don't want shared on the net)

               

              So, I hear ya about losing that 8.3% of IE6... but let's go for broke and say forget IE altogether and choose Firefox or Safari.