CSS positioning

    Date: 01/30/06 (Web Development)    Keywords: no keywords

    I'm attempting to redo my online portfolio without using tables. I normally use Firefox and everything looks great (for the most part). I check it in IE and three of the divs are off.

    http://www.mhdesigns.ca/temp/ is the test site


    .leftcolumn {
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: dotted;
    border-left-style: dotted;
    border-right-color: #999999;
    border-left-color: #999999;
    padding-right: 20px;
    padding-left: 20px;
    background-color: #FFFFFF;
    height: 100%;
    width: 100px;
    left: 20px;
    top: 0px;
    position: absolute;
    z-index: 2;
    }
    .filler1 {
    background-color: #FFFFFF;
    height: 100%;
    width: 15px;
    left: 160px;
    top: 0px;
    position: absolute;
    z-index: 1;
    }
    .filler2 {
    background-color: #FFFFFF;
    height: 100%;
    width: 15px;
    left: 365px;
    top: 0px;
    position: absolute;
    z-index: 3;
    }
    .filler3 {
    background-color: #FFFFFF;
    height: 100%;
    width: 15px;
    left: 820px;
    top: 0px;
    position: absolute;
    z-index: 3;
    border-right-width: 1px;
    border-right-style: dotted;
    border-right-color: #999999;
    }
    .midcolumn {
    background-color: #FFFFFF;
    padding-right: 20px;
    padding-left: 20px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: dotted;
    border-left-style: dotted;
    border-right-color: #999999;
    border-left-color: #999999;
    position: absolute;
    z-index: 4;
    height: 100%;
    width: 150px;
    left: 175px;
    top: 0px;
    padding-top: 78px;
    }
    .maincolumn {
    background-color: #FFFFFF;
    position: absolute;
    z-index: 5;
    height: 100%;
    width: 400px;
    left: 380px;
    top: 0px;
    padding-top: 78px;
    padding-right: 20px;
    padding-left: 20px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: dotted;
    border-left-style: dotted;
    border-right-color: #999999;
    border-left-color: #999999;
    }

    Also, is there a way to have the white background completely extend to the bottom of the screen? It's currently fine for the first screen but then it gets wonky. Or maybe there's a better way to set up the divs, say maybe one container div with a white background and put the columns inside that? Would that be better?

    Source: http://community.livejournal.com/webdev/288725.html

« Help with FireFox... || a couple of layout... »


antivirus | apache | asp | blogging | browser | bugtracking | cms | crm | css | database | ebay | ecommerce | google | hosting | html | java | jsp | linux | microsoft | mysql | offshore | offshoring | oscommerce | php | postgresql | programming | rss | security | seo | shopping | software | spam | spyware | sql | technology | templates | tracker | virus | web | xml | yahoo | home