Help with HTML

About Truespace Archives

These pages are a copy of the official truespace forums prior to their removal somewhere around 2011.

They are retained here for archive purposes only.

Help with HTML // Tech Forum

1  |  

Post by splinters // Sep 27, 2008, 7:35am

splinters
Total Posts: 4148
pic
A bit off topic (3D wise) but I need a bit of help and you seem a friendly bunch...;)


I have launvhed my Buddy World site and it looks fine in explorer but a few images (usually ones placed in layers) are offset when viewed in Firefox.


I went to validator.w3.org which reports errors and even tidies up your code.


Now the images in question (in layers) are usually down and the the left of where they should be. The code generated by HTML tidy has managed to align them correctly vertically but they are still off to the left by around 10 pixels. Any idea how to fix this without misaligning them in IE.


Also, some pages have a similar 10 pixel or so gap at the top of the main image in the page, others touch right up to the toolbar. Again, I have no idea why.


Any help and advice would be appreciated...very much...:o

Post by splinters // Sep 27, 2008, 7:53am

splinters
Total Posts: 4148
pic
Here is the left alignment problem:

Post by splinters // Sep 27, 2008, 7:58am

splinters
Total Posts: 4148
pic
And the top problem (gap is in Firefox);


Sorry to have to ask here as it is little to do with tS (except for the production of the images) but I have googled with no results that I can understand...:(

Post by Humdinger // Sep 27, 2008, 8:10am

Humdinger
Total Posts: 319
pic
Hello....


Well there are several possible answers to your questions...


But.. are you familiar with and using CSS (Cascading Sytle Sheets) to define your DIV tags ?


Also...You need to set the page top margin to 0 to get Firefox and IE to show the same alignment with the top of the page.


IE and firefox (Mozilla) have different defaults that must be set in the HTML/CSS to make them identical.


Lastly - I wold make sure to check everything in IE 6 and 7 as sadly even these two browser variants do not do everything the same.


There are conflicts regarding where borders/padding are concerned.

Post by Humdinger // Sep 27, 2008, 8:14am

Humdinger
Total Posts: 319
pic
http://tredosoft.com/Multiple_IE


the link above is a great tool which allows you to run multiple versions of IE to compare pages in different versions.


I only check in IE 6 and 7. The rest are too old and up to the user to get with the program and download a new version.


But this app lets you have IE 7 running and IE 6 etc at the same time. Uses the same favorites etc as whatever your defualt IE browser happens to be.


PS..


Do not forget Safari on the PC. Both Firefox and Safari have slightly different defaults on fonts etc, that if these are not defined in a Syle Sheet..it can drive you batty.

Post by Humdinger // Sep 27, 2008, 8:17am

Humdinger
Total Posts: 319
pic
No promises but if you email the HTML file you are using for the overlay of the TV images (first post) I can take a look at it for you.


vinnyqp@yahoo.com

Post by splinters // Sep 27, 2008, 8:18am

splinters
Total Posts: 4148
pic
Cheers Humdinger...any idea how to fix the 'moved to the left' issue in FF?

Post by Humdinger // Sep 27, 2008, 8:21am

Humdinger
Total Posts: 319
pic
Cheers Humdinger...any idea how to fix the 'moved to the left' issue in FF?


Yes and no... :)


Really have to see the HTML file as it's all about relative, versus static versus abosulte positioning on the Layers/DIVS... and which one depends more on the exact structure of your HTML page.

Post by splinters // Sep 27, 2008, 8:30am

splinters
Total Posts: 4148
pic
Phew...what a guy...;)


Cheers for this.

Post by Humdinger // Sep 27, 2008, 8:37am

Humdinger
Total Posts: 319
pic
Phew...what a guy...;)


Cheers for this.


Welcome to the hell that is Cross Browser Compatiblity.


Otherwise known as 'The Browser Wars' to us that have fought the fight for many years.

Post by splinters // Sep 27, 2008, 11:20pm

splinters
Total Posts: 4148
pic
Not exactly HTML related but does anyone know how to set a flash element (or the web page) to remember a preference?


I have a sound on/off button on my main page but if you turn the sound off, follow a link, then return to that page, the sound is back on again...it is quite annoying, especiialy as you have to return there to access each different area...:o


Any flash experts know what parameter to change or is this something I set in the HTML code?

Post by Humdinger // Sep 28, 2008, 2:18am

Humdinger
Total Posts: 319
pic
:D


You really are just asking for 'trouble'.


http://search.yahoo.com/search?fr=slv2-msgr&ei=UTF-8&p=passing%20flash%20variables%20via%20html


yahoo search..


also might want to look at


www.flashkit.com


though I am about 99% sure you can not do what you want without dealing with sessions and states... and even then still about 99% sure even those will not help. HTML and Flash are different animals.


Once you leave one .html page and go to another things are going to reset unless you manage sessions and states.


