January 14, 2005 | Category: Web

Talk about CSS pain. Just completed fixing CSS bugs for this template. Worked fine in most browswers but check this, they were bugs in FireFox >_< . Solution in the end was to have div wraps around the content and the menu. By not making the content float the green box around the entire site stretches all the way down. The next problem is to get the menu in the intended place. The way to do this is to use a wrap for the menu, called menuouter in my work and position:absolute; then using the top: and left: tags in css slowly move the baby up in place.

#menuouter {
top:0px;
left:0px;
position:absolute;
width:155px;
height:30px;
background-color:#FFCC00;
}

Since you can’t see where the menu wrap div actually is best thing to do is to give the menu wrap a width and height then tile a background image or give it a backgroung colour then position the div up. Then once its in the right place correct the width, finally moving the div tag behind the tag of the menu.

Viola! much pain. Nearly made me open flash. Luckily sanity prevailed.