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 7 of 7
  1. #1
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts

    How do you get images centered cross browser?

    I'm running into a problem when creating a top banner for my site, I have a CSS background color (well its a gradient but I don't think that matters) for the div and then a top banner image inside the div. I configured it with margin-left: to center the image with the rest of my page, but when I look at it in different browsers, or with different resolutions the image is off centered. How do I go about fixing this?

    Site in question: http://www.cheaperfirearms.com

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jaydrones,
    To center an element you need three things:
    1. a valid DocType
    2. an element with a width
    3. that elements right/left margins set to auto



    In the case of an image, you must also make it a block level element instead of inline.

    Look what this bit of CCS will do for you:
    Code:
    #top-banner img { 
    /*margin-left:205px;*/
    width: 1030px;
    margin: 0 auto;
    display: block;
    }

    ----------------

    Of course, that only centeres it inside of 1900px wide #top-banner which still doesn't really do what you want.
    Changing #top-banner's CSS to look like this might help -
    Code:
    #top-banner			{
    /*margin:0 auto; 
    width:1900px; */
    height:160px;
    background: rgb(127,2,15); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(127,2,15,1) 0%, rgba(102,2,17,1) 44%, rgba(84,0,14,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(127,2,15,1)), color-stop(44%,rgba(102,2,17,1)), color-stop(100%,rgba(84,0,14,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(127,2,15,1) 0%,rgba(102,2,17,1) 44%,rgba(84,0,14,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(127,2,15,1) 0%,rgba(102,2,17,1) 44%,rgba(84,0,14,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(127,2,15,1) 0%,rgba(102,2,17,1) 44%,rgba(84,0,14,1) 100%); /* IE10+ */
    background: linear-gradient(top,  rgba(127,2,15,1) 0%,rgba(102,2,17,1) 44%,rgba(84,0,14,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f020f', endColorstr='#54000e',GradientType=0 ); /* IE6-9 */
    
    
    
    
     }
    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

  • Users who have thanked Excavator for this post:

    jaydrones (05-02-2012)

  • #3
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Hey thank you for your input, I think that fixed the problem for most of the browers, but I'm still having problems displaying it on Ipods and Ipads. The topnav background isn't going across the entire screen (which is what I intended for it to do). Any idea how to fix this?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm not sure what you mean. The #topnav I'm looking at on http://www.cheaperfirearms.com/ has no background. If it did, it would only go as wide as it's 1030px wide containing #wrapper.
    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

  • Users who have thanked Excavator for this post:

    jaydrones (05-03-2012)

  • #5
    New Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    I'm not sure what you mean. The #topnav I'm looking at on http://www.cheaperfirearms.com/ has no background. If it did, it would only go as wide as it's 1030px wide containing #wrapper.
    Oops, I meant the top banner, not topnav

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by jaydrones View Post
    Oops, I meant the top banner, not topnav
    I haven't got an iPad or iPod to see.
    If the 100% width isn't doing the trick, try removing it.
    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 Coder
    Join Date
    Apr 2012
    Posts
    22
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks for all your help man. Will make sure to check out the stuff in your sig too!


  •  

    Posting Permissions

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