Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 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
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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?

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote 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!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    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 )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ok... I started on that... and it doesn't seem to work quite the way I want...

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

  • #10
    New Coder
    Join Date
    Mar 2009
    Posts
    38
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Bumpity Bump... I guess no one is here on the weekends?


  •  

    Posting Permissions

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