Center Logo Image; Cross Browser Issues

HTML & CSS
1

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:


/* #######################################################################
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:


<!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

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

Well, the first thing I notice is this:


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

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.


#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

Did you remove this:


img {
margin-left:15%;
}
6

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

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

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

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