macbox
asked on
Css center div height cuts off the top when i scale my browser window to less then the div height
Hi
I have an css script that center the width and height and it work fine. Well almost :)
The thing is when i scale my browser down so that the browser window is less then the hight of the #center div. It goes negative and cuts the top off.
I what it to stop at the top off the browser and then you can scroll down to see the all of the page not just part of it.
#center {
height: 650px;
width: 765px;
margin-left: -383px;
position: absolute;
left: 50%;
margin-top: -280px;
top: 50%;
background-image: url(../../Images/Norsk/pat
}
I have an css script that center the width and height and it work fine. Well almost :)
The thing is when i scale my browser down so that the browser window is less then the hight of the #center div. It goes negative and cuts the top off.
I what it to stop at the top off the browser and then you can scroll down to see the all of the page not just part of it.
#center {
height: 650px;
width: 765px;
margin-left: -383px;
position: absolute;
left: 50%;
margin-top: -280px;
top: 50%;
background-image: url(../../Images/Norsk/pat
}
ASKER
I know that people dont do that. But say if i have a site that is 800 height and some one has a screen resolution on 700 height. Then the top of the site would be cutted of
ASKER
The code dident work.
Hello,
What browser are u testing in?
Can you post all the code for your page and I will try to fix for you
Thanks
Steggs
What browser are u testing in?
Can you post all the code for your page and I will try to fix for you
Thanks
Steggs
ASKER
Iam testing in ie, firefox and saferi. They need to work in all of those
the code...
ASKER
The webpage is www.macbox.no
the css code is:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
line-height: 12px;
background-repeat: no-repeat;
background-image: url(../../Images/Norsk/bgb
background-position: center center;
}
html{
background-repeat: no-repeat;
background-image: url(../../Images/Norsk/bgb
background-position: center center;
height: 100%;
width: 100%;
}
form {
margin: 0px;
padding: 0px;
}
.wrapper {
clear:left;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#center {
height: 736px;
width: 850px;
position: absolute;
left: 50%;
margin-left: -425px;
top: 50%;
margin-top: -368px;
}
#header {
float: left;
height: 235px;
width: 844px;
margin-bottom: 1px;
border-top-width: 3px;
border-right-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #2D2D2D;
border-right-color: #2D2D2D;
border-left-color: #2D2D2D;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #2D2D2D;
}
#header .logo {
height: 235px;
width: 216px;
float: left;
background-image: url(../../Images/Norsk/log
}
#header .flash {
height: 235px;
width: 628px;
float: left;
}
#contence {
float: left;
height: 500px;
width: 850px;
}
#contence .header {
width: 801px;
height: 18px;
background-image: url(../../Images/Norsk/men
padding-top: 7px;
padding-left: 49px;
font-weight: bold;
color: #FFFFFF;
}
#contence .header2 {
width: 801px;
height: 18px;
background-image: url(../../Images/Norsk/men
padding-top: 7px;
padding-left: 49px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 1px;
}
#contence .info {
height: 451px;
width: 850px;
background-color: #393939;
overflow: auto;
}
#contence .slides {
height: 139px;
width: 850px;
background-image: url(../../Images/Norsk/sli
}
#contence .nameheader {
height: 24px;
width: 553px;
margin-left: 49px;
padding-top: 17px;
color: #FFFFFF;
font-weight: bold;
float: left;
padding-bottom: 5px;
}
#contencea a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence .backheader {
height: 36px;
width: 200px;
color: #FFFFFF;
font-weight: bold;
float: left;
padding-top: 5px;
text-align: right;
padding-bottom: 5px;
}
#contence .image {
width: 750px;
margin-left: 49px;
border: 1px solid #000000;
float: left;
}
#refmenu a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#reference {
height: 500px;
width: 219px;
margin-right: 1px;
float: left;
background-color: #2D2D2D;
}
#menu {
float: left;
height: 500px;
width: 630px;
}
#menu .general {
height: 265px;
width: 375px;
float: left;
}
#news {
height: 265px;
width: 200px;
float: right;
margin-right: 15px;
}
#news .nheader {
width: 180px;
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#news .ingress {
width: 180px;
background-color: #FFFFFF;
padding: 10px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
}
#news a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#menu .header{
width: 615px;
height: 18px;
background-image: url(../../Images/Norsk/men
color: #FFFFFF;
padding-top: 7px;
padding-left: 15px;
font-weight: bold;
cursor: pointer;
}
#menu .content{
width: 613px;
height: 284px;
background-color: #efefef;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: 393939;
border-left-color: 393939;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: 393939;
display: block;
visibility: visible;
padding-top: 15px;
padding-left: 15px;
overflow: auto;
}
#menu .content2 {
width: 613px;
height: 284px;
background-color: #efefef;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: 393939;
border-left-color: 393939;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: 393939;
display: none;
visibility: hidden;
padding-top: 15px;
padding-left: 15px;
line-height: 15px;
font-family: 12;
}
#menu .all {
height: auto;
width: 580px;
float: left;
padding-bottom: 5px;
}
#menu .length {
height: auto;
float: left;
margin-top: 4px;
margin-right: 10px;
}
#menu .left{
height: auto;
float: left;
padding-bottom: 5px;
width: 290px;
}
#menu .right {
height: auto;
width: 220px;
float: left;
padding-bottom: 5px;
}
#menu .input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #666666;
}
#menu .none {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
}
#menu .yes {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
background-image: url(../../Images/Norsk/yes
}
#menu .no {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
background-image: url(../../Images/Norsk/no.
}
#contence .name {
height: 400px;
width: 810px;
margin-left: 15px;
border: 1px solid #FFFFFF;
}
.refstyle {
width: 140px;
border: 1px solid #999999;
position: absolute;
z-index: 10;
background-color: #efefef;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
line-height: 14px;
display: none;
visibility: hidden;
}
.refstyle2 {
width: 140px;
border: 1px solid #999999;
position: absolute;
z-index: 10;
background-color: #efefef;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
line-height: 14px;
display: block;
visibility: visible;
}
.classmsg {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #CCCCCC;
border: 1px solid #666666;
padding: 10px;
width: 110px;
position: absolute;
z-index: 100;
margin-left: -55px;
left: 50%;
bottom: 50%;
margin-top: -20px;
display: block;
visibility: visible;
}
.classmsg2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #CCCCCC;
border: 1px solid #666666;
padding: 10px;
width: 110px;
position: absolute;
z-index: 100;
margin-left: -55px;
left: 50%;
bottom: 50%;
margin-top: -20px;
display: none;
visibility: hidden;
}
the css code is:
body {
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
line-height: 12px;
background-repeat: no-repeat;
background-image: url(../../Images/Norsk/bgb
background-position: center center;
}
html{
background-repeat: no-repeat;
background-image: url(../../Images/Norsk/bgb
background-position: center center;
height: 100%;
width: 100%;
}
form {
margin: 0px;
padding: 0px;
}
.wrapper {
clear:left;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#center {
height: 736px;
width: 850px;
position: absolute;
left: 50%;
margin-left: -425px;
top: 50%;
margin-top: -368px;
}
#header {
float: left;
height: 235px;
width: 844px;
margin-bottom: 1px;
border-top-width: 3px;
border-right-width: 3px;
border-left-width: 3px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #2D2D2D;
border-right-color: #2D2D2D;
border-left-color: #2D2D2D;
border-bottom-width: 3px;
border-bottom-style: solid;
border-bottom-color: #2D2D2D;
}
#header .logo {
height: 235px;
width: 216px;
float: left;
background-image: url(../../Images/Norsk/log
}
#header .flash {
height: 235px;
width: 628px;
float: left;
}
#contence {
float: left;
height: 500px;
width: 850px;
}
#contence .header {
width: 801px;
height: 18px;
background-image: url(../../Images/Norsk/men
padding-top: 7px;
padding-left: 49px;
font-weight: bold;
color: #FFFFFF;
}
#contence .header2 {
width: 801px;
height: 18px;
background-image: url(../../Images/Norsk/men
padding-top: 7px;
padding-left: 49px;
font-weight: bold;
color: #FFFFFF;
margin-bottom: 1px;
}
#contence .info {
height: 451px;
width: 850px;
background-color: #393939;
overflow: auto;
}
#contence .slides {
height: 139px;
width: 850px;
background-image: url(../../Images/Norsk/sli
}
#contence .nameheader {
height: 24px;
width: 553px;
margin-left: 49px;
padding-top: 17px;
color: #FFFFFF;
font-weight: bold;
float: left;
padding-bottom: 5px;
}
#contencea a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff;
text-decoration: none;
font-weight: normal;
}
#contence .backheader {
height: 36px;
width: 200px;
color: #FFFFFF;
font-weight: bold;
float: left;
padding-top: 5px;
text-align: right;
padding-bottom: 5px;
}
#contence .image {
width: 750px;
margin-left: 49px;
border: 1px solid #000000;
float: left;
}
#refmenu a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#refmenu a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: none;
font-weight: normal;
}
#reference {
height: 500px;
width: 219px;
margin-right: 1px;
float: left;
background-color: #2D2D2D;
}
#menu {
float: left;
height: 500px;
width: 630px;
}
#menu .general {
height: 265px;
width: 375px;
float: left;
}
#news {
height: 265px;
width: 200px;
float: right;
margin-right: 15px;
}
#news .nheader {
width: 180px;
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
}
#news .ingress {
width: 180px;
background-color: #FFFFFF;
padding: 10px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC;
}
#news a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#news a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
text-decoration: underline;
font-weight: normal;
}
#menu .header{
width: 615px;
height: 18px;
background-image: url(../../Images/Norsk/men
color: #FFFFFF;
padding-top: 7px;
padding-left: 15px;
font-weight: bold;
cursor: pointer;
}
#menu .content{
width: 613px;
height: 284px;
background-color: #efefef;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: 393939;
border-left-color: 393939;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: 393939;
display: block;
visibility: visible;
padding-top: 15px;
padding-left: 15px;
overflow: auto;
}
#menu .content2 {
width: 613px;
height: 284px;
background-color: #efefef;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: 393939;
border-left-color: 393939;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: 393939;
display: none;
visibility: hidden;
padding-top: 15px;
padding-left: 15px;
line-height: 15px;
font-family: 12;
}
#menu .all {
height: auto;
width: 580px;
float: left;
padding-bottom: 5px;
}
#menu .length {
height: auto;
float: left;
margin-top: 4px;
margin-right: 10px;
}
#menu .left{
height: auto;
float: left;
padding-bottom: 5px;
width: 290px;
}
#menu .right {
height: auto;
width: 220px;
float: left;
padding-bottom: 5px;
}
#menu .input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
border: 1px solid #666666;
}
#menu .none {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
}
#menu .yes {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
background-image: url(../../Images/Norsk/yes
}
#menu .no {
height: 12px;
width: 12px;
margin-left: 10px;
float: left;
margin-top: 3px;
background-image: url(../../Images/Norsk/no.
}
#contence .name {
height: 400px;
width: 810px;
margin-left: 15px;
border: 1px solid #FFFFFF;
}
.refstyle {
width: 140px;
border: 1px solid #999999;
position: absolute;
z-index: 10;
background-color: #efefef;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
line-height: 14px;
display: none;
visibility: hidden;
}
.refstyle2 {
width: 140px;
border: 1px solid #999999;
position: absolute;
z-index: 10;
background-color: #efefef;
margin-top: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #333333;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
line-height: 14px;
display: block;
visibility: visible;
}
.classmsg {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #CCCCCC;
border: 1px solid #666666;
padding: 10px;
width: 110px;
position: absolute;
z-index: 100;
margin-left: -55px;
left: 50%;
bottom: 50%;
margin-top: -20px;
display: block;
visibility: visible;
}
.classmsg2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #CCCCCC;
border: 1px solid #666666;
padding: 10px;
width: 110px;
position: absolute;
z-index: 100;
margin-left: -55px;
left: 50%;
bottom: 50%;
margin-top: -20px;
display: none;
visibility: hidden;
}
adding to the top of styles.css
html {
min-width:765px;
min-height:650px;
}
works for me, are u sure it doesnt work?
html {
min-width:765px;
min-height:650px;
}
works for me, are u sure it doesnt work?
ASKER
It seems to work in firefox, but it dosent work in safari 2.0 ,and ie 6.0. I havent tested in ie7 yet
i will try this later
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Ask yourself... why would anyone scale the browser down that small? I dont think they would
The easy way to fix is to put a min-height and min-width on the html tag
html {
min-width:765px;
min-height:650px;
}
Steggs