This can be worked around but requires that your entire site be flash based, one /html page that contains the entire site embedded in a single flash .swf file.... which although I have done in the past I do not recommend as that brings up other issues like the back button not working as expected.


http://www.refillowhip.com/home.html


no sound here...but the entire site is one html page and one swf file...with a few linked external .swf files in support. Allows the main flash movie to 'remember' things as you move about.


Once again...not something i recommend.


Same concept here....


http://tommyrockix.com/home.htm

Post by Humdinger // Sep 28, 2008, 2:24am

Humdinger
Total Posts: 319
pic
If you go to etiher of those site exmaples I posted you will note that the URL listed does not change as you view different 'pages' on the website itself.


BUT...if you explore the site and click 5 - 10 buttons/links etc. Once you click back on your browser you are taken all the way back to the page you were on before visting the link.


There is a 'fix' for this Flash problem but is a bit involved..and as often is the case ...only currently works in IE.

Post by splinters // Sep 28, 2008, 4:55am

splinters
Total Posts: 4148
pic
Yup, that is me Vinnie...always looking to complicate things...;)


I did find a site where someone else needed the same thing but a full answer was never posted. They mentioned cookies or, in this case, shared objects. An example was given for a movie header but I couldn't figure how to apply it to the sound on/off swf I have.


I really ought to be working on the books and characters..instead of messing with code and flash...:D


..I never learn...:rolleyes:

Post by Humdinger // Sep 28, 2008, 5:06am

Humdinger
Total Posts: 319
pic
I hear you loud and clear Splinters.


Like 3D... html and in particular tight integration with Flash is a life long pursuit, in particular when trying to keep up with all the changes and updates.


Not sure how cookies are going to solve the 'problem' noting that you then assume cookies are 'on' in the browser.


Which I know most are but you have to consider if they are not is the purposed feature so important that if not present the result is so annoying to deter a visitor to your site.


You never know what publishing mogul may come across your site with a less than optomized browser.


Back to checking it in IF 6 and 7, Firefox and Safari on the PC. If not idenitical.. join the club .. but at least you should know that there are not differences that make the page/effect useless in any of them.


OR........:D


You start writing multiple pages that detect for the browser and display pages specific to the browser being used.


Which is another thing you should avoid at all cost in my opinion.

Post by Humdinger // Sep 28, 2008, 5:08am

Humdinger
Total Posts: 319
pic
PS


Last 'dirty' word from me....


Javascript


:p


You can do almost anything with Java..HTML..and Flash Action Script working together... if you really know all three really well...


Which....


I...


do not.:)

Post by brotherx // Sep 28, 2008, 8:14am

brotherx
Total Posts: 538
pic
Paul,

I spend all day every day writing ASPX/HTML/JScript stuff so if you need a hand, PM or email me with some sample html and I'll take a look for you.

Post by splinters // Sep 28, 2008, 12:26pm

splinters
Total Posts: 4148
pic
I certainly will Brother...I am going to work on a new book but I will send you the HTML for the 'offending' page. Be warned though, Vinny says it is pretty ugly...:o

Post by brotherx // Sep 28, 2008, 9:00pm

brotherx
Total Posts: 538
pic
hey...no probs. reading html for me is like reading english....sad but true.

Post by splinters // Sep 28, 2008, 9:58pm

splinters
Total Posts: 4148
pic
I am sending it right now by PM/email BrotherX....this is one of the more complicated pages with about a dozen rollover areas so if this can be solved. the rest should be easier....


Of course, unless I can add what you do to the other pages...I am stuffed...:o


Thanks for the help...seems you enjoy this sort of HTML torture...;)

Post by brotherx // Sep 28, 2008, 10:55pm

brotherx
Total Posts: 538
pic
I've just been doing it for so long. First started developing web based apps in 1996 so it's just become second nature really.


It's easy..it can be fun....sometimes.

Post by Finis // Sep 29, 2008, 8:26am

Finis
Total Posts: 386
pic
Here's a site that produces screen shots of your pages from a billion or so browsers on several platforms. I suggest selecting only the recent versions of major browsers. The results will take a long time otherwise.


http://www.browsershots.org

Post by splinters // Nov 4, 2008, 2:35pm

splinters
Total Posts: 4148
pic
Late night, brain hurting and the car just broke down so I am here again looking for help...:confused:


I have a background image in my webpage, say 1024x768 (centralised) and I have layers on it often containing gifs or flash elements. The are positioned absolutely with a div tag? and they look fine in full screen.


Tonight I viewed the content on a friends HD tv at 1900x1080 or such size and the layers were nowhere near where they should be. I tried the opposite (made my window on the laptop much smaller) and yup, misaligned again.


Now I think I see what is wrong but how to fix it. I need the layer to be relative to the background image not the web page so if you enlarge or shrink the window, the layers do not move from where they are positioned within the background image....make any sense? This works fine if I align the image to the left but frankly it looks rubbish that way.


