Gotta CSS Question...

Discussion in 'CSS' started by KeithLDick, May 11, 2006.

  1. #1
    I forgot all about this forum, I should have asked this along time ago...

    My site is a Blogger site and I wanted to modify the code so I could have a Column on the left and right...

    I found a friend that helped me with the CSS Code and it works the only problem is, if I have *Both the Left and Right* Set like this

    *************************
    #rightcontent {
    position: absolute;
    right:3px;
    top:112px; <-----This is the Problem...
    *************************

    It will be fine in IE but the Left Column will be up into the Site banner and the right side will be in the correct position when Viewing in FireFox or Opera, in IE it is fine...

    If I correct for FF & Opera then IE takes the left column and puts it lower than the right about a Half an Inch...

    I've tried a bunch of times to Strip out everything I could to get it to work and had no luck...

    I'm wondering if it is something on the Blogger Server Side CSS that is causing this???...

    I can live with it for now but it is somewhat of a mystery...(I know I should have a real host for a real site but Financially that is not possible right now but is in the works when I get settled elsewhere and have a real job... :D )


    Any ideas???... Don't rack your brains, like I said I can live with it for now.. Thanks!!!






    **********This is the code that works for FF & Opera...

    #leftcontent {
    position: absolute;
    left:1px;
    top:112px; <------Notice
    width:150px;
    margin-left:4px;
    margin-right:10px;
    voice-family: "\"}\"";
    voice-family: inherit;
    background:#f6f6f6;
    color:#909090;font-size:80%;font-weight:bold;
    }

    #centercontent {
    margin-left: 170px;
    margin-right:170px;


    voice-family: "\"}\"";
    voice-family: inherit;
    margin-left: 170px;
    margin-right:170px;
    background:#f6f6f6;


    }
    html>body #centercontent {
    margin-left: 170px;
    margin-right:170px;
    }


    #rightcontent {
    position: absolute;
    right:3px;
    top:81.5px; <----Notice
    width:150px;
    margin-left:10px;
    margin-right:4px;
    background:#f6f6f6;
    color:#909090;font-size:80%;font-weight:bold;
    }
     
    KeithLDick, May 11, 2006 IP
  2. johneva

    johneva Well-Known Member

    Messages:
    1,480
    Likes Received:
    46
    Best Answers:
    1
    Trophy Points:
    170
    #2
    Adjust it so it works in Firefox.

    Once it woks in firefox ok use either the * or the _ IE hack to put in the value so it works ok in IE too.

    Like so.

    
    #leftcontent {
    position: absolute;
    left:1px;
    top:112px; <------Notice
    _top: 130px   <-----What ever value works for you in IE
    width:150px;
    margin-left:4px;
    margin-right:10px;
    voice-family: "\"}\"";
    voice-family: inherit;
    background:#f6f6f6;
    color:#909090;font-size:80%;font-weight:bold;
    }
    
    Code (markup):
    But using absolute positioning is not the best way of doing the job your doing really this is a much better 3 col layout.

    Holy Grail.
     
    johneva, May 12, 2006 IP
    KeithLDick likes this.
  3. KeithLDick

    KeithLDick Peon

    Messages:
    3,544
    Likes Received:
    206
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks John, I'll try that later... :D
     
    KeithLDick, May 12, 2006 IP