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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering a fixed width div in chrome/safari

    my problem:

    I have a fixed width div which is supposed to be centered in the available space
    this space is restricted by a div which is set to float: right

    in FF and IE it centers in the remaining space, in chrome and safari it centers in the entire space (overlapping the div on the right)

    the site is here:
    http://crimson.lunarbreeze.com/~prim...t.php?p=SA-203

    any help is greatly appreciated

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello primo,
    I'm not seeing the problem.
    Could you be more specific and name the actual divs? Is it the stuff inside .centered?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the div named "products" it looks fine in IE/FF but messed up in chrome (and I'm told safari also)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hmm, I can't see where your styling #products, #dp or #diplayproduct...

    It would probably be easiest to float #dp right. You'll need to re-write that whole section though.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hmm, I can't see where your styling #products, #dp or #diplayproduct...

    It would probably be easiest to float #dp right. You'll need to re-write that whole section though.
    #dp is floated right...I am styling those divs from http://crimson.lunarbreeze.com/~prim.../css/local.php

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Der...

    I'll pay more attention now.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Der...

    I'll pay more attention now.
    you made me panic. I thought "Did I really just forget something that trivial??"

    hopefully somebody can come up with something better than my fallback which will be to set a static left margin that fakes the centering

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Yeah, it makes a lot more sense when you look at both CSS files.

    Try this instead:
    Code:
    div#products {
    	display:block;
    /*good browser	margin: 0px auto;*/
    margin: 0 0  0 40px;
    	text-indent:0;
    	text-align: center;
    	white-space: nowrap;
    	width: 410px;
    	height: 122px;
    	overflow: auto;
    }
    I'm surprised that worked at all, especially in FF.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    hopefully somebody can come up with something better than my fallback which will be to set a static left margin that fakes the centering
    Hehe, must have just missed you.
    You could always divide that container up and make 2 columns out of it. That way the margin:0 auto; would have nothing in the way of it's centering #products.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Try this instead:
    Code:
    margin: 0 0  0 40px;
    I'm surprised that worked at all, especially in FF.
    I was afraid you would say that, really don't want to set a static left margin

    Do you suppose it is a chrome/safari glitch or am I exploiting a glitch in my favour in FF/IE/Opera?

  • #11
    New to the CF scene
    Join Date
    Dec 2008
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hehe, must have just missed you.
    You could always divide that container up and make 2 columns out of it. That way the margin:0 auto; would have nothing in the way of it's centering #products.
    sorry, which container do you mean?

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Your div centered can be renamed as something that can be styled. Like this:
    Code:
    </div><div id="content">
    <div id="dp"><img id="displayproduct" name="preview" src="images/products/SA-203-1_380.jpg" alt="FrankartDeco Sarsaparilla SA-203"></div>
    
    <div id="left_products"><!--renamed-->
    <h1>DC-3 Airplane Light</h1>
    <h2>13" LONG</h2>
    <script type="text/javascript">
    function updateprice()
    {
    if(document.getElementById('sku').value=='SA-203AB')
    And then add to the CSS
    Code:
    #left_products {
    	width: 500px;
    background: #ccc;
    text-align: center;
    }
    Adjust the numbers to do what you want but that might give you the extra bit of control your looking for.

    Also, the validator finds a couple things that could be fixed.
    Last edited by Excavator; 12-25-2008 at 03:50 AM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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