SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center Logo Image; Cross Browser Issues

    I have been having some major issues with the layout of a very basic splash page for an upcoming project I am working on.I began the project and tweaked around with margins via .css for hours last night to get the logo pseudo-centered (albeit not exact) on Google Chrome (my browser of choice).

    I fired up Firefox and IE this morning to find the logo radically out of place on them browsers. The text alignment appears to be working as intended however.

    Here is the .CSS:
    Code CSS:
    /* #######################################################################
    KING OF CARDS ONLINE: CSS STYLES
    ######################################################################## */
     
    Body {
    background-color:#5A4A42 ;
    }
     
    #splash {
    margin-top:20%;
    margin-left:44%;
    margin-right:44%;
    width:170px;
    }
     
    p {
    color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.875em;
    text-align:center;
    }
     
    img {
    margin-left:15%;
    }
     
    footer {
    width:100%;
    color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.875em;
    position: fixed;
    bottom: 0px;
    }
     
    /* #######################################################################
     END OF FILE
    ######################################################################## */

    And here is the HTML:
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="description" content="Online Action Trading Card Game.">
    		<title>KOCO: Online Action TCG</title>
    		<link href="kocostyle.css" rel="stylesheet" type="text/css">
    	</head>
    
    	<body>
    		<header></header>
    		<section id=splash>
    			<img src=images/logo_trans_matte.gif>
    			<p>Action Based: Online TCG</p>
    		</section>
    		<footer> 
    			<p> &copy; 2010 King Of Cards Online || liamhockley@hotmail.com </p>
    		</footer>
    	</body>
    	
    </html>
    I intend for this project to be fairly long term (potentially spanning the entire duration of my bachelors in comp sci), hence the experimentation with the newer HTML tags.

    In such a situation, would using the <center> tag on the logo image really be a bad thing? or is there a better, more standards compliant way to consistently achieve the same via oure CSS (as I am currently attempting). The image size that I am working with is 108x55 px.


    Thanks.

  2. #2
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also, I am noticing some redundancys in the .css that I need to fix. But the issue at hand here is centering the image. thx

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Well, the first thing I notice is this:
    Code:
    margin-left:44%;
    margin-right:44%;
    width:170px;
    The problem is you have a margin on either side set, but the width is also set, so it's likely it can't satisfy all three of those conditions at once, so at least one will break (probably margin-right).

    The simplest fix would be to change margin-left and margin-right to "auto", which will let it center. Then add text-align: center to it and that should center to image in the rest of the browsers.

  4. #4
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok. Well having made them changes, The image remains centered on Chrome. But on Firefox and InternetExplorer the image is offset to the left by a huge chunk.
    For clarification, here is the updated CSS for the elements in question.

    Code css:
    #splash {
    margin-top:20%;
    margin-left:auto;
    margin-right:auto;
    width:108px;
    text-align:center;
    }
     
    p {
    color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.875em;
    text-align:center;
    }

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Did you remove this:
    Code:
    img {
    margin-left:15%;
    }

  6. #6
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow. what a goober. My bad. I'm willing to BET that is where my problem is, haven't got time to test it this second but yeh. lol.

  7. #7
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I just lost the bet. No luck on the other two browsers. The image is apparently not having any alignment applied to it (sitting in top left corner). On the good side, the image is now exactly center regardless of resolution.

  8. #8
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Try adding "display: block" to your section element. It may be that FF and IE don't recognize it, so they default to treating it as an inline element.

  9. #9
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool. I guess that was the problem in FF. Now the same issue remains in IE (Version 8). Any ideas on how to possibly make this work on IE8 would be cool.

    ps: Figures that IE would be the hardest browser to tackle, wtf is their problem? /sigh


Bookmarks

Posting Permissions

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