Forum moves to left when click on thread

clubamigos

For some odd reason the forum moves to the left when l click on a thread.
This only happens in IE. I have tried the junkyard forum but no luck.
The guestbook is fine, but for some odd reason the forum is not being viewed correctly when l click on a thread.

http://www.club-amigos.co.uk/mboard/mboard.php

Any help in this matter would be appreciate.

thorpe

This is a markup issue, nothing to do with php let alone php5.

bpat1434

That's why he posted in Client-Side technologies thorpe... sheesh... (lol, j/k).

Would love to help, except that you've got a parse error.....

Parse error: syntax error, unexpected '<' in /usr/local/psa/home/vhosts/club-amigos.co.uk/httpdocs/mboard/mboard.php on line 256

clubamigos

This error has not been resolved. Do you have any ideas as to what is causing the alignment to the left when you click on a thread in IE?

bpat1434

[edit] nvm... [/edit]

Try in amigos_style.css (or mboard/style.css) adding this line to the BODY declaration:

text-align: center;

I notice you don't do that, and you kind of have to in order to get the page to center.... otherwise it always aligns left.

And the page doesn't move left for me, it just starts to the left and doesn't move at all.

clubamigos

This would center the text and not the forum.

Maybe l did not explain myself clearly enough, what l would like to do is to get the forum aligned to the centre and not aligned to the left.
The text alignement is fine.

If you click on the forum you will see what l mean:

forum

bpat1434

Nope, it would center the forum too....

And guess what, I can prove it:
Patternet.com

<div id="wrap">
	<div id="header">
		<p class="curpage">

		909 Walker Ave • 2414A • Baltimore, MD 21228<br />
		<b>Phone:</b> 410.800.5163 | <b>Fax:</b> 866.579.4934
	</p>
	<span id="date"><!--#include virtual="incs/date.php" --></span>
</div>

body{
    text-align: center;
	padding: 0;
	margin: 0;
	background: #fff url("../images/background_tiled.jpg") repeat-x scroll top left;
}
div#wrap{
    width: 760px;
	background: none;
	padding: 0;
	margin: 0 auto;
}

div#header{
	width: 760px;
	height: 185px;
	background: transparent url('../images/header.gif') no-repeat scroll top center;
	margin: 0;
	padding: 0;
}

#header span#date{
	float: right;
	width: 120px;
	margin: 78px 2px 5px auto;
	padding: 0;
	background: none;

font-size: 12px;
font-variant: small-caps;
font: "Courier New", Courier, sans-serif;
font-weight: bold;
}

#header p.curpage{
	width: 400px;
	margin: 120px auto 0 -140px;
	padding: 0;
	position: absolute;

font-size: 14px;
color: #000;
font-variant: small-caps;
font-weight: normal;
}

Even thought it seems like it would center the text, it centers anything. And I am willing to be that if you try it, you'd notice a difference.

If you wnat the easy route, you could always search for a CSS layout generator online. Compare it with your code.....

clubamigos

I am a bit confused where the changes need to made to the html, this is the header file, can you tell me where l need to make the changes:

<title>Useful links</title>
<meta name="keywords" content="social clubs southampton,clubs southampton,single events hampshire,new friends hampshire,new friends southampton,looking new friends,meeting new people,social clubs south coast,looking friendship uk,social clubs UK">
<meta name="description" content="A social club for people to go out enjoy themselves and try new activites">
<meta name="robots" content="index,follow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="http://club-amigos.co.uk/forum_style.css" rel="stylesheet" type="text/css" />
<link href="http://club-amigos.co.uk/mboard/style.css" rel="stylesheet" type="text/css" />

