# Getting my site browser independent



## WhiteSuburban (Jun 20, 2012)

I have gotten my site working like I want, but I stumbled into this issue.
Google Chrome is the only browser that functions correctly on my site.
Firefox fails to text wrap the embed text document
Internet Explorer does not load the embed page.
So, I need to find out how to fix these issues.
These pages are the problem pages.
The current code of the Index.html is
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
   <link rel="shortcut icon" href="favicon.ico" >
   <link rel="icon" type="image/gif" href="animated_favicon1.gif" >
</head>
<object>
<center>
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
	newwindow=window.open(url,'name','height=600,width=600');
	if (window.focus) {newwindow.focus()}
	return false;
}


// -->
</script>
<title>JarrodMaddy's Fur Afinity Text Hub</title>
<BODY>
<FONT FACE="arial">
<img src="Avatarsmall.png" alt="JarrodMaddy's Avatar" style="border:5px solid darkblue"/>
<h1>Welcome to JarrodMaddy's Fur Afinity Text Hub</h1>
<h6>If you can't view everything correctly, I suggest using Chrome.</h6>
<object data=https://dl.dropbox.com/u/17823794/Stories/List.html width="600" height="600"> <embed src=https://dl.dropbox.com/u/17823794/Stories/List.html width="600" height="400"> </embed> The list is unavailable, please reload. </object>
<a href="https://dl.dropbox.com/u/17823794/Stories/List.html" onclick="return popitup('https://dl.dropbox.com/u/17823794/Stories/List.html')"
><br />Open the list in a popup<br /></a>
</FONT>
<param name="autostart" value="true">
<param name="src" value="websong.mp3">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed src="https://dl.dropbox.com/u/17823794/Stories/websong3.mp3" controller="true" autoplay="true" autostart="True" type="audio/mp3" />
</center>
</object>
  </body>
</BODY>
</HTML>
-
text.php is
-
<html>
	<head>
	<?php
$path = $_GET['textdoc'];
$file = basename($path);         // $file is set to "index.php"
$file = basename($path, ".txt"); // $file is set to "index"
?><center>
		<style type="text/css">
		body{
			text-align: center; /* Set the text to center */
			width: 100%; /* set the div element to 100% width, so the child elements (object, embed etc), have a width to align themselves on */
		}
		object, embed{
			width: 530px; /* set the width and height of the elements */
			height: 500px;
			margin-left: auto; /* Set the margin left and right of the element to auto, so it centers. */
			margin-right: auto;
		}
		a{
			font-family:arial; /* Set the font in the a tag */
			margin-left: auto;
			margin-right: auto;
		}
		</style>
	</head>
	<body>
		<a href="https://dl.dropbox.com/u/17823794/Stories/List.html">Go back to the list</a><br />
		<h5>Current file loaded "<?php echo $file; ?>"</h5>
		<div style="width:530px;border:6px ridge darkblue;"><object data="<?php echo $_GET['textdoc'];?>">
			<embed src="<?php echo $_GET['textdoc'];?>"> </embed>
			Error: Embedded data could not be displayed.</div>
		</object>
		</center>
	</body>
</html>
-
You can visit my site at http://jarrodmaddyhub.clanteam.com/


----------



## Runefox (Jun 21, 2012)

You could try switching away from HTML 4.0 Transitional and use XHTML 1.0 Strict instead. This should provide a lot tighter conformity across browsers overall. That said, the _embed_ tag is slightly weird to be using in this context... You may have to manually specify a height and width in-line to make this work properly. A better solution would be an _iframe_, or to retrieve and echo the document in-line from PHP.

The in-line PHP method can be accomplished like this:

<div style="width:530px;border:6px ridge darkblue;"><?php file_get_contents($_GET['textdoc']);?></div>

Though you'd probably want to make that a function and have it fail gracefully if there is no GET variable present.

Also, the _embed_ tag can be closed by adding " /" (space and slash) prior to > rather than needing a separate closing tag.

... Autoplaying background music? Seriously...?


----------



## Tissemand (Jun 21, 2012)

1. Use CSS Reset
2. Make sure your page conforms to the w3c validator: http://validator.w3.org/
3. Don't use background sound
4. If you're gonna use PHP, be sure to sanitize the input, e.g. stripping certain characters or replacing ones in files, and also check for XSS
5. Use a stylesheet (find a tutorial on CSS)


