Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Problem with alignment of Flash document


  • Please log in to reply

#1
Spider-Man

Spider-Man

    Member

  • Member
  • PipPipPip
  • 167 posts
Hi there. It's me- again.


Visit:
http://grantglendinn...s/showroom.html


The page alignment is completely wrong after adding in a Flash feature from Canspa.com. Is this easily solvable? I've tried various assortments, but cannot get it to show properly.

Any ideas?

Thanks !!
  • 0

Advertisements


#2
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
URL is bad. 404 error.

Ron
  • 0

#3
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Sorry, my mistake - it's http://grantglendinn...s/Showroom.html (previous link had a missing capital 'S')

Thanks for your help:)
  • 0

#4
Stryker250

Stryker250

    Member

  • Member
  • PipPip
  • 16 posts
Could you please say what is not being aliged properly. Difficult to judge as to what you want to be looking as it is on the page and what you don't. I have viewed it in both FF and IE7. They look the same, so its nothing to do with browser compatibility.

So, what is being align wrong?

Edit...I think I found your problem.

If you look at your soruce code and look for the line that says
<!-- Begin of Footer-->

Add a
<!-- Begin of Footer-->
<tr>
Below it, but before your next <td>

And might I add, your code needs some real cleaning up. Its quite a mess :whistling:

Edited by Stryker250, 16 July 2007 - 11:53 AM.

  • 0

#5
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Hello. Thanks for your reply; apologies for my late reply.

The problem is that the flash part in the page is very wide, which pushes the right 'blue column' out further than it is supposed to be, it also causes a white column to be created on the right side of the right blue column, that is what I didn't understand and basically it doesn't look like this is a solvable problem. Not unless I can resize the flash document. As I am not the original creator (it was taken from Canspa.com as stated previously) - I don't have the original flash file to edit this.

Is there any other way it can be resized to fit like the other pages of the site?

You also mentioned the code needs a serious cleanup - what exactly is wrong with it, and how can it be 'cleaned up'?

Thanks for your help :whistling:
  • 0

#6
Stryker250

Stryker250

    Member

  • Member
  • PipPip
  • 16 posts
Sorry if I sound like an arse about the code, but what I mean by that is that it was fairly difficult to read. It almost looks like it was auto-generated by another application. But you need to fix that proble I posted above, that may help you out. Well, actually I think that is your proble. So I first suggest adding that little piece of code where I said it should be so that your table structure works out.

As for the resizing of flash objects. Yes you can do it after the flash movie has been compiled. If you look at the code for the flash it will be within
<object>
<!--Flash file parameters here -->
</object>
those. Look for the width and the height in there. There should be 2 of each.

As for cleaning the code up a bit, the main part is towork on a coding structure.
For example :
<table>
	  <tr>
			<td align="center">&nbsp;</td>
	  </tr>
</table>

With the above example implemented in your coe you would easily find out where any problems are in the code. WHy? Because if there was a problem for example a missing tag (like you have), the structure is broken (strucutre meaning pattern).
If you use a text editor with color highlighting you will be able to pick up missing quotes with that.

Hope that makes sense? :whistling:
  • 0

#7
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
It's a bad idea to use <table> tags for page layout to begin with. They should be used for tabular data only and using them as you have presents problems that you are running up against. I would also add the universal selector to the CSS to level the playing field for all browsers, especially IE:

* { margin: 0; padding: 0; border: 0; }

That does begin with an asterisk.

You have 32 major errors in your code as it stands now and they should be corrected before trying to correct any layout problems:

HTML Validator result
----------------------
http://grantglendinn...s/Showroom.html

