Here is the site: geniusvideomarketing (dot) com The sidebar and main content areas shift to the right and slightly up on everything but the home page. Site looks fine with IE and FF. Any ideas?
Well, being my first reaction when I open it in Opera is "Is it supposed to look like that" it's not an auspicious start... Though it seems to render the same across all browsers here except that the space between your labels and the form elements is larger in IE/Opera/Saffy/Chrome than it is in FF - by about the same height as the font. But given that nothing anywhere on the page seems to line-up, making the whole thing feel tossed together willy-nilly I'm hoping that I'm seeing rendering errors across the board.That anything resembling content on the page is pushed clear off by the big empty space (which I assume is a broken video embed) doesn't help, and compounding the problem further is the use of illegibly small fixed metric fonts on the content, sending me diving for the zoom control on my large fonts/120dpi system. In any case, your first step if you are having cross-browser compatibility issues would be to fix your 18 validation errors. It's no guarantee that's whats screwing up, but it's a good START. Looking under the hood, the problems become evident. That stupid scripted flash embed for what should be two to four lines of markup, empty paragraph tag for some half-assed form generator script, CSS inlined in the markup, whole slew of DIV and classes that shouldn't even be neccessary for such a simple layout, a few dozen div on a form that shouldn't need more than one, asshat nonsense like display:none on a div wrapping type="hidden" inputs... Whatever form generator you used, tell it where to shove itself as the markup generated by it is total trash. From top to bottom I'd have to throw out the ENTIRE markup to even try to fix it... though that's ENTIRELY typical of what I've come to expect from the average turdpress template.
Wow! It only appears to not be lined up to me using Safari/Chrome on all the pages except for the Home page. Not sure what you're seeing, but maybe you can elaborate and share your screen resolution? Not sure what you're referring to as far as a "big empty space"... I'm not seeing that at all... The form code is from aweber... Should I be using their javascript? If you'd give me some more details or a screenshot, I would greatly appreciate it. The only issues I was seeing was the content area and the sidebar were going to the right and up in Safari/Chrome. Thanks again!
Gonna hit this out of order. . Can Do: (picture is from Opera 10.10) http://www.cutcodedown.com/for_others/joshril27/broken.jpg As you can see, your flash embed is broken, and since it's the stupid scripted flash embed it has no fallback content - hence what I meant by a 'big empty space'. In general using a flash element that prominant at the top of a page is more likely to alienate users than draw them in... and unless you are REALLY paranoid about people downloading the video, there is no legitimate reason to be using javascript to load it! 1920x1200 with Windows set to large fonts/120dpi (125% in Win7) Not sure what you're referring to as far as a "big empty space"... I'm not seeing that at all... Like anything else that "automates" or "simplifies" (and yes, I'm making those quotes in the air with my fingers) form generators SUCK. They produce rubbish code that almost NEVER renders the same across browsers, which is why just like WYSIWYG's I rail against their use. Seriously this: <form method="post" class="af-form-wrapper" action="http://www.aweber.com/scripts/addlead.pl" > <div style="display: none;"> <input type="hidden" name="meta_web_form_id" value="1899929693" /> <input type="hidden" name="meta_split_id" value="" /> <input type="hidden" name="listname" value="geniusvideo" /> <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=video" id="redirect_19dca5f688356476cd9445fdddc3d393" /> <input type="hidden" name="meta_adtracking" value="Basic" /> <input type="hidden" name="meta_message" value="1" /> <input type="hidden" name="meta_required" value="name,email" /> <input type="hidden" name="meta_forward_vars" value="" /> <input type="hidden" name="meta_tooltip" value="" /> </div> <div id="af-form-1899929693" class="af-form"> <div id="af-body-1899929693" class="af-body af-standards"> <div class="af-element"> <label class="previewLabel" for="awf_field-1365034">Name: </label></p> <div class="af-textWrap"> <input id="awf_field-1365034" type="text" name="name" class="text" value="" /> </div> <div class="af-clear"></div> </div> <div class="af-element"> <label class="previewLabel" for="awf_field-1365035">Email: </label></p> <div class="af-textWrap"> <input class="text" id="awf_field-1365035" type="text" name="email" value="" /> </div> <div class="af-clear"></div> </div> <div class="af-element buttonContainer"> <input name="submit" class="submit" type="submit" value="Download Free Report Instantly"/> <div class="af-clear"></div> </div> <div class="af-element privacyPolicy" style="text-align: center"> <p><a href="http://www.aweber.com/permission.htm" target="_blank">We respect your email privacy</a></p> <div class="af-clear"></div> </div> </div> </div> <p><img src="http://forms.aweber.com/form/displays.htm?id=jBycnJxMnGyczA==" border="0" /><br /> </form> Code (markup): Is complete **** TRASH. Much less the inlined CSS preceeding it... Little reason for that whole section to be much more than: <form method="post" id="homeForm" action="http://www.aweber.com/scripts/addlead.pl" > <div> <input type="hidden" name="meta_web_form_id" value="1899929693" /> <input type="hidden" name="meta_split_id" value="" /> <input type="hidden" name="listname" value="geniusvideo" /> <input type="hidden" name="redirect" value="http://www.aweber.com/thankyou-coi.htm?m=video" id="redirect_19dca5f688356476cd9445fdddc3d393" /> <input type="hidden" name="meta_adtracking" value="Basic" /> <input type="hidden" name="meta_message" value="1" /> <input type="hidden" name="meta_required" value="name,email" /> <input type="hidden" name="meta_forward_vars" value="" /> <input type="hidden" name="meta_tooltip" value="" /> <label for="awf_field-1365034"> Name: <input id="awf_field-1365034" type="text" name="name" class="text" value="" /> </label><br /> <label for="awf_field-1365035"> Email: <input class="text" id="awf_field-1365035" type="text" name="email" value="" /> <br /> </label><br /> <input name="submit" class="submit" type="submit" value="Download Free Report Instantly" /><br /> <a href="http://www.aweber.com/permission.htm">We respect your email privacy</a> <img src="http://forms.aweber.com/form/displays.htm?id=jBycnJxMnGyczA==" alt="" /> </div> </form> Code (markup): But then, I wouldn't use their scripts to wipe my ass with.
Thanks! Bizarre... The flash player is working for me. From the research I've done, flash seems like the best way to play a video... Do you have another recommendation?
It's not Flash, it's how it was embedded. There's stuff like Flowplayer (which is bloat city but they DID care about alt content and valid tags) and do-it-yourself like SWFObject or just embed manually using some kind of Satay method. Here's my screenshot: http://stommepoes.nl/screen.jpg You can see from the outline why the sidebar etc is pushed down on the main page. Chrome on Linux is looking the same here as FF, so maybe this is a Chrome/Saffy/Win or Mac issue. But, if you put ugly background colour or maybe even a border on your elements, you can see in all browsers who is where. You'd see that "feature" is too darn big (as are the boxes inside it) and "feature" isn't on the other pages to push stuff down. Heeeelll no. From what I can see, it seems to add classes based on whether you wrote your page half-assed or not. A well-coded page doesn't need it. DS is right about that form, what the hell are they doing?? What's wrong with <form action="blah" method="post"> <div> <label for="name">Name:</label> <input type="text" name="name" id="name" /> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <input type="submit" value="Download Free Report Instantly" /> </div> </form> <a href="#">The link to privacy junk should be outside the form</a> Code (markup): Yeah, you need the hidden inputs too but I'm someone who believes that servers should deal with forms on their end. But you can't do anything about that. Also, I don't see what this is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> ... <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> That doctype requires you send your pages as application xhtml+xml, which you can't if you want IE to actually show anything instead of prompting the user to download the page as some kind of file. Change that to XHTML1.0 just to stop the silliness. It has nothing to do with the visual problems, it's just funny that I keep seeing it out there.
Thanks! I guess the big issue I'm seeing the variation between the browsers is the other pages besides the home page. Look what the side bar does on those pages... I'm ok with the spacing of the sidebar on the first page for the most part. So, what would you recommend is the best way to play the flash movie in your opinion considering this is a WP site? Also, is flash the best type of movie format. Is there something that's easier using a different move filetype?
That's just what my screen shot shows: there's a big invisible box on the main page called "feature" pushing down the sidebar. When I click "ABOUT" that box isn't there, so the sidebar can bubble right up to the bottom of the black header area. HTML elements are like soap bubbles. They'll be as close to up as they can go unless something else pushes them down. Nobody's pushing the sidebar down on the About page. Unless it's something else the sidebar is doing that you mean? Flash is the plugin most people are going to have. Your file is an .flv which is what YouTube uses. You are using some version fo SWFObject to load it. I don't know why the Flash doesn't play on DS' browser so maybe you want to get a bunch of friends together and see if they can play your video or not. My screenshot doesn't show the Flash because I hate Flash intruding my browser, playing stupid music and people talking while I'm trying to surf the web, and generally ruining my surfing experience. So I don't have Flash on my computer. I would install it on Opera or Chrome but Adobe has decided that only Firefox users may have Flash, so if I want Flash on Opera or Chrome for Linux, I have to first install it for Firefox, which I refuse. I do have Flash installed in my testing browsers on Virtual Box Windows, and your video shows fine but it's sitting halfway past the header (not sure if you wanted it to do that). If I click the play arrow it begins to play. So, you have the correct file type and you are using one of those Javascripted loaders and if I remember correctly, SWFObject doens't load the Flash if the user doesn't have JS, so that might be why DS didn't see it. I don't know of anything anti-Opera in SWFObject.
Thanks! I do have the flash player overlapping on purpose. A logo will go above the flash player at the top of header. So, let me ask this... what is the advantage of using Flowplayer if someone has flash disabled? Will it do something different from what mine is doing?
I don't think so. I've only used FlowPlayer once, and only because the guy who put the video together had already chosen to use it. It looked rather similar to SWFObject. There are some bugs in it, but they have a forum where you can look stuff up. The default no-Flash text was pretty similar, I just changed it to Dutch. Ideally, with Flash, you'd have <object> tags who already have alternative (for non-Flash people) content inside them... and Javascript to help make sure the alt content showed if either the user didn't have Flash or their Flash player was too old. That's how SWFObject is supposed to work. You page doesn't have any <object> tags, only a span and some Javascript. So, no scripts, no flash, then just text telling us to get Flash. That's actually more similar to the kind of code you get with FlowPLayer, which generates the <object> tags instead of having them in the HTML by default. I don't see any advantage of switching but I'm not a Flash person. As you can see from my screenshot, lawlz. Wordpress has some clean, semantic themes but most of them are pretty ugly code.