57 users online (0 members and 57 guests)  


  Results 1 to 3 of 3

Related

  1. span problem with Mozilla    Forum: CSS Forum
    Replies: 1
  2. Replies: 3
  3. Replies: 1
  1. #1
    Variable's Avatar
    New User

    Status
    Offline
    Join Date
    May 2003
    Posts
    10

    margin: auto and background: center don't quite agree in Mozilla

    I've got a simple problem really.. I've got a background image that is centered and repeats vertically across the page as a property of my page's <body> (i.e. faux method), and then I've got a div that will contain my content and is centered (using margin: auto).

    In IE it works exactly as intended. My problem is that in Firefox, the container div is one px to the left of the center of the background. So either the { background: center } renders 1px to the right in FF relative to IE, or the { margin: auto } renders 1px to the left in FF relative to IE.

    the css
    Code:
    * {
      margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    body {
      background-color: #b0b7bb;
    	background-image: url("../img/bg.gif");
    	background-position: center;
    	background-repeat: repeat-y;
    }
    
    #container {
      background-color: red;
    	margin: auto;
    	width: 885px;
    }
    the html
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <link href="css/style.css" rel="stylesheet" type="text/css" /> 
    </head>
    <body>
    <div id="container">
    test
    </div>
    </body>
    </html>
    the product (it's very hard to see the problem unless you zoom in because it's just a 1px difference.. but it's there and an annoyance):
    http://rawbwk.com/test/

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    Re: margin: auto and background: center don't quite agree in Mozilla

    Hi there Variable,

    when using margin:auto and/or background-position: center with elements of odd widths, in your case...

    background-image.......width 919px
    div............................width 885px
    ...this can cause problems with exact centering.
    To get exact centering requires the use of even widths, as a pixel, unlike the atom, cannot be split.

  3. #3
    seo1394's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2010
    Posts
    1

    Re: margin: auto and background: center don't quite agree in Mozilla

    Quote Originally Posted by coothead View Post
    Hi there Variable,

    when using margin:auto and/or background-position: center with elements of odd widths, in your case...

    background-image.......width 919px
    div............................width 885px
    ...this can cause problems with exact centering.
    To get exact centering requires the use of even widths, as a pixel, unlike the atom, cannot be split.

    here is a simple code about CSS margin

    <html>
    <body>
    In this forum you will
    see there is some space (though a very little amount)
    all around. But there is no space whenever you
    will disply this html code inside your browser.
    <blockquote>


    But there will be some spaces all around this
    blockquote. Both left, right, top, bottom side.


    </blockquote>
    You are recommended to join and discuss your problems there
    </body>
    </html>



    If you run above html code, you will see all around of blockquote text there is space.
    But don't have control how much space will be all around. In CSS, this space is
    called "margins" and margins are controlled by four properties, margin-left, margin-right,
    margin-top and margin-bottom. We can minimize space around blockquote by following css code,


    blockquote {
    margin-top: 1em;
    margin-right: 0em;
    margin-bottom: 1em;
    margin-left: 0em;
    }
    Last edited by HTML; 01-26-2010 at 07:30 AM.



Tags for this Thread