6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Why isn't this working? Probably simple

by jbearnolimits
5 replies
  • WEB DESIGN
    • |
I am making a new test page and I seem to be having trouble getting the margins right. The top blue color should be going out to the edges and top of screen but it is not. Here is a link to the page: An Online Church Ministry - Growing Christians - Reaching The Lost. Here is the css:

Code:
<style type="text/css">
body {
  margin: 0px;
  padding: 0px;
  border: 0px;
}
#headercontainer {
  width: 100%;
  background-color: #86bde4;
}
#headercontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  margin-right: 15px;
  width: 300px;
}
#searchbar {
  float: left;
  width: 300px;
  margin-right: 15px;
}
#headerright {
  float: left;
  width: 669px;
}
#missionstatement {
  padding: 20px 10px 10px;
  margin-left: 15px;
  width: 324px;
  float: right;
}
#headerlogo {
  width: 246px;
  margin-right: 15px;
  float: left;
  padding-left: 10px;
}
#bodycontainer {
  width: 100%;
  background-color: #ffcc33;
}
#bodycontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#bodyleft {
  float: left;
  margin-right: 15px;
  width: 600px;
}
#bodyright {
  float: left;
  width: 354px;
  margin-left: 15px;
}
#footercontainer {
  width: 100%;
}
#footercontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  background-image: url(images/topbackgroundsmall.jpg);
  background-position: left bottom;
  background-repeat: repeat-x;
  width: 100%;
  text-align: center;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  width: 639px;
  float: left;
}
.BannerColumn2 {
  width: 345px;
  float: left;
}
  </style>
#simple #working
  • Profile picture of the author Paul M Smith
    Might be the preset css in the browser, try adding this reset hack to start your css.
    * { margin: 0; padding: 0; }
    {{ DiscussionBoard.errors[9431575].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by Paul M Smith View Post

      Might be the preset css in the browser, try adding this reset hack to start your css.
      Yep, that did the trick. I thought I had tried that, but I guess I must have had the syntax wrong when I did. It works now. I do have another question though. I can't seem to get the bodycontent section to be white while leaving the background blue. I know it is simple and I have done it before but for some reason my mind has gone out the window.
      {{ DiscussionBoard.errors[9432476].message }}
      • Profile picture of the author jbearnolimits
        Ok, so I have the main content of the body white now. But I had to remove the floats to do it. Now I do not have the left and right body content stacking next to each other. I also notice the footer has a white space above it. How can I fix all of this?

        Here is my updated css:

        Code:
        <style type="text/css">
* { margin: 0; padding: 0; } 
body {
  margin: 0;
  padding: 0;
}
#headercontainer {
  width: 100%;
  background-color: #86bde4;
}
#headercontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#headerleft {
  float: left;
  margin-right: 15px;
  width: 300px;
}
#searchbar {
  float: left;
  width: 300px;
  margin-right: 15px;
}
#headerright {
  float: left;
  width: 669px;
}
#missionstatement {
  padding: 20px 10px 10px;
  margin-left: 15px;
  width: 324px;
  float: right;
}
#headerlogo {
  width: 246px;
  margin-right: 15px;
  float: left;
  padding-left: 10px;
}
#bodycontainer {
  width: 100%;
  background-color: #B6D1E2;
}
#bodycontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
  background-color: #ffffff;
}
#bodyleft {  
  margin-right: 15px;
  width: 600px;
}
#bodyright {
  width: 354px;
  margin-left: 15px;
}
#footercontainer {
  width: 100%;
  background-color: #86bde4;
}
#footercontent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
#navbar {
  margin-right: auto;
  margin-left: auto;
  background-image: url(images/topbackgroundsmall.jpg);
  background-position: left bottom;
  background-repeat: repeat-x;
  width: 100%;
  text-align: center;
  clear: both;
}
#BannerContainer {
  width: 100%;
}
#BannerContent {
  width: 984px;
  margin-right: auto;
  margin-left: auto;
}
.BannerColumn1 {
  width: 639px;
  float: left;
}
.BannerColumn2 {
  width: 345px;
  float: left;
}
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}

  </style>
        {{ DiscussionBoard.errors[9432504].message }}
  • Profile picture of the author Nuke07
    body{margin:0;}
    working at my screen
    Signature
    {{ DiscussionBoard.errors[9432195].message }}
  • Profile picture of the author jbearnolimits
    This is very curious. I am using IE10. What are you using?
    {{ DiscussionBoard.errors[9432436].message }}

Trending Topics