please tell me what you see!

[greeneye]

the website I've been making looks fine to me but on my clients he says all of the text is like 200px to left. I think I've fixed the problem but as I can't check it on my browsers I can't tell! I used CSS to do it and used a small fix.

Can you guys tell me if the page you are looking at is aligned please? So at least I know if I've solved the problem or need to try again.

http://www.rogerbloxham.co.uk

Thank you!

greeneye

[greeneye]

OK, I can see this is not a popular thread. That's OK.. I promise I am not trying to like sell you anything or get you to review the site, I'm just totally stuck 'cos I can't see the problem.

I've been told by someone the problem is still there. Here is my CSS. Any suggestions?

/*this contains all the other divs on the page*/
#rbbg {
	height: 410px;
	width: 740px;
	position: relative;
	text-align: left;
	margin-top: 9px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;

}
body {
	background-color: #14265E;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 768px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;


}
/*here is an example of one of the divs which goes left on some IE browsers*/
}
#editright {
	height: 284px;
	width: 533px;
	position: absolute;
	left: 461px;
	top: 123px;
	z-index: 5;
	text-align: left;


} /*below is a fix I was told would help and hasn't*/
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}
.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}

}

Thanks for your help in advance

[vgarcia]

The problem is that you're absolutely positioning your main content, but you're doing it relative to the browser rather than to your container, and you're keeping the container in the normal flow. This causes the main content to always be 461px from the left edge of the browser window, while the container auto-centers. Try resizing your browser window and you'll see the effect.

To fix this, set the container element (#rbbg) to "position: relative;" in your CSS. This will make any absolutely positioned elements like your main content position itself within the container. Then tweak the values you have for your absolutely positioned elements (like #editright) so they are where you want them to be.

[greeneye]

The problem is that you're absolutely positioning your main content....
....set the container element (#rbbg) to "position: relative;" in your CSS

The thing is that it already is position:relative.

However that explanation was really helpful and has helped me understand in general positioning a little bit more. But I'm still stuck for now...

[vgarcia]

Okay, if you cut your header image down to just the part above the line and use the following stylesheet you should be in better shape.

body {
	background-color: #14265E;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}
#rbbg {
	width: 740px;
	position: relative;
	text-align: left;
	margin: 9px auto 0;
        background: #deeefe;
        overflow: visible;
}
p {
	font-size: 0.7em;
	color: #14265E;
}
#contact {
	height: 93px;
	width: 291px;
	position: absolute;
	z-index: 2;
	left: 432px;
	top: 22px;


}
a:link {
	color: #0099FF;
	text-decoration: underline;
}
a:visited {
	color: #0099FF;
	text-decoration: underline;
}
a:hover {
	color: #0099FF;
	text-decoration: none;
}
#navbar {
   float: left;
   width: 160px;
   background: #deeefe;
}

#editright {
	width: 575px;
        float: left;
	text-align: left;
}
#editleft {
	width: 307px;
	text-align: right;
}
h1 {
	font-size: 1.4em;
	text-align: right;
	color: #003366;
	font-family: Verdana, Arial, Helvetica, sans-serif;

}
h2 {
	color: #003366;
	font-weight: normal;
	font-size: 1em;
}
li {
	color: #003366;
	font-size: 0.7em;
}
h3 {
	font-size: .8em;
	font-weight: normal;
	color: #003366;
}
h4 {
	font-weight: normal;
	color: #003366;
	text-align: center;
	font-size: .8em;

}
h5 {
	font-weight: normal;
	color: #003366;
	font-size: .7em;
	text-align: right;
}

#editlefter {
	height: 72px;
	width: 249px;
	z-index: 4;

}
h6 {
	font-size: 1.4em;
	color: #14265e;
	text-align: left;
	margin: 0px;
}

You might have a few little things to clean up but this should get you on the right track

[greeneye]

ack.....it looks like someone dropped a bomb in the middle of the page and ran....

Well its friday night, the weather is nice and I'm agonising over this thing in a dark room.....

I will play with your css a bit more but then if I can't work it out, back to the drawing board either over the weekend or monday.

Thanks Vinnie, you are a