----------



## Aden (Jun 21, 2012)

WhiteSuburban said:


> <param name="autostart" value="true">
> <param name="src" value="websong.mp3">
> <param name="autoplay" value="true">



Fuck it, I'm out


----------



## ArielMT (Jun 21, 2012)

Write an HTML document that passes validation first, then and only then alter it as needed to look right in most Web browsers.

For starters, I'm not aware of any elements that can be children of the <HTML> element except <HEAD> and <BODY>.  Move or ditch those extra elements.

Next, you're completely abusing the <OBJECT> and <EMBED> elements.  If you want to embed a text or HTML page within another HTML page, then you want to use inline frames (<IFRAME>), not objects.  Web browsers in general, and Internet Explorer in particular, have always been queer with objects.

Finally, the source documents you're embedding are plain text documents with no line breaks except at paragraph ends.  Web browsers are not required to word-wrap plain text documents, and many assume you want the original line wrapping preserved, so they don't word wrap at all and just show a horizontal scrollbar instead.  If you want dynamic word wrapping, then either convert the source from plain text to HTML, or read in the plain text source and write out HTML to the browser.

You should be aware that I'm biting my tongue on all the design decisions leading to a working but unpleasant browsing experience.  The auto-playing sound file, already touched upon by another poster, is simply the most immediately obvious offender.


----------



## Elim Garak (Jun 21, 2012)

This is the worst piece of code I have laid my eyes on in a while.
I know someone mentioned this first, AUTO PLAYING SOUNDS OH GOD I WANT TO STAB YOU WITH A RUSTY SPOON.
Auto playing sounds is what everyone hates when browsing a website, seriously. If you do that, a person will only visit your site once, and closing the windows asap when the music starts.


----------



## WhiteSuburban (Jun 21, 2012)

To be honest, my site is held together by duct tape and glue, which I have over stated.


ArielMT said:


> Write an HTML document that passes validation first, then and only then alter it as needed to look right in most Web browsers.
> 
> For starters, I'm not aware of any elements that can be children of the <HTML> element except <HEAD> and <BODY>.  Move or ditch those extra elements.
> 
> ...


I heard IFRAME has some issues, but the objects and embed are from scraps of code, which explains the mess, but my most concern is the text wrap and object not loading. Also, I presume changing the name the end of the .txt to .html will just, simply put, like a text file once more. the "<IFRAME>" is something I can replace embed with, correct?
Update, IFRAME just screws the embed page up. Oh, the <object> tag must be changed, I can be a dumb ass sometimes.


Elim Garak said:


> This is the worst piece of code I have laid my eyes on in a while.
> I know someone mentioned this first, AUTO PLAYING SOUNDS OH GOD I WANT TO STAB YOU WITH A RUSTY SPOON.
> Auto playing sounds is what everyone hates when browsing a website, seriously. If you do that, a person will only visit your site once, and closing the windows asap when the music starts.


At least it shows the controller, but I guess I can set autoplay to false, yet I could just remove the param, but I will keep it there just in case.


----------



## WhiteSuburban (Jun 21, 2012)

Also, your talking to a guy who is unsure then he will ever be with coding.
Excluding Lua, I made a decent script for ComputerCraft (Minecraft) and by god it looked nice. Only thing bad about it is when you quit, it forces an error to occur in order to end the program.


----------



## WhiteSuburban (Jun 21, 2012)

Well, sorry if you have a plugin that doesn't support the autoplay function being false.
Update: I could cause the music to be played in QuickTime, but I prefer if the file is loaded by the persons preferred plugin, leaving out the big trouble of missing plugins.
I will test it.


----------



## WhiteSuburban (Jun 21, 2012)

New problem, when I updated text.php with the IFRAME, it is now having trouble opening the html file. The 404 is coming from DropBox, so it is getting on DropBox and trying to request the text document, or better referred as our html files that were text files. It also seems that the requested URL might be correct, because of the little message telling you what you have opened.


----------



## Elim Garak (Jun 21, 2012)

Please, learn to multiquote or edit your posts.
My browser supports that function but you have it set to true instead of false.
I am not really a webdesigner I would like to add, but I do use PHP as a barrier between my LSL(Second Life) scripts/objects to my Mysql database.
However HTML itself is easy as fuck.


