CSS - Centering issue

Daniel Exe · Apr 16, 2006

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:

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 · Apr 16, 2006

have you tried using the

HTML:

<center>blah</center>

tags round them and the

HTML:

<div align="center">

?

Daniel Exe · Apr 16, 2006

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 · Apr 16, 2006

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

HTML:

<body align="center">

yeppers · Apr 17, 2006

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.

Hope it helps.

Thanks,
Rhett.

Daniel Exe · Apr 17, 2006

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

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 

</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.
Thanks,
Daniel

CSS - Centering issue

New Member

VIP Member

New Member

VIP Member

VIP Member

New Member

Similar threads

We're social

VisualInnovationServices.com

dotspay.com

IoTFlight.com

champs.si

novirix.com

EarlyDetectionAi.com

eEUR.app

Secondo.com

eGold.digital

Aerospace-Engineering.com

Pinned

Appreciation

Agreement

Answers

Relevance

Reaction

Status

Feeling