Web Design - What Am I Doing Wrong? At the end of my tether!!!

I am just about pulling my hair out here. I have a simple problem to solve on a website I am designing but it's turning out to be not that simple at all.

This all started when I was asked to refresh a site I built years and years ago, it's turned into something much bigger and is really beyond my current capabilities and understanding. I have to put a shot video clip on the front page that autoplays and loops, simple I am trying to use quicktime and you can see how far I have got here.

It seems to work ok in IE7 and Safari, but in Firefox the video is stuck up in the top left corner. I have been searching Google all afternoon and I am sure this is a simple fix but I'll be buggered if I can find the answer. Whatever I do breaks it on one of the other browsers, or breaks something on the page itself.

As a slight warning the code is still really messy, I want to show my client the look etc... before making a final version. A kind of proof of concept if you like. I am already using a variety of technologies on the page and would hope to simplify it all once everything is agreed.

I would also welcome any feedback (good or bad) and bug reports etc.... It's only a simple site should only take about 1 minute to see everything.

Cheers

Cris.

You've got an extra </div> which might be making it go weird. The logo at the top is 500KB which is pretty big BTW.

You've got an extra closing div tag on line 91. Not sure if that's causing your problem or not.

Thanks for spotting that, but it doesn't seem to be the root of the problem.

It's really starting to bug me, as it seems so simple. I have tried using a flash player but that breaks the menu system on the page as it uses a different version of swfobject.js.

Cheers

Cris.

Yea, I was wondering why it was so large. I am using a PNG as I need the transparent corners. Any suggestions to a solution to that?

Cheers

Cris.

Hmmmm Firefox 3.5 has solved the problem. I don't think I can take much more of trying to find a solution so all old Firefox users will have to suffer

Cheers

Cris.

1. Use a JPEG and include the corner background within each image.

or

2. Use a JPEG and superimpose PNG corners (which will each have a transparent area showing through to the JPG. Position the corners using CSS.

I'm assuming you're going to have a different page background rather than solid grey, but the above can still be made to work.

With regards to positioning the movie container...



This is the line you're playing with right? Have you tried not specifying the left attribute as a percentage and also not using both left and margin-left, but only one of them instead? Maybe try floating the container to the right and then bring it back a little to the left to leave you an appropriate margin on the right.

Browsers still don't seem to all implement CSS regions/boxes consistently. It doesn't help that the CSS spec made some pretty poor design choices in how widths, margins and padding are specified either.

I would suggest using a CSS editor that can do live (in place) replacement and then try different values while continuing to preview the page online. This would be made easier if you moved all your CSS into a single CSS block instead of using inline and also getting rid of all font tags and replacing them with style classes.

Thanks Bruno,

I thought about using jpgs and png corners but the slideshow would then be very hard to implement I think?

Yea that's the line I am playing with, I haven't tried messing with the margins as not even the top: 500px; seems to be working. I assume it's a problem Firefox has with that type of content and <div> as if you remove the quicktime code and replace with text it works fine ???

I just can't get away from the habit of using a text editor, I tried using Dreamweaver for the first time earlier, blew my mind! It just seems so over complex but I really should look at setting up style classes

Cheers

Cris.

I'd recommend looking into a better way of playing the video. Having to use the Quicktime plugin means potentially a lot of people who won't see it.

Ideally, you could toss in some HTML 5 video tags for people on Firefox 3.5 and Safari 4, then put a flash video embed inside the video tag for other browsers (Including the so called "standards" based IE8).

Oh, I write my pages in a text editor as well. But I write my CSS using a CSS editor that provides styled selector listing, auto-completion and indenting as well as a GUI panel for making parameter changes/edits without having to write the CSS by hand.

I must have missed the fact that the content displays properly if not a mov. Interesting. You might also try relative positioning. It will be relative to the containing block, so you'll have to adjust the offset.

With regards to the corners... Neither of my suggestions should make animating any more difficult. In the first instance each image would have the corner built-in. So no change to any animation or page code. In the second, you would set the Z position of the corners higher than the animated content. That's an easy way to make them always appear over top. Make sure to set position relative on the elements.

You're missing a " in the line just before the object tag.



Adding in the " should fix it.

You need to do something about that banner because you're making the viewer load 5x500KB just for the rotating banner at the top.

Running it through validator produces quite a few errors as well.

Trevor, you are a true genius

A simple error on my part, strange how the content seemed to make a difference though. Although I wonder if I put the text in the previous object, I bet I did.

Sometime you just can't see the wood for the trees I guess, what a dumbass I am, I have looked this over and over today too

I still don't know what to do about the banner, I am aware it's a bit daft but I like the look. I think I will also look for a method that doesn't pre load all 5 images first, that should at least speed things up a little. At the same time I think I will look for a flash player based on Tom's suggestion. But at least it seems to all work well enough to show my client and they can tell me all the changes they'll no doubt want before I waste anymore time on it.

Proof that the empegbbs is still able to help in times of need, thanks again

Cheers

Cris.

IMO, you should always run it through the validator. You might decide that you don't want to fix certain things, but it would have certainly shown that missing quotation mark.

Do what hybrid8 suggested and make JPEGs with the corners part of the JPEG. The JPEG would actually be rectangular with no transparency but it'd just look like it did because you put the corners in. That should shrink the file size of each banner image significantly.

PNG alpha transparency is badly broken on earlier versions of IE anyway.

As you're using <font> tags and various others, you should change your DTD to something other than XHTML 1.0 Strict.

If you need some FLV's encoding give me a shout. I can run it through Flip Factory at work. It creates really good quality vp6 encoded clips.

Thanks I might have to take you up on that

I think this highlights to me the down falls of working on your own, if I had someone here to have a quick look through I am sure they would have spotted my mistake. I will also make more use of the validator in future.

I think it's also time to learn to use Dreamweaver or something similar, I do very little web design and I think my methods were fine 10 years ago or more, but the whole thing is just getting too complex. Sure if I were doing it every day it wouldn't be so bad.

Thanks again for all your help guys

Cheers

Cris.