Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 483
  • Last Modified:

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/pattern.gif);
}

0
macbox
Asked:
macbox
  • 5
  • 5
1 Solution
 
Mark StegglesWeb DeveloperCommented:
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
0
 
macboxAuthor 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
0
 
macboxAuthor Commented:
The code dident work.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
Mark StegglesWeb DeveloperCommented:
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
0
 
macboxAuthor Commented:
Iam testing in ie, firefox and saferi. They need to work in all of those
0
 
Mark StegglesWeb DeveloperCommented:
the code...
0
 
macboxAuthor 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;
}
0
 
Mark StegglesWeb DeveloperCommented:
adding to the top of styles.css

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

works for me, are u sure it doesnt work?

0
 
macboxAuthor 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
0
 
Mark StegglesWeb DeveloperCommented:
i will try this later
0
 
ee_autoCommented:
Question PAQ'd, 500 points refunded, and stored in the solution database.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now