----------



## WhiteSuburban (Jun 21, 2012)

Nevermind, I didn't surround <?php echo $_GET['textdoc'];?> with qoutes, so it thought the % in the URL meant that is was going to do an extra command.


Elim Garak said:


> Please, learn to multiquote or edit your posts.
> My browser supports that function but you have it set to true instead of false.
> I am not really a webdesigner I would like to add, but I do use PHP as a barrier between my LSL(Second Life) scripts/objects to my Mysql database.
> However HTML itself is easy as fuck.


I changed the auto-play to false, but it seems to defy that and run anyways, well on other plugins. I also tried to make it run the QuickTime plugin, which I didn't have, but it didn't say, "This program needs to install "QuickTime" blah blah blah" however, excluding Internet Explorer.

Installed QuickTime, IE is the only one that follows the QuickTime object request.

Ok, auto-play is being followed, but Chrome goes "Fuck the police." and plays it anyways.

Removed half of the errors, but I'm pretty content of the site for now. Everything is no longer being a bitch.
Chrome, as always, works, except with the autoplay param.
Firefox now text wraps.
IE is able to browse correctly.


----------



## Elim Garak (Jun 21, 2012)

It's because well, embedding an audio file isn't really standardized, thus each browser has a different interpretation on what to run and what parameters to follow.

However, this exists: http://www.w3schools.com/html5/tag_audio.asp It was made to solve the problem you have.
Downside is IE8 isn't supported because Microsoft didn't implement it. However, if you use the internet you should be on a HTML5 compliant browser, Windows Vista and up support IE9 those users have no excuse to not be on it.
Windows XP users should upgrade to Windows 7 imo. 
However, as your demographic seems to be furries, they generally use Firefox or Chrome, which have full support for it and are superior in every way.
I generally recommend just not showing it for IE8 users or detect that browser with the user agent and display the legacy code and or a banner saying they should use an up to date browser.
IE has been a fucking pain in the ass for developers for ages.

http://www.w3schools.com/browsers/browsers_stats.asp Stats. Keep in mind that Furries tend to be younger and more tech savvy thus in theory IE would be even less used in that circle.


----------



## ArielMT (Jun 21, 2012)

WhiteSuburban said:


> I heard IFRAME has some issues,



The iframe element has been very well supported for quite some time.



WhiteSuburban said:


> but the objects and embed are from scraps of code, which explains the mess,



My impression upon learning this is that you are cargo culting.  I should've guessed as much by seeing improper nesting in the tag soup: You close the body element after closing an object element, yet you open an object element before opening the body element.

I suggest learning HTML the right way, not trying to stumble upon the magic incantation that will summon the magic cargo planes of the gods result in Web pages working the way you want.

On that note, if what you want to do can only be done by a script running on the Web server, you should learn a programming language as well.  I advise against PHP, especially as a first language, because it encourages a litany of bad programming practices and concepts (in addition to security concerns that make PHP virtually alone in the world as a language in which "Hello World" is exploitable).  Hosts supporting PHP scripts almost certainly support languages like Perl, Python, and Ruby as well.



WhiteSuburban said:


> but my most concern is the text wrap and object not loading.



There's nothing to be done about the text wrap without writing a program to safely translate the source text to HTML, or simply saving the document in HTML format to begin with.  (The advantage of the latter is that you won't need to go through all these convoluted tricks to get a story to load: just link to it like any other HTML document on the Web.



WhiteSuburban said:


> Also, I presume changing the name the end of the .txt to .html will just, simply put, like a text file once more.



Correct.  Changing the name of a file (and the extension is part of the name) does not magically change its contents.  If the Web server it's hosted on is sane, it won't change the MIME type given by the server either.



WhiteSuburban said:


> the "<IFRAME>" is something I can replace embed with, correct?



The object/embed tag soup, yes.



WhiteSuburban said:


> At least it shows the controller, but I guess I can set autoplay to false, yet I could just remove the param, but I will keep it there just in case.



It's a lot better if you didn't have any embedded media at all, especially something as trivial as a song that isn't essential to the main content.  Pages should never talk, sing, or make music.  The only exceptions even half-way reasonable are pages clearly for the purpose, like YouTube, SoundCloud, and online radio stations.  Although this is an opinion, it is widely accepted as good 'Netiquette.


