Positioning good in Firefox, but not working in IE

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Lollygag
    New Member
    • May 2007
    • 2

    Positioning good in Firefox, but not working in IE

    Hi folks.

    Please try not to laugh at my web design noobness, I'm a photoshop monkey, but I thought I'd have a go at updating this website to learn css & html, it's far more complex than I'd anticipated.

    I've managed to cobble this much together, the css even validates:

    http://www.accesscomms .com.au/Newsite2/

    It displays nicely in Firefox but gives IE7 (and presumably IE6 & below) serious indigestion, it seems hellbent on positioning the first round cornered box on the line below the vertical menu, rather than next to it.

    I think the problem must be in one of the following code excerpts somewhere, but I've no idea where :(

    I've cut out all the bits I thought weren't relevant to this issue - I really am the n00biest of all n00bs, if I need to add more info for anyone to help, please let me know & I will.


    The CSS

    body {
    background: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    color: #53565D;
    font-size: 11pt;
    }

    #content {
    width: 734px;
    margin: 35px 0 auto;
    }


    /*Vertical Menu */


    #VertMenu p {
    margin:0 0px;
    }

    #VertMenu {
    background: transparent;
    float: left;
    width: 150px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0 auto;
    }

    /*Rounded Corner boxes*/

    .roundcont {
    margin: 0px 155px;
    width: 579px;
    background-color: #f0f0f0;
    color: #53565d;
    }


    .roundcont p {
    margin: 0 10px;
    text-align: justify;
    padding: 10px 0px 10px 10px;
    font-size: 11pt;
    }


    .roundtop {
    background: url(Borders/tr2.gif) no-repeat top right;
    }


    .roundbottom {
    background: url(Borders/br1.gif) no-repeat top right;
    }

    img.corner {
    width: 15px;
    height: 15px;
    border: none;
    display: block !important;
    }

    Can anyone see the issue here?
    Any help or advice on bashing this into shape in IE would be very very much appreciated.
  • Lollygag
    New Member
    • May 2007
    • 2

    #2
    ZOMG

    I figured it out!!!!!!

    In CSS I added absolute position to the vert menu css:

    #VertMenu {
    position:absolu te;
    margin: 0 0px;
    background: transparent;
    float: left;
    width: 150px;
    padding: 0px 0px 0px 0px;
    }


    Then added the <div id="content">

    to above the <div class="roundcon t"> as well as above the<div id="VertMenu">

    I'm too n00b clueless to know why it works, but it does.

    :D :D :D

    Comment

    Working...