We help IT Professionals succeed at work.

Css center div height cuts off the top when i scale my browser window to less then the div height

macbox
macbox asked
on
509 Views
Last Modified: 2012-06-21
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/pattern.gif);
}

Comment
Watch Question

Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
Hello,

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

Author

Commented:
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

Author

Commented:
The code dident work.
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
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

Author

Commented:
Iam testing in ie, firefox and saferi. They need to work in all of those
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
the code...

Author

Commented:
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/bgbilde.jpg);
      background-position: center center;
}

html{
      background-repeat: no-repeat;
      background-image: url(../../Images/Norsk/bgbilde.jpg);
      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/logobilde.jpg);
}
#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/menu-header-bg.jpg);
      padding-top: 7px;
      padding-left: 49px;
      font-weight: bold;
      color: #FFFFFF;
}
#contence .header2 {
      width: 801px;
      height: 18px;
      background-image: url(../../Images/Norsk/menu-header-bg.jpg);
      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/slides.jpg);
}
#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/menu-header-bg.jpg);
      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.gif);
}
#menu .no {
      height: 12px;
      width: 12px;
      margin-left: 10px;
      float: left;
      margin-top: 3px;
      background-image: url(../../Images/Norsk/no.gif);
}
#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;
}
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
adding to the top of styles.css

html {
min-width:765px;
min-height:650px;
}

works for me, are u sure it doesnt work?

Author

Commented:
It seems to work in firefox, but it dosent work in safari 2.0 ,and  ie 6.0. I havent tested in ie7 yet
Mark StegglesWeb Developer
CERTIFIED EXPERT
Top Expert 2006

Commented:
i will try this later
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.