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 8 of 8
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post

    ie6: three column layout question

    i'm close to finishing my first re-code of an old table based site into clean, semantically correct xhtml and css. it's been a lot of work but i've learned a lot.

    i have the site working in ie7, ff, safari and opera. i can't seem to get it to work in ie6. this is where my need for help is. the site is a simple, three column layout with header and footer. ie6, for some reason, displays the #center_content below all the others.

    can someone please help?

    centraloregonclimbing.com
    Last edited by faclimber; 02-21-2008 at 06:06 PM.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Move the center content above the right content and float each content column to the left. Be sure to clear your floats.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    faclimber (02-21-2008)

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    when you say "clear all floats" do you literally mean all three columns?

    i'll try swapping #center_content and #right_content and let you know how it works.

    thanks for the fast response.

  • #4
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    i'm bringing this back to the top because i'm still having problem with one small issue in ie6. i've solved the above problem thanks to some help.

    my newest problem, that only happens in ie6, is a small space between the header and the three columns that i can't get rid of. the header is an image and along with that i've given it an <h1> and a text-indent: -5000px.

    is there a way to get rid of this space? if i use display: none it solves the problem but i've always thought you weren't supposed to do that.

    thanks.

    centraloregonclimbing.com
    Last edited by faclimber; 02-26-2008 at 06:55 PM.

  • #5
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    try this

    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    #header {
    	height: 97px;
    	width: 800px;
    	margin: -5px;
    }
    </style>
    <![endif]-->
    let me know if that worked

  • Users who have thanked jcdevelopment for this post:

    faclimber (02-26-2008)

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    50
    Thanks
    11
    Thanked 1 Time in 1 Post
    i was unable to get it to work with:
    Code:
    <!--[if lte IE 6]>
    <style type="text/css">
    #header {
    	height: 97px;
    	width: 800px;
    	margin: -5px;
    }
    </style>
    <![endif]-->
    but i did get it to work by adding: _margin: -7px;

    is one 'hack' better than the other? for the container div i had i had to use, width: 800px; and _width: 825px in order for it to work with ie6.

    does your code need to be in it's own style sheet? when i tried it, i copy and pasted into my external style sheet and it didn't work right. all browsers were reading the code instead of just ie6.

    thanks.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Yes, why would it process SGML comments in CSS? It's supposed to go straight into your HTML, hence the style element.

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Take care with "_" hacks. If you are using FF and have Firebug installed, take a look at your CSS file - especially at the next statement after the hack. It might not be there.

    What I did to get around this is to add a dummy CSS class after the hack:

    a {_stuff and such}
    .dummy {/* doesn't nothing but fix the ie hack */}
    p {other stuff}
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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