See this page for an example:


http://www.buddyworldbooks.com/sample/village/harold.html


the tv screen should be exactly where intended on say a 1600x1200 screen but if you shrink the browser window or look on a larger screen...it becomes misaligned.


Any ideas how to stop this happening? Vinny tried before but my brain hurt...is there an easy way?


Cheers in advance!

Post by brotherx // Nov 5, 2008, 11:56pm

brotherx
Total Posts: 538
pic
here's what to do:

create a div tag and place all other html inside it, including your image.

apply the following style to it

style="position:relative;width:1024px;height:768px;" obviously changing the sizes accordingly


Then, all absolutely positioned items will be positioned within the div, where 0,0 is the top left of it.

then, you can position it anywhere you want and all items should move relative to the top-left of the div.

Post by splinters // Nov 6, 2008, 2:03am

splinters
Total Posts: 4148
pic
Mmmm, out of my depth here Brian...can't seem to get it to work. It positions the background image in the centre but puts the layer with the .swf file in at the top of the page with the image directly below it.

HTML is not a strong area for me...:o


Should code have spaces in it like so:


<divstyle="position: relative; width: 1024px; height: 768px ;"<html>


Appreciate the help by the way...:D

Post by hemulin // Nov 6, 2008, 11:23pm

hemulin
Total Posts: 1058
pic
Should code have spaces in it like so:

<divstyle="position: relative; width: 1024px; height: 768px ;"<html>

Appreciate the help by the way...:D

<html>
<divstyle=position:relative;width1024px;height768px>place all html including image in here</div>
</html>

Post by splinters // Nov 6, 2008, 11:39pm

splinters
Total Posts: 4148
pic
Cheers Hemulin, that worked a treat. However, if I apply it to one of the pages where I have used imageready to make the rollover effects it does not keep the layers relative to the background image....:o


Here is the code from another page that I applied your code to:

<html>

<divstyle=position:relative;width1024px;height768p x>

<title>Little Cloud</title>

</head>

<body bgcolor="#B4C1CA">

<div style="position: absolute; width: 244px; height: 225px; z-index: 1; left: 504px; top: 60px" id="layer1">

<p align="center">

<img border="0" src="images/boyfly.gif" width="300" height="300" align="middle"></div>

<div style="position: absolute; width: 250px; height: 250px; z-index: 2; left: 118px; top: 17px" id="layer2">

<img border="0" src="images/balloon.gif" width="250" height="250" align="top"></div>

<div style="position: absolute; width: 56px; height: 51px; z-index: 3; left: 371px; top: 303px" id="layer3">

<p align="right"><img border="0" src="../sm24.gif" width="25" height="25"></div>

<div style="position: absolute; width: 91px; height: 43px; z-index: 2; left: 147px; top: 548px" id="layer4">

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="90" height="40">

<param name="movie" value="shore2.swf">

<param name="quality" value="High">

<param name="wmode" value="transparent">

<param name="salign" value="TL">

<embed src="shore2.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="90" height="40" quality="High" wmode="transparent" salign="TL"></object>

</div>

<p align="center">

<img border="0" src="images/mainpage.jpg" width="1024" height="768" usemap="#FPMap0"><map name="FPMap0"><area href="../mainmap.html" shape="rect" coords="923, 669, 1016, 757"><area href="choose.html" shape="rect" coords="623, 505, 722, 560"><area href="games.html" shape="rect" coords="135, 288, 290, 377"></map><a href="haroldhairpage.htm"><br>

</div>

</html>


The layers do not stay where they should but it worked on the other page....confusing!


Good to hear from you by the way...email not working? ;-)


EDIT: I must be going mad as I am sure this worked but now it seems it didn't......

Post by splinters // Nov 7, 2008, 1:00pm

splinters
Total Posts: 4148
pic
Sorted now thanks....:D


Now, is there such a thing as a program than 'pre-caches' a website. The sort of thing that tells you to go and make a cup of tea while it loads all the content so when you come back it can be viewed almost instantly regardless of your connection speed.


Nope?...didn't think so....;)

Post by hemulin // Nov 7, 2008, 3:12pm

hemulin
Total Posts: 1058
pic
Sorted now thanks....:D

Now, is there such a thing as a program than 'pre-caches' a website. The sort of thing that tells you to go and make a cup of tea while it loads all the content so when you come back it can be viewed almost instantly regardless of your connection speed.

Nope?...didn't think so....;)

Yeah, if you fancy rewriting your whole website into one flash page. ;)

I'll try to get you that email sometime soon....had far too much work lately
Awportals.com is a privately held community resource website dedicated to Active Worlds.
Copyright (c) Mark Randall 2006 - 2024. All Rights Reserved.
Awportals.com   ·   ProLibraries Live   ·   Twitter   ·   LinkedIn