CSS - centering issue

Daniel Exe · 04-16-2006, 07:31 AM

I'm creating a new skin for a php script and I've encountered a problem. (I'm still fairly new to css so I apologise if I my explanation may not be too clear) I positioned a bg image in the center of the page and made it stretch vertically. I then created a div that will center itself - this will contain all the content of the page. Unfortunately, there is an issue with centering in some browsers which I managed to find at http://www.positioniseverything.net/bg-centering.html . This is exactly what I'm experiencing as at times there's a difference of 1 px between the bg and div. Here is a screenshot of what I'd like it to always be and of the issue that sometimes occurs:
????: NamePros.com http://www.namepros.com/programming/187951-css-centering-issue.html

Now I read the solution posted at the url above but I'm not sure how I can incorporate it in my layout as I need the background image to stretch vertically to fit the size of the window.

Here's my code:

Code:

body {
	background-color: #EEEEEE;
	background-image: url('images/bg.gif');
	background-repeat: repeat-y;
	background-position: center; 
	color: #6F6F6F;
	font-size: 11pt;
	font-family: arial;
	text-align: center;
	min-width: 698px;
}

#wrapper {
	margin: 0 auto;
	width: 698px;
	height: 900px;
	text-align: center;
	border-style: solid;
	border-color: 6C6C6C;
	border-top-width: 0px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 0px;
}

#header {
	margin: 0 auto;
	width: 698px;
	height: 78px;
	text-align: center;
	float: center;
	border-width: 0px;
	background-image: url('images/header_bg.gif');
	background-repeat: repeat-x;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{$list_name} - {$header}</title>
<link rel="stylesheet" type="text/css" media="screen" href="SmoothBlue.css" />
<script language="javascript">
function out(username)
{
  image = new Image();
  image.src= '{$list_url}/index.php?a=out&u=' + username;
}
</script>
</head>
<body>

<div id="wrapper">
<div id="header">
<img src="images/logo.gif" border="0" alt="Topsite" />
</div>
</div>

</body>
</html>

I have no idea how I can fix this issue and I'd appreciate any help in solving it.
Thanks,
Daniel

Xyzer · 04-16-2006, 07:37 AM

have you tried using the

HTML Code:

<center>blah</center>

tags round them and the

HTML Code:

<div align="center">

?

Daniel Exe · 04-16-2006, 08:23 AM

Well, I'm trying to avoid using the <center> tag as it's an outdated element and I don't quite understand how I could use <div align="center"> to fix my centering issue.

Xyzer · 04-16-2006, 11:25 AM

Well you could also i think, it might be gettin outdated but use:

HTML Code:

<body align="center">

BillyConnite · 04-16-2006, 05:20 PM

What I'd suggest doing is simply making the wrapper use the background image rather than the body.

Try using this css instead of yours:

Code:

body {
	background-color: #EEEEEE;
	color: #6F6F6F;
	font-size: 11pt;
	font-family: arial;
	text-align: center;
	min-width: 698px;
}

#wrapper {
	background-image: url('images/bg.gif');
	background-repeat: repeat-y;
	background-position: center; 
	margin: 0 auto;
	width: 698px;
	height: 900px;
	text-align: center;
	border-style: solid;
	border-color: 6C6C6C;
	border-top-width: 0px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 0px;
}

#header {
	margin: 0 auto;
	width: 698px;
	height: 78px;
	text-align: center;
	float: center;
	border-width: 0px;
	background-image: url('images/header_bg.gif');
	background-repeat: repeat-x;
}

If that doesn't work, could you please upload your files to a webpage so that I can see exactly what you want.
????: NamePros.com http://www.namepros.com/showthread.php?t=187951

Hope it helps.

Thanks,
Rhett.

Daniel Exe · 04-16-2006, 08:36 PM

-Edit: Problem solved -

Well, I managed to fix the centering issue earlier today but my attempt at a 100% height div that stretches based on it's content was a failure. According to the many articles that I read, it's impossible to achieve this except with the use of javascript but the code is still very buggy because of the way some browsers handle some of the code. Seeing as I've only started the style, I'm going to attempt to make some changes to the original design so that it will at least be achievable. However, I've encountered another problem. I'm attempting to absolute position a div within another div. For some reason, instead of beeing positioned in the top left corner of the containing div, it is located in the top left corner of the page.
Here is a screenshot of what's happening:

Here's my code:
????: NamePros.com http://www.namepros.com/showthread.php?t=187951

Code:

html, body {
    height: 100%;
}

body {
	background-color: #EEEEEE;
	color: #6F6F6F;
	font-size: 11pt;
	font-family: arial;
	text-align: center;
	min-width: 698px;
	margin: 0;
	padding: 0;
	text-align: center;
}

