Date: 01/30/06 (WebDesign)    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/webdesign/1052760.html