To register for an Internet.com membership to receive newsletters and white papers, use the Register button ABOVE.
To participate in the message forums BELOW, click here
PHPBuilder.com  
 

 

Go Back   PHPBuilder.com > Misc Help > ClientSide Technologies

ClientSide Technologies Discuss HTML/CSS/Javascript, and any other client-side technologies, here.

Reply
 
Thread Tools Rating: Thread Rating: 14 votes, 5.00 average. Display Modes
Old 02-23-2006, 09:30 AM   #1
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
Forum moves to left when click on thread

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.
clubamigos is offline   Reply With Quote
Old 02-23-2006, 09:51 AM   #2
thorpe
addicted
 
thorpe's Avatar
 
Join Date: Aug 2004
Location: sydney
Posts: 3,457
This is a markup issue, nothing to do with php let alone php5.
thorpe is offline   Reply With Quote
Old 02-23-2006, 10:08 PM   #3
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
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.....
Quote:
Parse error: syntax error, unexpected '<' in /usr/local/psa/home/vhosts/club-amigos.co.uk/httpdocs/mboard/mboard.php on line 256
bpat1434 is offline   Reply With Quote
Old 02-24-2006, 04:46 AM   #4
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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?
clubamigos is offline   Reply With Quote
Old 02-24-2006, 09:03 AM   #5
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
[edit] nvm... [/edit]

Try in amigos_style.css (or mboard/style.css) adding this line to the BODY declaration:
Code:
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.

Last edited by bpat1434; 02-24-2006 at 09:07 AM.
bpat1434 is offline   Reply With Quote
Old 02-27-2006, 07:36 AM   #6
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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

Last edited by clubamigos; 02-27-2006 at 07:43 AM.
clubamigos is offline   Reply With Quote
Old 02-27-2006, 09:04 AM   #7
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
Nope, it would center the forum too....

And guess what, I can prove it:
Patternet.com
HTML Code:
<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>
Code:
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.....
bpat1434 is offline   Reply With Quote
Old 02-27-2006, 09:34 AM   #8
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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>
clubamigos is offline   Reply With Quote
Old 02-27-2006, 09:44 AM   #9
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
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.
bpat1434 is offline   Reply With Quote
Old 02-27-2006, 09:49 AM   #10
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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 {
colorurple;
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;
}
clubamigos is offline   Reply With Quote
Old 02-27-2006, 12:12 PM   #11
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
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

Last edited by bpat1434; 02-27-2006 at 12:15 PM.
bpat1434 is offline   Reply With Quote
Old 02-27-2006, 12:38 PM   #12
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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
clubamigos is offline   Reply With Quote
Old 02-27-2006, 12:42 PM   #13
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
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.....

Last edited by bpat1434; 02-27-2006 at 12:44 PM.
bpat1434 is offline   Reply With Quote
Old 02-28-2006, 06:21 AM   #14
clubamigos
Junior Member
 
Join Date: Feb 2006
Posts: 7
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 {
colorurple;
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 {
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;
background-color: #ffffff;
text-align:center;
margin:4px 0px 0px 0px;
padding:2px 0px 0px 0px;
}
clubamigos is offline   Reply With Quote
Old 02-28-2006, 09:09 AM   #15
bpat1434
NMaOtBG
 
bpat1434's Avatar
 
Join Date: Oct 2004
Location: Around 255.255.255.0
Posts: 8,093
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.

Quote:
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.
bpat1434 is offline   Reply With Quote
Reply

Bookmarks


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -4. The time now is 12:41 PM.






Acceptable Use Policy

internet.comMediabistrojusttechjobs.comGraphics.com

WebMediaBrands Corporate Info


Advertise | Newsletters | Feedback | Submit News

Legal Notices | Licensing | Permissions | Privacy Policy


Powered by vBulletin® Version 3.7.2
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.