Also, completely unrelated but good 'Netiquette as well, please please _please_ stop triple-posting.  It's considered spam so much here that it's actually an infractable offense.


----------



## Saiko (Jun 21, 2012)

Wait, why PHP instead of just HTML, CSS, and Javascript? At a glance, this seems to be a case where PHP only adds another layer of complexity. :/


----------



## ArielMT (Jun 21, 2012)

Saiko said:


> Wait, why PHP instead of just HTML, CSS, and Javascript? At a glance, this seems to be a case where PHP only adds another layer of complexity. :/



He's using PHP to read the name of the text file and extract its title, as well as to embed its contents Inception-style within an object, but untranslated from its original plain-text form..

And you're right, it is only adding yet another layer of complexity.


Edit:




ArielMT said:


> Correct.  Changing the name of a file (and the extension is part of the name) does not magically change its contents.  If the Web server it's hosted on is sane, it won't change the MIME type given by the server either.



I stand corrected about this.  A text file renamed to .html may cause the server to send it as MIME type "text/html" which will cause the Web browser to render it as HTML.  But without any HTML markup, it'll be rendered in quirks mode, and absolutely none of the whitespace formatting will be preserved.  Word-wrapping will happen, but there won't be any line breaks.


----------



## Saiko (Jun 21, 2012)

ArielMT said:


> He's using PHP to read the name of the text file and extract its title, as well as to embed its contents Inception-style within an object, but untranslated from its original plain-text form..
> 
> And you're right, it is only adding yet another layer of complexity.


Doesn't Javascript have a function for reading a file name and another for reading it's contents? I only have surface experience with that particular language, but they're standard functions in others such as Java.

EDIT: I don't know why I don't just look this up on w3. lol


----------



## ArielMT (Jun 21, 2012)

My previous reply has an important edit on it.



Saiko said:


> Doesn't Javascript have a function for reading a file name and another for reading it's contents? I only have surface experience with that particular language, but they're standard functions in others such as Java.
> 
> EDIT: I don't know why I don't just look this up on w3. lol



The problem with languages such as Java and JavaScript, in the context of Web working, is that their program code most typically runs in the user agent (the Web browser), not on the server.  To use data on the server, the code must do icky stuff like SOAP or AJAX.  The only exceptions are server things like J2EE for Java and Node.js for JavaScript, neither of which are guaranteed to be standard on Web hosts.


----------



## WhiteSuburban (Jun 21, 2012)

ArielMT said:


> I stand corrected about this.  A text file renamed to .html may cause the server to send it as MIME type "text/html" which will cause the Web browser to render it as HTML.  But without any HTML markup, it'll be rendered in quirks mode, and absolutely none of the whitespace formatting will be preserved.  Word-wrapping will happen, but there won't be any line breaks.


I have changed the .txt files to .html and they run as fine, the only thing changed was the font.
Edit: Yeah, it did remove the break lines. Be nice there was a way to fix easily. Sure I can add <br /> but that would be time consuming


Saiko said:


> Doesn't Javascript have a function for reading a file name and another for reading it's contents? I only have surface experience with that particular language, but they're standard functions in others such as Java.
> 
> EDIT: I don't know why I don't just look this up on w3. lol


I'm not reading the file, I'm changing the requested address on the Embed page to where if the Param textdoc is a valid address, it will load the page in the embed page.
Example, if you loaded [noparse]http://jarrodmaddyhub.clanteam.com/text.php?textdoc=https://dl.dropbox.com/u/17823794/Jarrod.html[/noparse], it would load the page text.php and tell the embed page code to open https://dl.dropbox.com/u/17823794/Jarrod.html, the reason why the text files is not hosted on the web server is because if I did, I would have to download the file, edit, reupload if I want to do a edit, also the same goes with list.html. Using dropbox just allows me to edit my file without doing a thing.


----------



## ArielMT (Jun 21, 2012)

WhiteSuburban said:


> I have changed the .txt files to .html and they run as fine, the only thing changed was the font.
> Edit: Yeah, it did remove the break lines. Be nice there was a way to fix easily. Sure I can add <br /> but that would be time consuming