line 20 column 57 - Error: document type does not allow element "LINK" here
line 21 column 6 - Error: end tag for element "HEAD" which is not open
line 23 column 5 - Error: document type does not allow element "BODY" here
line 33 column 57 - Error: there is no attribute "HEIGHT"
line 46 column 27 - Error: document type does not allow element "TD" here; assuming missing "TR" start-tag
line 85 column 89 - Error: there is no attribute "MAXSIZE"
line 86 column 121 - Error: there is no attribute "WIDTH"
line 86 column 133 - Error: there is no attribute "HEIGHT"
line 86 column 145 - Error: there is no attribute "BORDER"
line 95 column 23 - Error: end tag for element "P" which is not open
line 112 column 97 - Error: name start character invalid: only S separators and TAGC allowed here
line 112 column 97 - Error: end tag for "B" omitted, but its declaration does not permit this
line 112 column 77 - Info: start tag was here
line 112 column 107 - Error: end tag for element "B" which is not open
line 180 column 202 - Error: syntax of attribute value does not conform to declared value
line 180 column 202 - Error: value of attribute "ALIGN" cannot be ""; must be one of "TOP", "MIDDLE", "BOTTOM", "LEFT", "RIGHT"
line 183 column 26 - Error: an attribute value must be a literal unless it contains only name characters
line 185 column 11 - Error: there is no attribute "SRC"
line 185 column 34 - Error: there is no attribute "QUALITY"
line 185 column 47 - Error: there is no attribute "BGCOLOR"
line 185 column 47 - Error: an attribute value must be a literal unless it contains only name characters
line 185 column 61 - Error: there is no attribute "WIDTH"
line 185 column 74 - Error: there is no attribute "HEIGHT"
line 185 column 85 - Error: there is no attribute "NAME"
line 185 column 102 - Error: there is no attribute "ALIGN"
line 185 column 114 - Error: there is no attribute "TYPE"
line 185 column 158 - Error: there is no attribute "PLUGINSPAGE"
line 185 column 203 - Error: element "EMBED" undefined
line 189 column 4 - Error: end tag for "TABLE" omitted, but its declaration does not permit this
line 176 column 31 - Info: start tag was here
line 297 column 74 - Error: end tag for element "B" which is not open
line 327 column 42 - Error: end tag for element "SPAN" which is not open
line 327 column 46 - Error: end tag for element "B" which is not open
line 327 column 55 - Error: end tag for element "CENTER" which is not open
32 errors / 0 warnings

HTHs,

Ron

Edited by Major Payne, 18 July 2007 - 02:53 PM.

  • 0

#8
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Hi. Thanks alot Stryker, I'll get on the job with Dreamweaver, as I have mainly just been using Wordpad to generate the code so far.

Regarding Major Payne, you mention adding "the universal selector" to the CSS file - how do i do that, and what exactly is it?


Thanks:)
  • 0

#9
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
That is the "new" CSS2 selector displayed as an asterisk ( * ). Matches any element at all, much like a wildcard. The one I posted should be placed at the very top of your CSS before all other styling. It effectively ensures that your own styling that follows will be obeyed. Especially for IE. There are some drawbacks when using it for other elements so you need to know what you are doing.

Ron

Edited by Major Payne, 18 July 2007 - 04:24 PM.

  • 0

#10
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Hi there. Thanks for your quick reply.