<div id="wrapper">
<div id="header"></div>
<div id="navcontainer">
<ul>
<li> <a href="http://www.club-amigos.co.uk/index.htm">Home</a> </li>
<li> <a href="http://www.club-amigos.co.uk/faq.htm">FAQ's</a> </li>
<li> <a href="http://www.club-amigos.co.uk/links.htm">Links</a> </li>
<li> <a href="http://www.club-amigos.co.uk/feb.html">Calendar</a></li>
<li> <a href="http://www.club-amigos.co.uk/mboard/mboard.php">Forum</a></li>
<li> <a href="http://www.club-amigos.co.uk/guestbook/gbook.php">Guestbook</a></li>
<li> <a href="http://www.club-amigos.co.uk/contact.html" id="last">Contact</A>
</ul>
</div>
<div id="content">
<div id="rightcol">
</div>
<h1>Forum</h1>

bpat1434

It's not in the header, it's in the css file. In the css, under the body{} declaration, you need to make the body text-align: center; this way, everything in the body-tags will be centered, unless you specifically justify it to the left. The wrapper should then have the margin set to:
margin: top & bottom auto;

That will ensure your forum is centered.

clubamigos

I tried this but no luck, this is the css:

html, body {
margin:0;
padding:0;
width: auto;
text-align: center;
}
body {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:12px;
color:#333;
background-color:#e9eef4;
}
#wrapper {
text-align:left;
border:1px solid #66635c;
margin:5px auto;
background-repeat:repeat-y;
margin-top auto;
margin-bottom auto;

}

#header {
background-image:url(http://clubamigos.port5.com/club_amigo_logo.jpg);
background-repeat:no-repeat;
height:107px;
}
a:link {
color:blue;
background-color:inherit;
text-decoration:none;
}
a:visited {
color:purple;
text-decoration:none;
}
a:hover {
color:red;
background-color:inherit;
}
a:active {
color:red;
background-color:inherit;
}
#content {
color:#000;
background-color:#fff;
}
#content p {
margin:0 60px 9px 10px;
font-family:verdana,arial,helvetica,sans-serif;
}

h1 {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:17px;
text-align:center;
padding-top:2px;
padding-bottom:0px;
margin-top:0;
}

.italic {font-style:italic}

p{line-height: 1.8em; }

#image_container {
margin:35px 0 25px 0;
text-align:center;
}

#navcontainer {
margin-top:0;
}
#navcontainer ul {
list-style:none;
margin:0 0 0 0px; / adjust left margin to suit /
padding:0;
text-align:center;
}
#navcontainer li {
display:block;
float:left;
}
#navcontainer li a {
border-right:#84979c 1px solid;
border-top:#84979c 1px solid;
border-bottom:#84979c 1px solid;
display:block;
background-color:#deffff;
width:94px;
color:#444;
text-decoration:none;
text-align:center;
padding-top:2px;
padding-bottom:2px;
}

#navcontainer #last {

BORDER-RIGHT: none;

WIDTH: 96px;

overflow: hidden;

}
#navcontainer ul li a:hover {
color:#000;
background-color:#fcc;
}
#navcontainer a:active {
background-color:#ffecd2;
color:#fff;
}

#footerhome {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:10px;
border-top:1px solid #000;
text-align:center;
margin:60px 0px 0px 0px;
padding:6px 0px 5px 0px;
}

#footer {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:1px;
color:#ffffff;
text-align:center;
margin:4px 0px 0px 0px;
padding:2px 0px 0px 0px;
}

bpat1434

Malformed CSS... validate it....
hint: look in the wrapper
CSS Validator
Your Results

Results:
Errors
* Line: 18 Context : #wrapper
Invalid number : margin-top Parse Error - auto

* Line: 19 Context : #wrapper
  Invalid number : margin-bottom Parse Error - auto

* Line: 34 Context : a:visited
  Parse Error - colorurple

Warnings
Line : 130 (Level : 1) Same colors for color and background-color in two contexts #content and #footer
Line : 130 (Level : 1) You have no background-color with your color : #footer

clubamigos

I have managed to resolve the CSS down to these errors, but need some assistance / guideance.
Please can you help.

