Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Stuck on Centering for ages

    I've been stuck on this problem trying to center this banner....

    test page
    Code:
    <html>
    <head>
    <LINK href="/images/la.css" type=text/css rel=stylesheet>
    </head>
    <body>
    <DIV id=back_bg></div>
    </body>
    </html>
    la.css

    Code:
    body{
    margin: 0 auto;
    width: 1000px;
    }
    
    #back_bg {
    Margin: 0 auto; background: url(back.gif); width: 900px; position: absolute; height: 450px
    }
    It centers on firefox fine, but wouldn't center on IE. Its always stuck to the left side! what am i doing wrong?

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    <body>
    <DIV id=back_bg></div>

    shouldn't it be:-

    <body>
    <DIV id="back_bg>"</div>

    with " quotes.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    doesn't work either.

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Really need access to the url. The fault may lie elsewhere.
    Have you validated it.

    http://validator.w3.org/#validate_by_uri:)

    also what version of IE

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I've copied and pasted the contents of both files I'm using in here... there are no other files, u can try using any picture of your choice. It just wouldnt' center

    Im using IE6
    Last edited by adobe2; 10-01-2007 at 01:02 PM.

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    I cannot get it to centre (using my image) on IE, Firefox or Opera.

    This url may help you.

    http://komodomedia.com/blog/index.ph...lly-centering/

    could you send a screen shot so that we know what to expect.
    Frank
    Last edited by effpeetee; 10-01-2007 at 02:49 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    adobe2 (10-02-2007)

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This works for me.

    Very useful site. http://www.w3schools.com/css/tryit.a...round-position

    Frank

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <style type="text/css">
    body
    { 
    background-image: url(3a.jpg);width: 80px;  height: 60px;
    background-repeat: no-repeat;
    background-position: center center;
    
    
    div#container
    {
    margin-left: auto;
    margin-right: auto;
    width: 50em;
    text-align: middle;
    }</style>
    
    <LINK href="/images/la.css" type=text/css rel=stylesheet>
    </head>
    <body>
    <DIV id=back_bg></div>
    </body>
    </div>
    </html>
    Last edited by effpeetee; 10-01-2007 at 03:22 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • Users who have thanked effpeetee for this post:

    adobe2 (10-02-2007)

  • #8
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Got it! Thank you very much!

  • #9
    New to the CF scene
    Join Date
    Oct 2007
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I have another problem...

    this time its like this. I've added this picture as the background... its centered on a maximized screen. Everything looks fine. However, things look messy when I resize the screen so that the window size is smaller than the background image. In IE, everything is okay still. When the window is smaller, all the white space between the picture and the left side edge of the browser is automatically reduced, and I'm left with the left side edge of the picture on the left side edge of the browser. Which is how its meant to go.

    However, in Firefox, when I reduce the window size, the picture moves along with the window. The left side edge keeps going and disappears off the screen. So I'm left a portion of the image remaining, and this remaining portion gets smaller the smaller I make the window.

    Has anyone encountered this problem before? If so, how to solve it? Cheers.

    Suka


  •  

    Posting Permissions

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