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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    three column help

    good morning,
    I am having a problem with the center column dropping down on the page below in IE. It is fine in FF.
    http://mwebm.net/rfol/index-4.htm
    I'd like to add some padding to the left hand side of the center and right hand columns but this is proving to be difficult to do as well.
    thanks for your help

  • #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
    There are better ways to handle the IE 3px jog.
    Code:
    /* mac hide and combat ie's 3 pixel jog \*/
    * html #center{margin-left:0;margin-right:0;height:1%}
    /* end hide*/
    #left-nav {
    margin-right:-3px;
    }
    #right {
    margin-left:-3px;
    }
    And why do you even have a #middle div? It seems to not server any purpose.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Apr 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi,
    thanks for getting back to me.
    I put in the code you suggested, and the navigation bar got all screwy popping out. Then I took out the
    #left-nav {
    margin-right:-3px;
    }
    #right {
    margin-left:-3px;
    }
    and kept the
    #left-nav {
    margin-right:-118px;
    }
    #right {
    margin-left:-118px;
    }
    that seems to have made it work.
    I just love it.
    on a related matter, I'd like to have the right hand column be wider. I've tried adjusting the right width but the center content then flows into the right hand column.
    any thoughts?
    thanks so much

  • #4
    New Coder
    Join Date
    Apr 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi again,
    I think I got the right hand width figured out by changing the bolded text below from the lesser widths that I had previously. ( I know I tried changing those before but the previous fix must from here must have made the difference. Thanks again.)
    #right {
    margin-right:-118px;/* must be 1 pixel less than width*/
    float:right;
    width:160px;/* must be same as right margin on #middle*/
    position:relative;
    right:-2px;/* line up */
    display:inline;/* ie fix*/
    border-left: 2px gray solid;
    padding-left: 12px;
    }
    * html #left{margin-right:-3px;}/* 3 pixel jog*/
    * html #right{margin-left:-3px;}/* 3 pixel jog*/
    #middle {
    margin-left:119px;
    margin-right:160px;
    }

  • #5
    New Coder
    Join Date
    Apr 2006
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    how embarrassing!
    I was looking at the page again (http://mwebm.net/rfol/index-4.htm) and wanted to view it at 800x600. It seems the more I shrink the window, the worse the overflow is from the bottom of the center column into the far right column. With the width values at 119px it displays the way I’d like it to, but is just too skinny. This is a problem only in FF. IE works.
    #right {
    margin-right:-118px;/* must be 1 pixel less than width*/
    float:right;
    width:160px; /*a value of 119px works*/
    position:relative;
    right:-2px;/* line up */
    display:inline;/* ie fix*/
    border-left: 2px gray solid;
    padding-left: 12px;
    }
    * html #left{margin-right:-3px;}/* 3 pixel jog*/
    * html #right{margin-left:-3px;}/* 3 pixel jog*/
    #middle {
    margin-left:119px;
    margin-right:160px;/* a value of 119px works*/
    }
    hopefully this is clear enough to understand
    So I need more help please
    thank you


  •  

    Posting Permissions

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