www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS Backgroud - Center isn't Center

  1. #1
    Join Date
    Jan 2003
    Location
    Windsor, UK
    Posts
    367

    CSS Backgroud - Center isn't Center

    I have a strange problem with CSS backgrounds. I have an image thats 750px wide, and am using css to place a 750px wide background image that repeats on the Y right down the page.

    Therefore putting a white box behind a image that sits top center.

    Here's the page: http://gavinpearce.co.uk/sailing/index.htm

    However the background center and text-align center seem to be in two different places, if you look you'll notice that the image is one more pixel to left and the white is one more pixel to the right. so not right in the center, it does the same if the image size is changed to 749 pixels instead of 750px also ??? How can i get them to both align and why are they not?

    Second problem is any idea how to get rid of the white space between the header image and the menu bar below? I want them to run smooth together but I cant for the life of me figure out how - ive minus padding and minus borders and everything !

    The HTML is:

    HTML Code:
    <html>
    <head>
    
    <title>WORK IN PROGRESS</title>
    <link rel="stylesheet" media="all" type="text/css" href="style.css" />
    
    </head>
    <body>
    
    <img src="header.jpg" alt="Welcome to Silverwing Sailing Club" />
    
    <div id="menu1">
    <ul>
    <li><a href="#nogo">Home</a></li>
    <li><a href="#nogo">About Us</a></li>
    <li><a href="#nogo">Club Boats</a></li>
    <li><a href="#nogo">Training</a></li>
    <li><a href="#nogo">Youth</a></li>
    <li><a href="#nogo">Contact</a></li>
    <li><a href="#nogo">Location</a></li>
    </ul>
    </div>
    
    
    </body>
    </html>
    and the CSS is:

    Code:
    body {
    background: #000033 url(bg.gif) repeat-y 50%; 
    font: 80% arial, verdana, helvetica, sans-serif;
    text-align: center;
    min-width: 750px;
    }
    
    
    
    		#container {
    			position: relative;
    			width: 749px;
    			margin: auto;
    			text-align: center;
    		}
    
    
    #header {background: #f00; border:0; margin: 0; padding: 0;}
    
    img { background: #f00; border:0; margin: 0; padding: 0;}
    
    #menu1 {
      width:750px;
      padding:0; 
      margin:0 auto;
      border: 0; 
      background:#08c url(menu_bg.jpg);
      }
    #menu1 li {
      float:left;
      width:85px;
      list-style-type:none;
      border:0px solid #fff; 
      }
    #menu1 a {
      display:block;
      width:85px;
      color:#fff;
      float: left;
      clear: left; 
      text-align:center; 
      padding:5px 0; 
      text-decoration:none; 
      float:left; 
      }
    
    #menu1 li>a { float: none; }
    
    
    #menu1 a:hover {
      color:#fff; 
      background:#08c;
      }
    Anyway many thanks for even reading this far!!

    Gavin
    Have I really been coming here for 6 years? You would have thought I would have learnt something by now!

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Obviously you are looking at this in Internet Explorer, as FireFox renders it fine. ALWAYS develop using Firefox as the main browser, and check in IE.

    You will never get IE to adhere to any standards without a proper doctype at the start of teh page - I would suggest html 4.01 strict
    Code:
    !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>WORK IN PROGRESS</title>
    If you start your css with
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    this will zero out all default browser applied margins and paddings for a known start point - you then apply whatever margins etc you need.

    Cheers
    Graeme

  3. #3
    Join Date
    May 2005
    Posts
    24
    I am having the same exact problem. The background image is shifted 1px to the right in IE. I am using * to set margin and padding to 0. The background image is attached if anyone can take a look.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <HEAD>
    <TITLE></TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <STYLE type=text/css>
    * {
        MARGIN: 0;
    	PADDING: 0
    }
    BODY {
    	FONT-SIZE: 12px;
    	FONT-FAMILY: arial,helvetica,sans-serif;
    	background: url(background.gif) repeat-y 50% 0
    }
    #wrapper {
    	BORDER: #bbb 1px solid;
    	PADDING: 10px;
    	MARGIN: 0px auto;
    	WIDTH: 900px
    }
    #header {
    	BORDER: #bbb 1px solid;
    	PADDING: 10px;
    	HEIGHT: 80px
    }
    #content {
    	MARGIN-TOP: 10px;
    	PADDING-BOTTOM: 10px
    }
    #content DIV {
    	BORDER: #bbb 1px solid;
    	PADDING: 10px;
    	FLOAT: left;
    }
    #content-left {
    	WIDTH: 180px
    }
    #content-main {
    	MARGIN-LEFT: 10px;
    	WIDTH: 500px
    }
    #content-right {
    	MARGIN-LEFT: 10px;
    	WIDTH: 134px;
    }
    #footer {
    	BORDER: #bbb 1px solid;
    	PADDING: 10px;
    	MARGIN-TOP: 10px;
    	FLOAT: left;
    	MARGIN-BOTTOM: 10px;
    	WIDTH: 878px
    }
    #bottom {
    	CLEAR: both;
    	TEXT-ALIGN: right
    }
    </STYLE>
    
    </HEAD>
    
    <BODY>
    <DIV id=wrapper>
    <DIV id=header>Header</DIV>
    <DIV id=content>
    <DIV id=content-left>
    <P>Menu Item</P>
    <P>Menu Item</P>
    <P>Menu Item</P>
    <P>Menu Item</P>
    <P>Menu Item</P>
    </DIV>
    <DIV id=content-main>
    <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</P>
    </DIV>
    <DIV id=content-right>
          <P>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem</P>
    </DIV>
    </DIV>
    <DIV id=footer>Footer text and links can go all the way along here... text text 
    text text text text...</DIV>
    <DIV id=bottom></DIV>
    </DIV>
    </BODY>
    
    </HTML>
    Attached Images Attached Images

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    This is a center calculation rounding error in IE. You will notice that if you vary the width of the browser, the background jumps between being correct or 1 pixel out, so the final exact position of the background will depend on user window size. IE does seem to handle it if the centered wrapper is an odd pixel width whilst the backround is an even width - playing with that may help you.

  5. #5
    Join Date
    Jan 2003
    Location
    Windsor, UK
    Posts
    367
    Many thanks, that saved me hours! I played around with it, making the background an odd number, and the image even you can get it to centre perfectly in all browsers.

    Many thanks once again, would have spent ages until you thought of that!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles