Here is the link:
http://americanresults.com/videogenie/about.html#team
If you see it in FF you will notice that the overlay for the videos will shut it down completely and in other browsers it will not.
I know that there are some .js errors when I look at the console, I just don’t know how to trouble shoot them.
Any help is much appreciated.
Works fine in all Mac browsers–FF, Safari, Opera, Chrome.
I don’t see the advantage in that popup at all, as the video stays the same size. What’s the point of it?
Hi Ralph,
I thank you for looking at this issue I was having.
The popup is completely useless and should not be there, however, the client is the one who is insisting and we all know who wins that argument 
I figured out the issue, it was having to do with code that was conflicting.
Thank you again.
I was wondering how to make all of my navigation buttons fully clickable? Right now, only the words have a click state and I would like the whole li to be.
Thank you.
What in the blue blazes is that?!?
Anchors have no frameborder or scrolling attributes – the code appears to be trying to use an anchor as an iframe which is so completely wrong it shouldn’t work in any browser; that it appears to be WASTING JAVASCRIPT FOR NOTHING but bloating out the page for some goofy effect.
But then I HATE lightbox with a passion, so trying to stuff a video inside it using invalid markup isn’t exactly going to be blowing my skirt up.
You’ve got attributes that either don’t even exist or are on completely the wrong elements, are wasting bandwidth on javascript for nothing, have multiple unclosed DIV, clearing DIV like it’s still 2001, trying to use the same ID more than once, etc, etc…
Much less the train wreck of non-gracefully degrading scripting to turn the ‘menu’ into a useless for most users tab system – break that into separate pages!
Frameworks – GAH, how to flush a perfectly good site concept down the drain. Do yourself a HUGE favor and kick jquery, grid, and all the other ‘out of box’ nonsense to the curb; then you’d only need 20k of CSS instead of 47k, probably cut the markup down to HALF what it’s currently wasting, much less lose the 125k of scripts for nothing useful.
… and turning the ‘images for text’ into just the optimizable for jpg part would probably shave another 250-300k off the page.
This is a PERFECT example of what I’m talking about when it comes to my disgust over the use of ‘gee ain’t it neat’ scripting and off the shelf frameworks to pretty much ruin the user experience… that it also appears to be put together using wordpress templates; basically saying “You are going to end up hacking for IE just because of our comment placement…”
Help Williamr4j convince teh shiny web16.0-loving bosses that.
Hello deathshadow60,
I know you are going to think sarcastically about me saying this but, thank you for you honest assessment of the site, I appreciate it.
Now that you have torn the surface apart and found the problems are you willing to help me with the details of finding the solutions, other than just take everything off and do something different than what your client wants, or was that just steam you wanted to blow?
For instance, when you say:
Anchors have no frameborder or scrolling attributes – the code appears to be trying to use an anchor as an iframe which is so completely wrong it shouldn’t work in any browser;
If I dont put the frameborder or the scrolling parts in the video wont even show and doesn’t work. (I updated the page to show this one the first video on the Team page)
I an not sure how I am using an anchor as an iframe when I thought what I was doing was calling a class called “iframe1” from the fb_classes.js script so that it would use fancybox (which admittedly, is not the best plugin but works).
You’ve got attributes that either don’t even exist or are on completely the wrong elements, are wasting bandwidth on javascript for nothing, have multiple unclosed DIV, clearing DIV like it’s still 2001, trying to use the same ID more than once, etc, etc…
I again, am not sure what attributes I am not showing that is wasting bandwidth can you be more specific?
Multiple unclosed DIV’s- You are right that I should not have these for sure, and I don’t like those either but, I am not sure where you see these.
Clearing DIV- Are you talking about <div class=“clear”></div>, because I think it has worked great on a lot of my projects, what is a better solution?
Same ID more than once- Again not sure what you mean by this and how it could be a bad thing if I am doing this so that I can take advantage of just calling it once in my CSS for multiple IDs in the HTML?
etc, etc- I would like to know what more there is if you are willing to take the time.
Much less the train wreck of non-gracefully degrading scripting to turn the ‘menu’ into a useless for most users tab system – break that into separate pages!
I agree, and will try to convince the client again that they should separate these pages out but, in the mean time while they are still paying me to do what they want, I wouldn’t mind making it better if you have a better solution.
Frameworks – GAH, how to flush a perfectly good site concept down the drain. Do yourself a HUGE favor and kick jquery, grid, and all the other ‘out of box’ nonsense to the curb; then you’d only need 20k of CSS instead of 47k, probably cut the markup down to HALF what it’s currently wasting, much less lose the 125k of scripts for nothing useful.
I think that I am not using the framwork (grid 960) much in this page but, I am in other pages of the site and I think this is just a fact that you don’t like grid systems and I dont mind them.
Kick jquery- I would love to, however I’m not great at javascript coding and the client wants .js effects that Jquery is a big help on so, unless you have a better solution, this library has to stay.
and turning the ‘images for text’ into just the optimizable for jpg part would probably shave another 250-300k off the page.
Where the heck am I doing this? There should not be any code that has this in there, please point it out where there is.
that it also appears to be put together using wordpress templates; basically saying “You are going to end up hacking for IE just because of our comment placement…”
It isn’t a wordpress template, I am using (your going to love this) DreamWeaver template system. This is so that I can have the same frame work of code in each new page that I build. I am still learning .php but, have found that it would be better for me to mark it up with “includes header.php” script than doing it this way but, this works for now.
IE hacking- I am actually not hacking anything for IE, I am using an awesome (in my standard of awesome) .js file called CSS Browser Selector. I find it useful so that I dont have to do any comments for IE and I can select the exact web browser that I want to change style to.
Well, again, thank you very much for being honest and upfront, I love to have great dialogue about how to improve my work.
I look forward to your responses.
SITEPOINT RULES!!!
I’m avoiding looking deeply into any page using a lot of jQuery, so I’m staying outside of that. I am in the same boat: I don’t know much Javascript so if I’m asked to make something do X and it’s beyond my abilities, I would have to stoop to a library as well. The problem with jQuery plugins is they are written by random people. Try looking for a plugin that does what you need that’s called “accessible” as many people are making accessible versions of crappy plugins. This means, you start with working HTML/CSS elements on the page (someone without JS has no clue they are missing anything) and then the Javascript can layer on top of that and works not just with the mouse but also with keyboard. Preferably there would also be ARIA attributes in the code somewhere, telling screen readers (at least the newer ones, ARIA support is still “getting there”) that normally-unclickable/unfocusable elements are supposed to Do Stuff like anchors and buttons do.
An example: someone wanted sliders in a form; while personally I think sliders in the form my manager wanted reduced usability (made the form harder to use), I did at least manage to find this:
http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/
This is how to tell that a jQuery plugin is actually even worth considering: it worked on top of normal form elements (since this was supposed to work in a form), it’s keyboard accessible and at least tries to be screen-reader friendly.
Clearing DIV- Are you talking about <div class=“clear”></div>, because I think it has worked great on a lot of my projects, what is a better solution?
The only positive thing about clearing divs is, they always work. They were one of the first clearing solutions people came across, so you still see them floating around teh interwebs.
The issue with them is basically that you’re adding markup for no other reason than to support CSS. Now, we also do this with sandbags (like <span></span> to hold an image for image-replacement) but since we CAN replace clearing divs with pure-CSS-solutions, that is preferable.
There are two most popular clearing solutions:
one is Paul O’B’s solution: he found that if you change the container’s (parent of the floats) overflow property to something other than its default “visible”, it is forced to “see” the floated children inside them and will enclose them like normal. Which means the next elements to come along after the container won’t be able to ride up, and so it doesn’t need to clear those floats: they are safely contained inside their parent, who is a regular block.
Overflow: auto works but may give you scrollbars if the content inside has wider dimensions than the container.
Overflow: hidden is the most popular, but you cannot use it if you NEED content from inside to peek out AND the container has set dimensions (so basically so long as you don’t have height or width on the container, or you have one of those but nobody inside is larger than that, you can use overflow: hidden).
Internet Explorer 6 and 7 use Microsoft’s proprietary Haslayout property to make containers enclose floated children. IE7 is already cool because setting “overflow” gives a box Layout. For IE6, either see if setting a dimension on the box is ok (width, height, along with overflow: visible if necessary just for IE6), or use the Tan Hack to send something like height: 1% (and again, overflow: visible).
#container {
overflow: hidden; /floated children are wrapped in all browsers except IE6/
}
#container:after {
content: “”; /create something as a last child of #container… basically this is a CSS version of the clearing div/
display: block; /must be a block element to clear/
clear: both;
height: 0; /I do this pretty much only for Mozilla/
}
Again, Haslayout needs to be set on #container for IE6 and 7 (neither of which understand :after) so either see if you can safely set a dimension like width on the box out in the open with all the other styles you have for it, or use star hacks, or zoom: 1.
I prefer setting overflow if I can do that, though often I notice jQuery is already setting this property in things like sliders and menus and things. I’ve added CSS to the CSS that comes with jQuery plugins, but also I can usually remove a ton of it as well because it’s redundant to my own code.
And merge that CSS into your own CSS file. Don’t call an entirely separate CSS file just for Javascript. That’s using more bandwidth because it’s yet another call to the server. Plugin-writers have separate CSS files so you can see what it’s doing, but you don’t have to keep them separate, and shouldn’t.
Same ID more than once- Again not sure what you mean by this and how it could be a bad thing if I am doing this so that I can take advantage of just calling it once in my CSS for multiple IDs in the HTML?
It’s illegal in the HTML specs to have the same id multiple times in a single document. The browsers assume this is unique on the page, so they can and will get confused when you use the same id multiple times. Use classes instead.
You can have both classes and an id on the same element though, if you need:
<p id=“someBox” class=“foo bar baz”>I have one id and three classes</p>
I think that I am not using the framwork (grid 960) much in this page but, I am in other pages of the site and I think this is just a fact that you don’t like grid systems and I dont mind them.
If you need to use a grid, then use it. But know that using a grid has the same problem as any other pre-made regurgitated templating system: you will have more HTML than necessary, more CSS than necessary, and as an added bonus you have wonderfully-obscure class names sitting around like “r12g4”. Grid systems were developed by developers who had basically the same setup they needed to do for multiple clients at once, and made these grids to do a lot of their repetition work for them. They also kept strict Wiki styleguides and worked for several months/years with their grids, so they did know what the cryptic classnames meant.
Nobody, including you, will know what “r12g4” means when you come back to read the stylesheet a few months later.
Now you’re not using any of those types of grid systems, and likely DS saw “container_12” which is a somewhat silly name… for the rest, they’re mostly readable.
For bedtime reading, if you are interested in grids, you might want to check out a post by Jeff Croft:
http://jeffcroft.com/blog/2007/aug/09/myth-content-and-presentation-separation/
And at the bottom of his little article there’s a link to a similar article, where it says “Don’t listen to Zeldman”… and read all the comments. I think it might give some more perspective on how/why grids. You might still stick to yours (especially if you have a deadline) but your goal as a developer is to be able to whip out what the client wants just by writing it straight and simple. Less code, easier to maintain. Unless you’re in the situation Jeff was in with his devs. If this DreamBeaver template is your training wheels, keep practicing until you don’t need them. Nobody bikes faster or better WITH training wheels. They just help you get started.
Where the heck am I doing this? There should not be any code that has this in there, please point it out where there is.
I don’t know what he was looking at, but look at this image:
http://americanresults.com/videogenie/images/aboutus_inovationEndeavorsLogo.jpg
21.3kb
As a logo, even with the slight gradient (which is already banded) could probably be better as a png.
Just making the existing image a png shaves it down to 9.8kb and I think it could go much further if it was simply recreated from the original elements.
http://stommepoes.nl/aboutus_inovationEndeavorsLogo.png
Jpgs get a lot of artifacts and every time you edit the file, they get worse.
Anyone without Javascript gets unreadable text. There’s zero reason why text should be unreadable simply because of the absence of scripting. Scripting should enhance and make better, not force regular content to suck without it.
<a class="iframe1" href="http://watch.videogenie.com/media/embeddedCompilation.do?uid=DA5D16F484507921" frameborder="0" scrolling="no"
style="width: 320px; height: 290px; overflow: hidden; margin: 0;"><img src="images/aboutus_videoBg_katia.jpg" width="273" height="266" alt="Katia" rel="#katia"/></a>
I’m wondering why these aren’t just iframes then? Why the styles are inline? Or why these aren’t <object>s? <object> can embed a video into a page and can have an image as alternate content if the video doesn’t load.
Stomme poes,
You are awesome.
Thank you for taking you time and going over all of the points that I obviously need help with.
I did not notice that disabling JS on the page was going to result in something quite horrific. I have downloaded a FF addon (quick java) that will show me from now on what the page will look like with people that dont have JS enabled.
I have already read your replay twice and will make the changes needed.
I do have a question about using the clear div, although there is a pure css way of doing this why not just use the old solution of clearing the div? I understand that it adds another line to the markup to support the CSS but, isn’t the other way something that will take more time to trouble shoot and make work in all browsers where as the other, like you said, something that works everytime? It just seems like, and I dont want to discount the Pure CSS way I just want to understand the logic, we shouldn’t have to create piles of CSS code just because we can, it would seem impractical to spend the time on something that might return such a small benefit of less bandwidth.
I know you can make images out of CSS (David Storey, CSS3 Opera Image) Which is great but, how is this practical when it comes to the bottom line of project deadline and money? More time on project = less money.
Again, totally love all the great information that you put here and it will be my go to for a lot of this issues I am having.
Thank you.
I do have a question about using the clear div, although there is a pure css way of doing this why not just use the old solution of clearing the div? I understand that it adds another line to the markup to support the CSS but, isn’t the other way something that will take more time to trouble shoot and make work in all browsers where as the other, like you said, something that works everytime?
It’s a valid question, and at some point it comes down to purity I think.
In general, less markup == better, and a bit more CSS for that isn’t so bad. The reason it takes a pile of CSS (though as I mentioned above, it can be just one line of code) is due to the limitations of CSS… floats were originally not thought out so much, as the original intention was nothing more than imitating what newspapers do (image sitting off to the side and text wraps around it). I see floats as a valid layout tool, but because that’s not what they were built for, they come with limitations. The upcoming flex-box modules could solve a lot of these, but I’m guessing that might get approved and then implemented in modern browsers after a good 10 years or something… will I be cleaning toilets by then anyway?
I mean, tables for layout work most of the time and in many situations they get around some problems CSS still struggles with. Despite this, the standardistas have pointed out:
and so that’s mostly why a CSS solution is preferred if it can reasonably be implemented. After all, clearing floats is a presentational thing. A googlebot doesn’t know your floats aren’t cleared.
Kinda along the same lines as, why not use a <font> tag (will still work in ALL browsers) instead of a bunch of font-size, font-style, font-weight, font-family and color properties in the CSS (yeah even though these can be squeezed down into one line of shorthand).
Certainly the Web Standards Evangelical Movement’s black-clad jack-booted storm troopers aren’t going to break into your bedroom in the night-time and take you away in a burlap sack forever because you used a clearing div.
I know you can make images out of CSS (David Storey, CSS3 Opera Image) Which is great but, how is this practical when it comes to the bottom line of project deadline and money? More time on project = less money.
True, though time on a project doesn’t just == the time you spend first writing it. It also includes maintenance later on. And $ doesn’t just == time, but assuming the site itself is supposed to earn money from visitors somehow, having it be flexible to work on as many user agents as possible, with Accessibility Technology and the whole #! etc also counts… the fewer visitors (including search bots) who get turned away due to bad (or just not fully optimised) markup, the more potential money the site can earn.
Also, the longer you work at writing minimally with your markup and learning how to handle the CSS that goes with it, the less “extra” time it ends up taking. Until it’s faster. (having a good text editor can make a bigger difference than anything, really)
And yeah that whole Opera thing sounds cool and I’ve done similar (buttons without images), but that kind of stuff is only OK if the client you’re building the site for is ok with the degredation seen in older/crappier browsers. View the link in IE7. That was OK, so I went ahead and didn’t bother creating images. I also get the benefit of the button scaling at larger text sizes, which is an accessibility plus. But if someone had said, no, they have to look like that also in IE, then old-fashioned images it is.
Every developer has to make trade-offs. Generally you try to adhere to purity… as much as reasonably possible. This means nothing will be perfect, not if it’s meant for the real world.