* Line : 17 (Level : 2) Redefinition of margin-top : #wrapper
* Line : 18 (Level : 2) Redefinition of margin-bottom : #wrapper
* Line : 132 (Level : 1) Same colors for background-color and color : #footer

When these errors are resolved should this resolve the problem of forum not moving to left , as just checked and it appears to be worse!

forum

bpat1434

The errors are pretty self-explanatory.... if you remove the margin-top and margin-bottom declarations in the #wrapper div, you'll make them go away. If you define margin, you don't need to define margin-top & margin-bottom. You can do it in one line:

margin: top, right, bottom, left;
margin: top & bottom, left & right;

Those are the two ways to do it (it's short-hand CSS). Now, the colors item is saying that you've got two of the same colors used as a text-color & a background color. It's saying that it may mix and you won't be able to read your text. That's all. You can ignore this, or fix it.

Another thing to think about:
Why do you have 3 different style-sheets being used on one page? You can most likely consolidate them into one style-sheet. If you include the three, and you edit the one that is included first, the subsequent includes actually trump the previous one(s). So just 'cuz you fix it in form_style.css, doesn't mean that it's fixed in your 3 other style-sheets.....

clubamigos

I have done as you mentioned and l get the following error.

URI : file://localhost/forum_style.css

* Line: 2 Context : html, body

  Invalid number : margin , is an incorrect operator : top,right,bottom,left

I require the text-colour to be the same as the background-colour. I could not find another solution to the problem.

I do reaslise l am using 2 style sheets for the forum. One designed by the writer of the forum , the other designed by the person who wrote the forum.
Did not know l was using a third, do you mean l am using three different style sheets for different pages?
I do know this, reason being l am struggling to get one style sheet for each page.
This is something l will work on later.

This is the style sheet l am using:

html, body {
margin: top, right, bottom, left;
padding:0;
text-align: center;
}
body {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:12px;
color:#333;
background-color:#e9eef4;
}
#wrapper {
text-align:left;
border:1px solid #66635c;
margin:5px auto;
background-repeat:repeat-y;
width: auto;

}

#header {
background-image:url(http://clubamigos.port5.com/club_amigo_logo.jpg);
background-repeat:no-repeat;
height:107px;
}
a:link {
color:blue;
background-color:inherit;
text-decoration:none;
}
a:visited {
color:purple;
background-color:inherit;
text-decoration:none;
}
a:hover {
color:red;
background-color:inherit;
}
a:active {
color:red;
background-color:inherit;
}
#content {
color:#000;
background-color:#fff;
}
#content p {
margin:0 60px 9px 10px;
font-family:verdana,arial,helvetica,sans-serif;
}

h1 {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:17px;
text-align:center;
padding-top:2px;
padding-bottom:0px;
margin-top:0;
}

.italic {font-style:italic}

p{line-height: 1.8em; }

#image_container {
margin:35px 0 25px 0;
text-align:center;
}

#navcontainer #last {

BORDER-RIGHT: none;

WIDTH: 96px;

overflow: hidden;

}
#navcontainer ul li a:hover {
color:#000;
background-color:#fcc;
}
#navcontainer a:active {
background-color:#ffecd2;
color:#fff;
}

#footerhome {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:10px;
border-top:1px solid #000;
text-align:center;
margin:60px 0px 0px 0px;
padding:6px 0px 5px 0px;
}

#footer {
font-family:"lucida sans unicode",verdana,sans-serif;
font-size:1px;
color:#ffffff;
background-color: #ffffff;
text-align:center;
margin:4px 0px 0px 0px;
padding:2px 0px 0px 0px;
}

bpat1434

No no no no no no no......

The reason the words (top, right, bottom, left) were in italics, is because they were guides. They were supposed to be replaced by numbers or keywords.

One designed by the writer of the forum , the other designed by the person who wrote the forum.

Is there a difference? Or are you saying: one person who wrote the style of the forum, and the other guy wrote the actual forum.

You need to get rid of one or the other, or consolidate them. That's pretty much the only way you can guarantee that one style isn't overriding the other.