hi all,
i have a strange problem when trying to set up a horizontal menubar:
i would like to split the whole screen from left to right into 9
pieces. the first one has a fixed width of 186px. the remaining 8
should all have the same width, depending on the screen resolution.
how can i get this to work in both IE and mozilla? i already have a
solution that works fine in mozilla, but does not in IE.
is this possible by using a table? i am currently trying to solve this
with DIVs. the problem seems to be that menubar hasn't got a width
(which is well handled by mozilla, but not by IE).
so, the menubar should start at 186px from left and then should have 8
sections all with the same width, which should fill the screen to the
very right, not caring about screen resolution.
***** HTML CODE ****
<div id="menubar">
<div id="leftframe"></div>
<div id="leftframe2"></div>
<div id="leftframe3"></div>
<div id="leftframe4"></div>
<div id="leftframe5"></div>
<div id="leftframe6"></div>
<div id="leftframe7"></div>
<div id="leftframe8"></div>
</div>
***** CSS CODE ****
#menubar
{
position: absolute;
top: 0;
left: 186px;
right: 0;
height: 30px;
z-index: 1;
background-color: #FBAE5C;
}
#leftframe
{
position: absolute;
top: 0px;
left: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #FBAE5C;
color: #F7941D;
text-align: left;
vertical-align: middle;
}
#leftframe2
{
position: absolute;
top: 0px;
left: 12.5%;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #F7941D;
text-align: left;
vertical-align: middle;
}
#leftframe3
{
position: absolute;
top: 0px;
left: 25%;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #C2BE75;
color: #AAA003;
text-align: left;
vertical-align: middle;
}
#leftframe4
{
position: absolute;
top: 0px;
left: 37.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #AAA003;
text-align: left;
vertical-align: middle;
}
#leftframe5
{
position: absolute;
top: 0px;
left: 50%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #8ACCCA;
text-align: left;
vertical-align: middle;
}
#leftframe6
{
position: absolute;
top: 0px;
left: 62.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #40B9E8;
text-align: left;
vertical-align: middle;
}
#leftframe7
{
position: absolute;
top: 0px;
left: 75%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #F69AC1;
color: #E66BA4;
text-align: left;
vertical-align: middle;
}
#leftframe8
{
position: absolute;
top: 0px;
left: 87.5%;
margin: 0px;
padding: 0px;
width: 12.5%;
height: 100%;
z-index: 2;
background-color: #E66BA4;
color: #F69AC1;
text-align: left;
vertical-align: middle;
}
any help is appreciated!
mark