CSS Presentation problems...possible conflict between CSS?

[Rufanuf]

Script URL: http://www.siamfishingtours.com/forum/mboard.php
Version of script:Latest (1.6?)
Hosting company:IX Webhosting
URL of phpinfo.php:http://www.siamfishingtours.com/forum/phpinfo.php
URL of session_test.php:
What terms did you try when SEARCHING for a solution: Headers, Footers, Presentation, CSS.

Write your message below:

Hi,

I had managed to successfully "embed" my mboard into my website, until I recently changed some aspects of my websites presentation and completely rewrote my CSS files.

It seems now my new CSS file is somehow conflicting with mboards own style.css file. Ive tried breaking my orignal html code in numerous places to create the header and footer txt files, but no matter what I do the presentation of the page breaks when I upload, as can be seen now when you visit my mboard url.

Can someone confirm my suspicion that a conflict is being created between the stylesheets???

If not, is there a simple fix? Am I over looking something silly?

Thanks

Ruf
Siam Fishing Tours

[Henrie]

In your normal pages your text is inside <div id="preamble"> .... </div> which is followed by <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>

In your mboard page your mboard code is not inside <div id="preamble"> .... </div> But is inserted after <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>.

You should change your mboard page so that the mboard text is inside <div id="preamble"> .... </div>

Greetings,
Henrie

[Rufanuf]

In your normal pages your text is inside <div id="preamble"> .... </div> which is followed by <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>

In your mboard page your mboard code is not inside <div id="preamble"> .... </div> But is inserted after <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>.

You should change your mboard page so that the mboard text is inside <div id="preamble"> .... </div>

Greetings,
Henrie

Hi Henrie, thanks for your input I will try this again, but in fact the reason I changed it is becuase it was not working in that div....let me try again and see what happens!

Thanks

Ruf

[Rufanuf]

In your normal pages your text is inside <div id="preamble"> .... </div> which is followed by <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>

In your mboard page your mboard code is not inside <div id="preamble"> .... </div> But is inserted after <div id="supportingText"> .... </div> and <div id="linkList"> .... </div>.

You should change your mboard page so that the mboard text is inside <div id="preamble"> .... </div>

Greetings,
Henrie

Hi Henrie, thanks for your input I will try this again, but in fact the reason I changed it is becuase it was not working in that div....let me try again and see what happens!

Thanks

Ruf

Have changed the header and footer so it breaks at the "preamble" div, (header ends at <div="preamble">) footer starts with </div>...onwards.

strange!
but the result appears to be the same.

[Henrie]

Hi Rufanuf

strange!
but the result appears to be the same.

To me the result is not the same (in Firefox)

First the mboard panel appeared below everyting else, now it appears at the right place but the linklist hovers over it.
But in IE it is still the same.

I'm afraid I can't help you much more. I do not how exactly how your pages are made up and I do not have time to figure it out.

I can just say, look at the source code of the page from your browser. Compare it to a page that works. See what is different and try to change that.

Greetings,
Henrie

[Rufanuf]

Hi Rufanuf

strange!
but the result appears to be the same.

To me the result is not the same (in Firefox)

First the mboard panel appeared below everyting else, now it appears at the right place but the linklist hovers over it.
But in IE it is still the same.

I'm afraid I can't help you much more. I do not how exactly how your pages are made up and I do not have time to figure it out.

I can just say, look at the source code of the page from your browser. Compare it to a page that works. See what is different and try to change that.

Greetings,
Henrie

Hi,

Thanks for comments Henrie.

I looked at he source code, and one thing has become apparent. I dont understand PHP code, but if my observation is correct the php document pulls in various code to create an "html" document. What I noticed is that the code ends up creating TWO sets of header information, so when you view the source on the page it looks like this,

"<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta content="text/html; charset=windows-1250">
<link href="style.css" type="text/css" rel="stylesheet">
<script language="Javascript" src="javascript.js" type="text/javascript"><!--
//-->
</script>
</head>
<body>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name=

........and so on"

I learned very early on with CSS that sometimes it has issues with different document types (ie it has functionality issues between for example XHTML1.0 Strict and HTML 4.0 Transitional for example) I read somewhere that IE views 4.0 as "quirks modes" people with more knowledge than me often use this as a hack for solving certain problems as I understand it...but in this case I wonder if it is what is causing the problem???

Could the browser be taking the first header as final, reading the page as HTML4 and not liking it????

If so, does the php documeny have to create a page as HTML 4.0 Transitional...can I make it create and XHTML 1.0 Page instead????


Thought you might find this an interesting possible cuase for the problem? I might be very wrong though!


Thanks

Ruf

[Rufanuf]

I Just changed all references to html4 in the various php documents that make up the mboard to xhtml strict....but wierdly....when you view the source code it is still creating a page with an html 4header??? dont really understand this.

[Henrie]

In my browser there is no html4 header. Try reloading your page with Ctrl+F5 instead of just F5 to reload the page without using cached pages.

In order to change the header from html4 to xhtml change the following:

For MBoard 1.3
Open file mboard.php
For the new created messages change line 342

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

to

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

In the lines after this code you can add your own metatags and links to your own stylesheet.
Be aware that this code is 'hard written' in the message files and that existing messages do not change when you change code in the mboard.php or header.txt or footer.txt files.

And for the main page change line 743

Code: Select all

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

to

Code: Select all

echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

I see you have already done this.
Now you can add your own meta tags and link to your stylesheet in the lines following this code.

You should remove the following code from your header.txt file

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="Jules Fernandez" />
	<meta name="keywords" content="fishing in thailand, ... , top water fishing" />
	<meta name="description" content="Fishing in Thailand predator, ... , These snag free venues are made for the predator angler in Thailand." />
	<meta name="robots" content="all" />

	<title>FISHING HOLIDAYS THAILAND. A fishing holiday in Thailand, fishing for Giant Fish!</title>


	<!-- to correct the unsightly Flash of Unstyled Content. http://www.bluerobot.com/web/css/fouc.asp -->
	<script type="text/javascript"></script>
	
	<link rel="stylesheet" type="text/css" href="newstylesheet.css" />	
</head>

<body>

I think also think the MBoard is to wide (I think this is the cause it is display below everything else in IE).
The <table> and <hr> width is hardcoded in the mboard.php file with a width of 95%. To solve this open mboard.php and replace all instances of width="95%" (found 3 times) by for example width="80%"


Greetings,
Henrie