.container {
	margin: 0 auto;
	text-align: center;
	width: 760px;
	background: #EEEEEE;
	background-image: url('images/bg.gif');
	background-repeat: repeat-y;
	background-position: center; 
	overflow: visible;
}

.wrapper {
	margin: 0 auto;
	width: 698px;
	text-align: center;
	border-style: solid;
	border-color: 6C6C6C;
	border-top-width: 0px;
	border-left-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	overflow: visible;
}

.header {
	margin: 0;
	padding: 0;
	width: 698px;
	height: 78px;
	text-align: center;
	float: center;
	border-width: 0px;
	background-image: url('images/header_bg.gif');
	background-repeat: repeat-x;
}

/* ------------------------ Navigation styles ------------------------ */

.nav {
	margin: 0;
	width: 476px;
	height: 30px;
	text-align: center;
	border-width: 0px;
	background-image: url('images/nav_bg.gif');
	background-repeat: repeat-x;
	position: absolute;
	left: 0px;
	top: 78px;
}

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>{$list_name} - {$header}</title>
<link rel="stylesheet" type="text/css" media="screen" href="SmoothBlue.css" />
<script language="javascript">
function out(username)
{
  image = new Image();
  image.src= '{$list_url}/index.php?a=out&u=' + username;
}
</script>
</head>
<body>

<div class="container">
<div class="wrapper">

<div class="header">
<img src="images/logo.gif" border="0" alt="Topsite" />
</div>

<div class="nav">a</div>

a<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />a&nbsp;

</div>
</div>

</body>
</html>

I have no clue what could possibly be causing this as I've never encountered this problem before. Any help would be appreciated as always.
????: NamePros.com http://www.namepros.com/showthread.php?t=187951
Thanks,
Daniel

04-16-2006, 07:31 AM	THREAD STARTER #1 (permalink)
Daniel Exe New Member Join Date: Nov 2005 Posts: 4	CSS - centering issue I'm creating a new skin for a php script and I've encountered a problem. (I'm still fairly new to css so I apologise if I my explanation may not be too clear) I positioned a bg image in the center of the page and made it stretch vertically. I then created a div that will center itself - this will contain all the content of the page. Unfortunately, there is an issue with centering in some browsers which I managed to find at http://www.positioniseverything.net/bg-centering.html . This is exactly what I'm experiencing as at times there's a difference of 1 px between the bg and div. Here is a screenshot of what I'd like it to always be and of the issue that sometimes occurs: ????: NamePros.com http://www.namepros.com/programming/187951-css-centering-issue.html Now I read the solution posted at the url above but I'm not sure how I can incorporate it in my layout as I need the background image to stretch vertically to fit the size of the window. Here's my code: Code: body { background-color: #EEEEEE; background-image: url('images/bg.gif'); background-repeat: repeat-y; background-position: center; color: #6F6F6F; font-size: 11pt; font-family: arial; text-align: center; min-width: 698px; } #wrapper { margin: 0 auto; width: 698px; height: 900px; text-align: center; border-style: solid; border-color: 6C6C6C; border-top-width: 0px; border-left-width: 1px; border-right-width: 1px; border-bottom-width: 0px; } #header { margin: 0 auto; width: 698px; height: 78px; text-align: center; float: center; border-width: 0px; background-image: url('images/header_bg.gif'); background-repeat: repeat-x; } Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>{$list_name} - {$header}</title> <link rel="stylesheet" type="text/css" media="screen" href="SmoothBlue.css" /> <script language="javascript"> function out(username) { image = new Image(); image.src= '{$list_url}/index.php?a=out&u=' + username; } </script> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/logo.gif" border="0" alt="Topsite" /> </div> </div> </body> </html> I have no idea how I can fix this issue and I'd appreciate any help in solving it. Thanks, Daniel

04-16-2006, 07:37 AM	#2 (permalink)
Xyzer Senior Member Join Date: Aug 2005 Location: United Kindom Posts: 1,502	have you tried using the HTML Code: <center>blah</center> tags round them and the HTML Code: <div align="center"> ?

04-16-2006, 11:25 AM	#4 (permalink)
Xyzer Senior Member Join Date: Aug 2005 Location: United Kindom Posts: 1,502	Well you could also i think, it might be gettin outdated but use: HTML Code: <body align="center">

04-16-2006, 08:23 AM	THREAD STARTER #3 (permalink)
Daniel Exe New Member Join Date: Nov 2005 Posts: 4	Well, I'm trying to avoid using the <center> tag as it's an outdated element and I don't quite understand how I could use <div align="center"> to fix my centering issue.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)