Web Analytics Made Easy -
StatCounter IE 6 Problems With 3 column Layout & Transparency Issues - CodingForum

Announcement

Collapse
No announcement yet.

IE 6 Problems With 3 column Layout & Transparency Issues

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • IE 6 Problems With 3 column Layout & Transparency Issues

    Okay... so I got rid of some odd alignment problems in IE 6 & 7 by rewriting my index page with the 3 column layout. IE 7 is perfect now! Thanks.

    My current problems now only reside in IE 6. For some reason, the middle column of my page displays half a page below the left and right columns.

    The only other problem is that IE appears to have absolutely no concept of displaying my png images with their native transparency. Are there any solutions for this, it makes my site look like crap and 50% of the visitors are still using IE 6 for whatever reason.

    The site can be found @ www.teamleaf.org

    Thanks in advance for all your help!

  • #2
    Okay... so I got rid of some odd alignment problems in IE 6 & 7 by rewriting my index page with the 3 column layout. IE 7 is perfect now! Thanks.

    My current problems now only reside in IE 6. For some reason, the middle column of my page displays half a page below the left and right columns.
    It might be due to the unnecessary modifications made to your layout (from the original http://www.bonrouge.com/3c-hf-fluid.php)

    You are dragging the box model bug of IE into your layout by setting a width to your middle column(#main and #content), which is not required.
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Originally posted by abduraooft View Post
      It might be due to the unnecessary modifications made to your layout (from the original http://www.bonrouge.com/3c-hf-fluid.php)

      You are dragging the box model bug of IE into your layout by setting a width to your middle column(#main and #content), which is not required.
      So... I put the width on those as a centering hack. The left 50% hack... How could I rewrite that to achieve that same effect without bringing in the box model bug?

      Comment


      • #4
        Setting a style of width:500px;margin:0 auto; on your inner most div having background-image:url(images/Leaf.png); would center it. No need to apply specific widths on your #content and #main.
        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

        Comment


        • #5
          Originally posted by abduraooft View Post
          Setting a style of width:500px;margin:0 auto; on your inner most div having background-image:url(images/Leaf.png); would center it. No need to apply specific widths on your #content and #main.
          Yeah... okay I fixed that in the meantime. What about the transparency issue?

          Any suggestions for that?

          Should I just make that leaf and all the links in one image and then just link the areas?

          Comment


          • #6
            Should I just make that leaf and all the links in one image and then just link the areas?
            Yeah, that would speed up the page load by reducing the number of http requests (and decrease the effective page size too)

            I'd also recommend you to remove all inline styles from all your tags.
            Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

            Comment


            • #7
              Originally posted by abduraooft View Post
              Yeah, that would speed up the page load by reducing the number of http requests (and decrease the effective page size too)

              I'd also recommend you to remove all inline styles from all your tags.
              All the inline styles have different attributes though... how would I go about removing them?

              I fixed the other things right after my other posts, before I even check back here for your responses... but I can't do the same for this one. Its outside my knowledge at this point.

              Thanks again!

              Comment


              • #8
                All the inline styles have different attributes though... how would I go about removing them?
                I'd do it like
                Code:
                #nav{
                background:url(leaf.png) no-repeat top left;
                }
                #nav li{
                line-height:30px;
                }
                #nav li a{
                display:block;
                text-indent:-999px;
                }
                li.goals{
                background:url(Goal.png) no-repeat top left;
                }
                .............
                Code:
                <ul id="nav">
                 <li class="goals"><a href="aqua/goal.html">Our Goal</a> </li>
                 <li class="downloads"><a href="aqua/downloads.html">Downloads</a> </li>
                ..........
                </ul>
                ( ie make your markup semantic )
                Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

                Comment


                • #9
                  Ok... I started on that... and it doesn't seem to work quite the way I want...

                  http://www.teamleaf.org/indextest.html

                  Comment


                  • #10
                    Bumpity Bump... I guess no one is here on the weekends?

                    Comment

                    Working...
                    X