Witam,
mam problem. div#toolbar_header oraz div#tools_header zachowują się tak, jakby były umieszczone w div#list_content (scrollbar obejmuje całą stronę pomimo tego, że przewijać jest co tylko w div#list_content). Gdy wyrzucę !DOCTYPE, problem znika. Ale nie mogę wyrzucać !DOCTYPE. Zaznaczam, że strona jest pisana tylko i wyłącznie pod IE.
Czy mógłby ktoś mi powiedzieć, co tu robię nie tak?
@edit
Doszedłem do źródła problemu. Problemem jest obecność height: 100%; dla div#list_content. Jednak nie mam pomysłu, jak zastąpić 100% tak, aby ten div miał 100% wysokości (chciałbym uniknąć korzystania z tabeli :/).
mam problem. div#toolbar_header oraz div#tools_header zachowują się tak, jakby były umieszczone w div#list_content (scrollbar obejmuje całą stronę pomimo tego, że przewijać jest co tylko w div#list_content). Gdy wyrzucę !DOCTYPE, problem znika. Ale nie mogę wyrzucać !DOCTYPE. Zaznaczam, że strona jest pisana tylko i wyłącznie pod IE.
Czy mógłby ktoś mi powiedzieć, co tu robię nie tak?
Kod:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html {
overflow: auto;
scrollbar-base-color: #21283e;
scrollbar-arrow-color: gold;
scrollbar-track-color: #495068;
scrollbar-3dlight-color: #9499ad;
scrollbar-highlight-color: #21283e;
scrollbar-darkshadow-color: #21283e;
scrollbar-shadow-color: #21283e;
}
body {
cursor: default;
margin: 0px;
border: 0px;
padding: 68px 0px 48px 0px;
background-color: #21283e;
background-image: url(back.png);
background-repeat: repeat-x repeat-y;
}
img {
position: relative;
z-index: 1;
}
#toolbar_header{
position: fixed;
z-index: 2;
top: 0px;
right: 0px;
left: 0px;
width: 100%;
height: auto;
}
#list_content {
overflow: auto;
width: 100%;
height: 100%;
}
#tools_header{
border-top: 1px solid #9499ad;
position: fixed;
z-index: 2;
right: 0px;
bottom: 0px;
left: 0px;
width: 100%;
height: auto;
filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#11131d', startColorstr='#495068', gradientType='0');
}
a:link, a:active, a:visited {
color: #ffd600;
text-decoration: none;
}
a:hover {
color: orange;
text-decoration: underline;
}
.user_out {
filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#11131d', startColorstr='#495068', gradientType='0');
border-top: 1px solid #9499ad;
border-bottom: 1px solid #3b4458;
table-layout: fixed;
padding: 2px;
}
.user_in {
filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#11131d', startColorstr='#4c5e8b', gradientType='0');
border-top: 1px solid #9499ad;
border-bottom: 1px solid #3b4458;
table-layout: fixed;
padding: 2px;
}
.user_jid {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Tahoma;
font-weight: bold;
font-weight: bold;
font-size: 11px;
color: #ccff81;
filter: DropShadow(color=black, offx=1, offy=1);
}
.user_jid img {
margin-right: 2px;
vertical-align: middle;
}
.user_res {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 18px;
font-family: Tahoma;
font-size: 9px;
color: gold;
filter: DropShadow(color=black, offx=1, offy=1);
}
.user_nick {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 18px;
font-family: Tahoma;
font-size: 9px;
color: #5b786e;
filter: DropShadow(color=black, offx=1, offy=1);
}
.grouptable {
table-layout: fixed;
border-bottom: 1px solid #3b4458;
width: 100%;
height: 21px;
background-color: #11131d;
}
td.groupswitch {
padding: 0px 6px 0px 0px;
width: 15px;
}
div.groupswitch {
width: 9px;
}
td.group {
padding: 0px 6px 0px 6px;
width: 100%;
}
div.group {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Tahoma;
font-weight: bold;
font-size: 11px;
color: #FFFFCC;
}
.light {
border-bottom: 1px solid #3b4458;
background-color: #0b3d32;
table-layout: fixed;
padding: 2px;
}
.selected {
border-bottom: 1px solid #3b4458;
background-color: #0e2d49;
table-layout: fixed;
padding: 2px;
}
.finito_out {
border-bottom: 1px solid #3b4458;
background-color: transparent;
table-layout: fixed;
padding: 2px;
}
.finito_in {
border-bottom: 1px solid #3b4458;
background-color: #11131d;
table-layout: fixed;
padding: 2px;
}
.buddy {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Tahoma;
font-weight: bold;
font-size: 11px;
color: white;
}
.buddy img {
margin-right: 2px;
vertical-align: middle;
}
.buddy_jid {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-left: 18px;
font-family: Tahoma;
font-size: 9px;
color: #5b786e;
}
.status {
word-wrap: break-word;
width: 100%;
padding-left: 18px;
font-family: Tahoma;
font-size: 9px;
color: whitesmoke;
}
.avatar {
cursor: pointer;
width: 32px;
text-align: center;
}
.avatar img {
max-height: 32px;
}
.hiddenavatar {
display: none;
}
.mainmenu_items{
border-bottom: 1px solid #21283e;
padding-bottom: 2px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#495068', startColorstr='#11131d', gradientType='0') DropShadow(color=black, offx=1,
offy=1);
font-family: Tahoma;
font-size: 11px;
color: gold;
}
.toolbar_items{
border-top: 1px solid #9499ad;
border-bottom: 1px solid #21283e;
padding-bottom: 2px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Gradient(endColorstr='#495068', startColorstr='#11131d', gradientType='0');
}
.toolnormal {
float: left;
text-decoration : none;
margin: 2px;
padding: 2px;
background-color: transparent;
border: 1px solid transparent;
}
.toolover {
float: left;
text-decoration : underline;
margin: 2px;
padding: 2px;
background-color: #0b3d32;
border: 1px solid #3b4458;
}
.tools_items {
padding-bottom: 2px;
width: 100%;
}
.tools_status {
border-top: 1px solid #9499ad;
padding: 2px 0px 2px 0px;
width: 100%;
font-family: Tahoma;
font-size: 11px;
color: gold;
filter: DropShadow(color=black, offx=1, offy=1);
}
.tools_status div {
float: left;
}
.tools_status img {
vertical-align: middle;
}
.toolstatus_connicon {
padding-right: 4px;
padding-left: 4px;
}
.toolstatus_secureicon {
border-left: 1px solid #3b4458;
padding-right: 4px;
padding-left: 4px;
}
.toolstatus_securetext {
padding-right: 4px;
}
.toolstatus_soundicon {
border-right: 1px solid #3b4458;
border-left: 1px solid #3b4458;
padding-right: 4px;
padding-left: 4px;
}
.toolstatus_customtext {
padding-right: 4px;
padding-left: 4px;
}
</style>
</head>
<body ondragstart="return false" onselectstart="return false">
<div id="toolbar_header">
<div id="mainmenu_items" class="mainmenu_items"></div>
<div id="toolbar_items" class="toolbar_items"></div>
</div>
<div id="list_content">
<div id="0"></div>
</div>
<div id="tools_header">
<div class="tools_items" id="tools_items"></div>
<div class="tools_status" id="tools_status"></div>
</div>
</body>
</html>@edit
Doszedłem do źródła problemu. Problemem jest obecność height: 100%; dla div#list_content. Jednak nie mam pomysłu, jak zastąpić 100% tak, aby ten div miał 100% wysokości (chciałbym uniknąć korzystania z tabeli :/).
