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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning not the same in ff and ie

    chrise007


    newbie


    Posts: 1
    Joined: 2007-07-16
    Posted: Mon, 2007-07-16 10:31

    Hi All

    I am new to CSS and am trying to style a page with 3 columns. The left column will always have an image, the middle content will have the main content and the right column will have extra info and links etc.

    My problem is that in ie it all aligns up correctly, but when i preview in ff the middle content drops down to under the left column. I havent positioned the middle content absolutely because i have a footer that at the moment expands down the page as the content expands. If i absolutely position the middle content the footer no longer looks right.

    I hope this makes sense and that someone is able to help! The code is below:

    CSS CODE:
    body{
    width: 100%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #2a558e;
    font-size: 0.7em;
    line-height: 1.3em;
    text-align:left;
    }
    html, body {
    margin: 0;
    padding: 0;
    }
    div {border: none;}

    /* LAYOUT DIVS */
    #header {
    margin-left: 0px;
    background-image:url(../images/top_bar_mini.jpg);
    background-repeat:no-repeat;height: 200px;
    }

    #leftcol {
    float: left;
    width: 150px;
    margin-left: 2px;
    margin-top: 0px;
    margin-right: 3px;
    padding: 10px;
    }

    #rightcol {
    position: absolute;
    margin-left: 560px;
    top: 215px;
    width: 180px;
    padding-left: 20px;
    padding-right: 10px;
    padding-top: 10px;
    border-left:1px dotted #51aac2;
    }

    #leftcol p, #leftcol li, #rightcol p {
    font-size: 100%;
    }

    #content {
    padding: 10px;width: 390px;
    }

    #footer {
    clear: both;
    width: 760px;
    margin: 10px;
    text-align: center;
    font-family: Verdana;
    font-size: 80%;
    padding: 3px;
    border-top: 1px solid #51aac2;color: #000;
    }

    #breadcrumb1{
    position:absolute;
    top: 181px;
    left: 0px;
    z-index:-1;
    text-align:left;
    width:760px;
    background-color: #ffde00;
    font-size: 90%;
    padding: 5px;
    }
    .breadcrumb1{color: #000000;}

    HTML CODE:
    <body>
    <div id="header"></div>
    <div id="breadcrumb1" class="breadcrumb1"> Home > Company Info > Our Customers <img src="../images/spacer.gif" width="400" height="1">Print this page&nbsp;<img src="../images/printer_icon_yellow.gif" width="19" height="19" align="absmiddle"></div><div>&nbsp;</div>
    <div id="leftcol"><img src="../images/inner_pic_yellow.jpg" width="130"></div>
    <div id="content"><img src="../images/inner_title_who_we_are.jpg" width="370" height="30">
    <p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
    <img src="../images/inner_title_why_are_we_different.jpg" width="370" height="30">
    <p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
    <p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
    <p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret.</p>
    </div>
    <div id="rightcol"><img src="../images/inner_key_high_yellow.jpg" width="180" height="30">
    <p>Lorem ipsum qui ad oblique antiopam sapientem, ne qui amet sonet pertinax, ex duo option pericula. Doming mollis cu vix, te has ubique prompta nominavi. Ius id viderer virtute abhorreant, ne corpora contentiones sed. Sea atomorum sadipscing ne, an cum zzril elaboraret. Ex delicata moderatius pro. His quot voluptua antiopam an, et nec mazim graeco, abhorreant efficiendi quaerendum qui an.</p></div>
    <div>&nbsp;</div><div>&nbsp;</div>
    <div id="footer" class="footer"><br><a href="#">Site Map</a> | <a href="#">Copyright Info</a> | <a href="#">Terms and Conditions</a> | <a href="#">Privacy Policy</a> | <a href="#">Accessibility</a></div></div></body>

    Can anyone help at all?? Much appreciated...

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by chrise007 View Post
    Can anyone help at all?? Much appreciated...
    Remember that we don't have your images. We need a live link to the page in order to tell what the problem is.

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi

    Thanks for the reply but i have actually managed to sort the problem!!

    Regards

  • #4
    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
    Quote Originally Posted by chrise007 View Post
    Hi

    Thanks for the reply but i have actually managed to sort the problem!!

    Regards
    What was the solution?
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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