I'm having a strange issue with the positioning of a youtube videobar in the the right sidebar, but it only seems to be happening on Chrome and Safari. When one of the video thumbnails in the bar is clicked, it's supposed to open a player video beside it, but in Chrome and Safari the player video opens elsewhere on the page. It appears to work fine in Firefox and IE7 (only other browsers I've been able to test it in so far). Here's the page: makeupandbeautyblog.com. The bar is created using the Google Search API. When I take the website's existing HTML and CSS out of the equation and just test the videobar by inserting it in a blank HTML page (an example) the player opens in the correct position, which is a dynamic position calculated within the javascript of Google's Search API. I haven't changed it from the defaults, just copied it locally to the site. The bulk of the changes to Google's defaults that I've made were by placing the #videoBar div that contains the videobar itself within a styled #vidBarholder div with a background image. Both of those divs are then placed within the sidebar left floated containing div. Any help would be appreciated. I spent 8 hours trying to figure this out yesterday to no avail.
drhowarddrfine, the problem isn't with the position of the videobar itself. It's with the video player that should open immediately beside the bar when one of the video thumbnails gets clicked. In Firefox, etc., the player opens flush left next to the bar; in Chrome/Safari it opens up near the top of the browser window.
Strange. What versions of FF and Chrome are you using? In FF 3.6.3 on Win XP the player shows up correctly, but it's out of position up near the top of the browser window on Chrome 4.1.249 on XP as well as in the newest versions of Chrome and Safari on Snow Leopard on Mac as well. So far I've checked the issue on a few different machines. I sure could use the help. Anyone else have any ideas?
Can anyone else offer insight into the issue I posted about? I know the page doesn't validate, as many sites don't. Right now I'm searching for help with this particular issue though.
If you don't mind I'll hold out hope that others can forgive my failings and perhaps offer to help without the extra browbeating.
aka "I dont feel like spending my time on it, I want someone else to fix it for me". Go ahead, wait for someone else to fix it for you, if your serious about your site you will need to fix the errors sooner or later.. The longer you wait the more problems (who knows what else is wrong on other browser versions).
If it'll make you feel better, I spent 8 hours trying to figure this out yesterday, but I'm not an expert or pro in any of these technologies, not CSS, HTML or javascript. I've done my best to help the site owner, but I have a day job too, so I did the best that I can. At any rate, thanks for the help.
Not sure what a 'video bar' is, since I'm not seeing any such thing in ANY browser here... Is that the mouseover the video for a bloated popout nonsense that only works properly in FF in the first place? (and isn't even working for that here?) Our resident stooges fan is quite possibly on the mark with the validation concerns - there are a lot of validation errors one can safely ignore - UNCLOSED TAGS ARE NOT AMONG THEM. Elements where structurally they are not allowed to go (like block level inside inline-level or tags following a </li> other than LI, OL or UL) any one of which could be triggering rendering headaches from hell, or throwing your markup so out of whack that you are hacking around the different error corrections across browsers. (hence the use of that IE conditional comment bull) Though I wouldn't even touch that markup just because it's white-space stripped and I don't trust pretty print not to mangle things; and that even white-space stripped it's blowing 57k of markup on showing 8k of plaintext and 40 or so content images.... No real excuse for that to be much more than 21k, if that... over half that markup should be on the cutting room floor. I'd be looking at throwing it out completely and starting over before worrying about an effect that is unlikely to ever work right cross-browser; assuming I'd waste it at all on an ADVERTISEMENT on a TWO MEGABYTE website... That's only 15 times the upper size limit I'd allow for a single page. I would advise throwing the site away and starting over on those grounds ALONE.
Hi deathshadow, Thanks, and about the overall design, the original developer is out of the picture. A full redesign isn't an option right now, either, because of the cost. The whitespace stripping is being done by minify via page caching, so it's not written that way in the code. Here's more info on the videobar itself, which is in the right sidebar, the leftmost 160x600 skyscraper in the sidebar with the thumbnail images within it: Google AJAX Search API The bar isn't an outside advertisement. It contains links to the owner's videos. The site gets between 30k-40k pageviews/day, 14k visits/day, and I think you're right about the size of everything on the page, including the # of pics, but as for the pics that seems to be what the audience wants. I've tried digging through the validation errors and will continue to try, but I don't know what I'm looking at half the time. So many of the errors are created by Wordpress or by the plugins (all of which are top 100, quite popular plugins). I'll take a closer look at the block/inline and </li> tips you mentioned. Thanks again. If you think of anything else please let me know. In this case without the time/money to do too much, I'm looking for the quickest path to a solution to get the bar properly working in "most" of the modern browsers, enough to reach the largest percentage of browser market share possible, until a full-scale redesign becomes more of an option.