The quicker dirty way is to load the plain text in an editor that does both text and HTML, then save it as HTML.  Word processors can do it, but that's overkill on a few levels.


----------



## WhiteSuburban (Jun 22, 2012)

Site running at optimal, with a slight added code...
http://jarrodmaddyhub.clanteam.com/


----------



## Runefox (Jun 22, 2012)

All this when you could be saving yourself a huge headache with a single line of code that I mentioned in the very first reply.

<div style="width:530px;border:6px ridge darkblue;"><?php file_get_contents($_GET['textdoc']);?></div>

That would work so much better than any of this embed or iframe foolishness, and there's no reason not to use PHP for this one, since you're already parsing it with PHP to begin with. As a bonus, the client has one less file to download before the page renders.


----------



## meh_is_all (Jun 22, 2012)

You should call a computer Guy.


----------



## Duality Jack (Jun 23, 2012)

Don't use autoplay. For the love of god do not use autoplay.


----------



## WhiteSuburban (Jun 23, 2012)

Lead Jester said:


> Don't use autoplay. For the love of god do not use autoplay.


Sorry, I wasn't arsed to update the code on the page. On the running page, autorun is false, however Google Chrome goes "Fuck Da Police" and plays it anyhow.


----------



## Duality Jack (Jun 23, 2012)

WhiteSuburban said:


> Sorry, I wasn't arsed to update the code on the page. On the running page, autorun is false, however Google Chrome goes "Fuck Da Police" and plays it anyhow.


At least you did that. Also take care with audio streaming it quickly tends to bring your site to its bandwidth cap if it has one.


----------



## Elim Garak (Jun 23, 2012)

Use the audio tag instead of embedding a file without any standardization.


----------



## CerbrusNL (Jun 23, 2012)

WhiteSuburban said:


> Sorry, I wasn't arsed to update the code on the page. On the running page, autorun is false, however Google Chrome goes "Fuck Da Police" and plays it anyhow.



Then how about removing the "autoplay" property altogether, at least?


----------



## WhiteSuburban (Jun 23, 2012)

I recommend seeing the live page for the latest.


----------



## WhiteSuburban (Jun 23, 2012)

CerbrusNL said:


> Then how about removing the "autoplay" property altogether, at least?


Its just to be sure it won't autoplay.
Plus, just one useless line(s) ain't the end of the world.


----------



## ArielMT (Jun 24, 2012)

WhiteSuburban said:


> Its just to be sure it won't autoplay.
> Plus, just one useless line(s) ain't the end of the world.



Perhaps not, but it's enough to drive everyone away and forever tarnish your name as anything resembling a competent designer or webmaster.

I am actually referring to the embedded plugin media itself, not necessarily any one browser's want to autoplay it.  Also, it's one of the things I'm rather passionate about regarding Web design.


----------



## Runefox (Jun 24, 2012)

ITT: Geocities.


----------



## WhiteSuburban (Jun 24, 2012)

Appears that OpenOffice has a function to save in HTML, also it seems to tidy up quotes and do some other stuff.


----------



## WhiteSuburban (Jun 25, 2012)

Lead Jester said:


> At least you did that. Also take care with audio streaming it quickly tends to bring your site to its bandwidth cap if it has one.


The audio is hosted by dropbox because they don't allow audio files on the server.
I'm on a free account.


----------



## Aden (Jun 25, 2012)

Why not just ditch the audio already? It doesn't add anything except annoyance and page bulk, and your users already know and have their favorite reading/mood sounds. It's an intrusion.


----------



## WhiteSuburban (Jun 25, 2012)

Aden said:


> Why not just ditch the audio already? It doesn't add anything except annoyance and page bulk, and your users already know and have their favorite reading/mood sounds. It's an intrusion.


Gonna comment it out.


----------



## Ricky (Jun 27, 2012)

Runefox said:


> All this when you could be saving yourself a huge headache with a single line of code that I mentioned in the very first reply.
> 
> <div style="width:530px;border:6px ridge darkblue;"><?php file_get_contents($_GET['textdoc']);?></div>
> 
> That would work so much better than any of this embed or iframe foolishness, and there's no reason not to use PHP for this one, since you're already parsing it with PHP to begin with. As a bonus, the client has one less file to download before the page renders.



...except for file inclusion holes


----------