I presume it isn't as easy as just copying the code and pasting it at the top of my CSS file? I have viewed the site using Firefox 2.0 and IE 6 and 7, there doesn't appear to be much differences in either browser, the only real noticeable difference is the layout isn't exactly the same in either browser, IE appears to 'space out' the layout a bit more. I presume this is because I've coded the site more towards Firefox, which at the moment has around a third of all internet users using it, along with a third IE6. While IE6 usage is decreasingly monthly(due to IE7's release), Firefox usage is gaining even more usage than any other browser. For now, Firefox is the way forward, but I'd still like the site to be useable by most, if not all browsers, with the exception of a few text-only browsers, which suck so much that they aren't even worth a mention;)

Thanks for all your help! :whistling:
  • 0

#11
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
Yes, just tuck the universal selector stuff in at the top of the CSS you use for page. IE has a problem of adding padding/margins where you didn't ask for them. This will set it all to zero so only your styling has the required effect you want. Firefox is compliant to the new CSS2 standards. Design to it and fix bugs for other browsers is usually what has to be done. Check out: Explorer Exposed. Some use conditional statements to get IE to act right. Have you just tried setting Flash parameters for a 800x600 size window and get it to work there? Using percentages is going to set it for whatever the window size is. Think there was several good suggestions already made, too.

Ron
  • 0

#12
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Hi, thanks alot - this appears to look much better now in IE. I am now resizing the flash document, so hopefully by the end of the evening the Showroom page should be fixed:D thank you!

There is one more web development issue I'm having.

I got an online script for a javascript scrolling image slider - so we can show a range of our products in a slideshow format, which are all links to the specific product range. The problem is, it works perfectly in Internet Explorer 5, 6 and 7 - but not in Mozilla Firefox. In Firefox, the page 'shifts up' where the scrolling images are supposed to be placed - it's as if the code for the scrolling images disappears in Firefox. Any idea why this is, and where I can get such a thing - similar to this one I got from http://www.houseofsc.../scrollpics.htm - which works in at least IE and Firefox? Thank you!!

<script LANGUAGE="JavaScript">

//slider's width
var swidth=300


//slider's height
var sheight=90

//slider's speed;
var sspeed=20


var imagef=''

//images:

var leftimage=new Array();
leftimage[0]='<a href="http://www.cupargardencentre.co.uk/acatalog/index.html"><img src="images/cupar.gif" width="145" height="90" border="0" alt="Cupar Garden Centre Logo"></a>'
leftimage[1]='<a href="www.google.co.uk"><img src="images/Pud_apex1.jpg" width="100" height="90" border="0" alt="Pudsey Apex Garage"</a>'
leftimage[2]='<a href="http://www.cupargardencentre.co.uk/acatalog/BBQ_Range.html"><img src="images/bbq.jpg" width="100" height="90" border="0" alt="Weber BBQ"></a>'
leftimage[3]='<a href="http://www.cupargardencentre.co.uk/acatalog/Building_and_Greenhouse.html"><img src="images/building.jpg" width="100" height="90" border="0" alt="Malvern MPB Garden Summerhouse"></a>'
leftimage[4]='<a href="http://www.cupargardencentre.co.uk/acatalog/copy_of_HTA_Garden_Gift_Vouchers.html"><img src="images/buy.gif" width="100" height="90" border="0" alt="HTA Gift Vouchers"></a>'
leftimage[5]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_Furniture.html"><img src="images/canterbury.jpg" width="100" height="90" border="0" alt="MGM Canterbury Cane Furniture"></a>'
leftimage[6]='<a href="http://www.cupargardencentre.co.uk/acatalog/Pets.html"><img src="images/dog.jpg" width="100" height="90" border="0" alt="Oxford Dog Bed"></a>'
leftimage[7]='<a href="http://www.cupargardencentre.co.uk/acatalog/Aquatics.html"><img src="images/fish.jpg" width="100" height="90" border="0" alt="Tropical Fish"></a>'
leftimage[8]='<a href="http://www.cupargardencentre.co.uk/acatalog/Pine_Furniture.html"><img src="images/furniture.jpg" width="100" height="90" border="0" alt="Santa Fe Cabinet"></a>'
leftimage[9]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_and_Patio_Furniture.html"><img src="images/outdoorfurniture.jpg" width="100" height="90" border="0" alt="Alexander Rose Regency Mahogany"></a>'
leftimage[10]='<a href="http://www.cupargardencentre.co.uk/acatalog/Walton_Buildings.html"><img src="images/playhouse.jpg" width="100" height="90" border="0" alt="Honeysuckle Playhouse by Honeypot"></a>'
leftimage[11]='<a href="http://www.cupargardencentre.co.uk/acatalog/Sports_and_Leisure.html"><img src="images/pool.jpg" width="100" height="90" border="0" alt="Plum Pool Table"></a>'
leftimage[12]='<a href="http://www.cupargardencentre.co.uk/acatalog/Gardenwares.html"><img src="images/reel.gif" width="100" height="90" border="0" alt="Gardena Hose Reel"></a>'
leftimage[13]='<a href="http://www.cupargardencentre.co.uk/acatalog/Garden_Products_from_Plum.html"><img src="images/sunory.jpg" width="100" height="90" border="0" alt="Sunory Pressure Treated Pagoda by Plum"></a>'
leftimage[14]='<a href="http://www.cupargardencentre.co.uk/acatalog/Walton_Buildings.html"><img src="images/walton.jpg" width="100" height="90" border="0" alt="Hallmark Walton Buttermere Georgian Summerhouse"></a>'
leftimage[15]='<a href="http://www.cupargardencentre.co.uk/acatalog/Giftware_2007_-_Free_Delivery_.html"><img src="images/willow.jpg" width="100" height="90" border="0" alt="Willow Tree by Demdaco Giftware"></a>'

for (mi=0;mi<leftimage.length;mi++)
imagef=imagef+leftimage[mi]


function start(){
if (document.all) return
if (document.getElementById){
document.getElementById("slider").style.visibility="show"
initial6(document.getElementById('slider'))
}
else if(document.layers){
document.slider1.visibility="show"
intialslide()
}
}
function intialslide(){
document.slider1.document.slider2.document.write('<nobr>'+imagef+'</nobr>')
document.slider1.document.slider2.document.close()
thel=document.slider1.document.slider2.document.width
document.slider1.document.slider2.left-=thel
sslide()
}
function sslide(){
if (document.slider1.document.slider2.left>=thel*(-1)){
document.slider1.document.slider2.left-=sspeed
setTimeout("sslide()",100)
}
else{
document.slider1.document.slider2.left=swidth
sslide()
}
}
function initial6(whichdiv){
tdiv6=eval(whichdiv)
tdiv6.innerHTML=('<nobr>'+imagef+'</nobr>')
tdiv6.style.left=swidth
thel=swidth*leftimage.length
scroll6()
}
function scroll6(){
if (parseInt(tdiv6.style.left)>=thel*(-1)){
tdiv6.style.left=parseInt(tdiv6.style.left)-sspeed
setTimeout("scroll6()",0)
}
else{
tdiv6.style.left=swidth
scroll6()
}
}
</SCRIPT>


<body onload="start()">

<script LANGUAGE="JavaScript">
if (document.all){
document.write('<marquee id="slidere" scrollAmount=8 style="width:1000;height:90;">'+imagef+'</marquee>')
slidere.onmouseover=new Function("slidere.scrollAmount=0")
slidere.onmouseout=new Function("if (document.readyState=='complete') slidere.scrollAmount=8")
}
if (document.layers){
document.write('<ilayer width=102 height=82 name="slider1" bgcolor="white" visibility=hide>')
document.write('<layer name="slider2" onMouseover="sspeed=0;" onMouseout="sspeed=20">')
document.write('</layer>')
document.write('</ilayer>')
}
if (document.getElementById&&!document.all){
document.write('<div style="position:absolute;width:102;height:82;clip:rect(0 102 82 0);">')
document.write('<div id="slider" style="position:relative;width:&{swidth};" onMouseover="sspeed=0;" onMouseout="sspeed=10">')
document.write('</div></div>')
}
</script>

  • 0

#13
Major Payne

Major Payne

    Retired Staff

  • Retired Staff
  • 5,307 posts
What's the link to page where you are using this? Didn't see it on page in IE or FF using link you posted previously.

Ron
  • 0

#14
Spider-Man

Spider-Man

    Member

  • Topic Starter
  • Member
  • PipPipPip
  • 167 posts
Hi there, thanks for your reply.

Sorry, I accidentally uploaded another version of index.html which didn't have the scrolling images script. I will now upload the version with scrolling images, it will be viewable at http://grantglendinn...docs/index.html in about 5 minutes.

Thank you:D



The version with scrolling images has now been uploaded successfully. Thanks

Edited by Spider-Man, 20 July 2007 - 02:55 AM.

  • 0






Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP