1 svar · 211 visningar · startad av Aeris130
Jag har ett litet problem med scrollbars inuti en css-div som omfattar hela innehållet och centrerar det (container).
Problemet är det, att när sidan först öppnas så visas två scrollbars (både bredd och höjd) inuti min div (container), men när man uppdaterar sidan en gång så försvinner de och kommer inte tillbaka förräns man öppnar sidan i ett nytt fönster eller besöker en annan webplats först. Jag använder även php för att lagra all kod utanför innehållet i <body>.
Detta har aldrig hänt mig tidigare, så jag vet inte riktigt vad jag ska göra åt det. Felet uppstår både i Ie och Firefox.
här är min css-kod:
body {
font: 10pt Georgia, Helvetica, sans-serif;
color:#000;
background-color: #666666;
margin-top: 0px;
margin-bottom: -30px;
}td {
font-family: Arial, Helvetica, sans-serif;
}th {
font-family: Arial, Helvetica, sans-serif;
}#container {
width: 700px;
height: 100%;
overflow: auto;
background-color:#FFFFFF;
background-image: url(menu_bg2.gif);
background-repeat:repeat-y;
}#bg_container {
width: 720px;
background-image: url(frame.gif);
margin-right: auto;
margin-left: auto;
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}#header {
height: 150px;
width: 700px;
background-image: url('header.jpg');
background-repeat: no-repeat;
}#header2 {
height: 70px;
padding-top: 10px;
background-image: url(header_2.jpg);
text-align: center;
}#menu {
float: left;
width: 130px;
background-color:#FFFFFF;
}#menu_1 {
float: left;
width: 130px;
background-color: #FFFFFF;
}#menu_2 {
float: left;
width: 130px;
background-color: #FFFFFF;
}#headline_1 {
background-image: url(headline_1.gif);
height: 29px;
font: 14pt, Georgia, "Times New Roman", Times, serif;
padding-left: 14px;
margin-top: 0px;
}#content {
padding: 25px;
width: 515px;
float: right;
background-image: url(content_top.gif);
background-repeat: no-repeat;
}#disclaimer {
padding: 25px;
width: 513px;
float: right;
background-color: #FFFFFF;
border-left: solid 1px #FFFFFF;
border-right: solid 1px #FFFFFF;
border-bottom: solid 1px #FFFFFF;
}div#linklist ul {
list-style-type: none;
margin-right: 0px;
margin-top: 5px;
}div#linklist li {
margin-left: -27px;
margin-top: 5px;
}.content_links1 A:link {text-decoration: underline; color: #000;}
.content_links1 A:visited {text-decoration: underline; color: #000;}
.content_links1 A:hover {color: #000; text-decoration: underline}
.content_links1 A:active {color: #000; text-decoration: underline}
A:link, A:visited {text-decoration: none;
color: #000;
}A:hover{
color: #000;
text-decoration: underline overline}A:active {
color: #000;
text-decoration: underline;
}
Det jag tror det kan vara är att webbläsaren inte vet hur mkt innehåll din divv kommer innehålla och eftersom den mycket väl kan innehålla mer innehåll än din viewport är hög, så lägger den till scrollbars.
Testa att sätta: "overflow: hidden" eller "overflow:visible" på din #container.
Du kan också testa "min-height: 100%;". Eftersom då är det din container som dras ut och inte ditt innehåll som antingen klipps eller renderas utanför elementet.
