L.Adlon

The situation seemed to be improved a bit by me making the frame rate of the gif a bit less (from 15fps to 12fps), reducing the colour from 64 to 32, and the overall number of frames. Sometimes it plays flawlessly... other times, a micro stutter at the start, and then fine. So, a bit better. Still curious what the deal is, and if it could still be improved on.

I tried adding the gif as a <div> background image, rather than an <img> (...setting the height/width, and not to repeat). The performance seems a bit better. So far, if anything, it just has a micropause after a 1/2 second, then plays fine. Is adding an image using the <div> background-image:url(image/splashtitle.gif) method completely supported and safe, or is it still better do just use an <img> for an image? Why would hovering over an unrelated hyperlink on the page make the 'stuck' gif play again?

Cool. Ya, I was surprised to see that in that one page of mine. All the others don't have that. I guess that page was created back when I was still learning (...well, I totally still am, but you know what I mean), and that's what was suggested at the time. Okay, I'll get rid of those. I figured they were redundant these days. Thanks again, Ingolme. Cheers!

For those following along... I got the Dewplayer to finally work... No idea what I did differently. But, once I conquered all that, I realized that the Dewplayer is not an HTML player, so my music wouldn't be heard on several devices (...as was the case with my previous mp3 player I was using on my site). The jPlayer looked very good, but I was really confused by the installation. The quickstart guide seemed relatively easy enough... but when I tested it, it claimed my browser or Flash needed to be upgraded, which I don't think is the case. I couldn't get anything to work, and things just got too complicated with all the coding involved. I then found another HTML/Flash player called MediaElementPlayer. That one was much easier, and all I had to struggle with was my usual battle with CSS positioning (....I can never get that to fully work!). Ultimately, I just used a layout that didn't need special positioning, and all is well. Just got to try it on some other platforms to be sure.

Just wondering if anyone here can shed some light on this... I have a spash page that has a swf file and an animated gif on it. Normally, it works just great, but sometimes I get some odd behavior. The gif will load, play maybe a couple of frames, freeze, then after a bit, it'll play a few more frames, freeze, then sometimes stay frozen, and sometimes finally play fully (and loop). My understanding is that if a gif is loaded, and there's some issue, it'll just sit on the first frame. Is this random behavior I'm sometimes seeing it struggling to load in time? Would it not wait until all the frames are loaded before playing, or does it just plough through, and pause if it is still loading the frames it's reached? Any simple thing I can do? I'm rusty on the whole preloader thing, if that's what I should be doing with the gif. It's not a big deal, but would be nice if I could eliminate that occassional glitch. Doesn't always happen, though. I tried a few suggested non-javascript preload methods, but they don't seem to either work properly (display code on page) or just don't help the matter (gif still randomly pauses). One clue... for some reason, hovering the mouse over the hyperlinks on the page seems to suddenly make the gifs animate again. Would the swf loading it's frames in the meantime possibly cause pauses in the animated gif playback? (Yep, hovering over a hyperlink definitely fixes it... It's like the gif needs to be woken up or something!) I found another thread about this issue, although I'm not following the solutions: http://www.webdeveloper.com/forum/showthread.php?90647-RESOLVED-ie-animated-gif-freeze-til-page-loads

Thanks, Zyggy... Ya, it just seems 'safer' (currently) to stay at HTML4.01.... as I assume that is fully supported (...well, as supported as we can expect), and HTML5 may not be (currently). If I'm wrong, I'd love to know... but I'm assuming that's where we currently are.

I was looking at one of the sites I made a few years ago, and noticed that on the main page, I had the style definitions, (in the <head> of the page),within HTML comments... I'm assuming as a precaution against browsers that didn't understand CSS style or something? Ex: <!-- .redtext {color:red;} .bluetext {color:blue;} --> So, does that technique ring a bell to anyone? Is it still a thing? I'm assuming these days that you can safely put style definitions in the head without putting it within a comment, right?

Hi, Day. Ya, I see what you're saying, although I'm not fully sure of how to then place the bottom of the header frame. That's probably some sort of relative positioning or something... and CSS positioning can be a real mind-bender, if you're not a seasoned CSS vet. Even so, the graphic elements I have consist of the sides of the header being different from the side of the main body area. The header one is a non-repeating, unique graphic, and the main body one is a repeating graphic (as the body section is 'liquid' or whateve the current term is for a variable height screen. Previously, I did it all with tables (...ya, I know...), as I couldn't get the CSS positioning to ever work properly in past years. But, this week, I managed to successfully do it with CSS on the header part (fixed size)... but am not sure how to (best?) do the vertically flexible main body frame. I sort of have ideas, but even if they would work, I'm not sure if they are the ideal. The tiled graphic for the sides would probably be done using background-image, rather than an <img> file... and set to repeat? I'll have to experiment with it, but like I said, even if whatever I come up with works, I'm won't be sure if it's the best (most compatible/stable/efficient) method.

Ah! That makes sense. I've never really used the overflow before, except maybe once for an iFrame, I think. Okay, that totally makes sense. I'll throw that in, and see how it goes. Thanks

Here's the coding for the split (with the actual text and stuff stripped away for ease of reading): <div style="width:920px; margin:0 auto;"> <div style="width:300px; margin:0px; float:left;"> <img title="Photo" alt="" src="image/photo.jpg" height="256" width="221" class="gallery" style="float:left; margin-left:40px; margin-right:0px; margin-bottom:20px;" /> </div> <div style="width:615px; margin:0px; float:right;"> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> <p>(PARAGRAPH OF TEXT)</p> </div></div> The split itself always worked fine... just the text following it overlapping (which is now fixed, now that I'm actually using the correct syntax for clear). Just the wrapper is acting weird. I tried setting the height of the wrapper to 100px, just to check... and it did expand (although it didn't push the split elements down). So, right now, the wrapper is 0px heigh (in Firefox, at least), rather than incasing the split elements, and expanding as a result. Must be something outside of this affecting it... although I did a validation, and there's no open tags or anything like that.

Ah! I noted something in davej's coding... Although my theory about using a clear on the element after the split was right, I was completely wrong in my syntax for it. I did 'float:clear'... as I was going by memory... and, my memory obviously failed me there! I'll try that out. But, I'm still trying to sort out why the wrapper is prematurely ending before the two split elements... as it the closing <div> was before the split elements... at least in Firefox. In the editor, it displays properly (two halves are within the wrapper). If that were working, I imagine the text after the split would be pushed away from the split by the wrapper. I'll have to port it over to the othe machine, and see how Internet Explorer displays it. I'll try and paste the code here in the forums (I have to transfer it between computers first), but it seems like it's coded right (...again, the editor shows it correctly, so I suspect it's 'right' but something else is borderline, and triggering a fail somehow). I may try and get another HTML editor, as the free version of the one I'm using (HTML_Kit) is a bit old. I hand code everything, but I use the editor for the convenient color coding, instant preview, and stuff like that. I've been looking for a good (free) replacement for HTML_Kit. [A bit later] Cool, the clear:both; on the text after the split solved the issue of the text being placed between the halves (...my bad). So, the only thing still weird (although, seemingly not breaking anything) is the wrapper not enclosing the two halves. The wrapper almost seems redundant, but maybe I'm wrong.

Yep, I'm doing the styling with CSS. The sample I have at the top is simplified and figurative, just so you see the structure. Can't get the wrapper div to hold the two halves. It just starts and ends before the two halves (in Firefox, but works in my editor, which is more like IE in its behavior). The formatting/positioning of the two halves is working fine... it's the containing div that isn't working, and seemingly as a result, the text AFTER the split section is spilling in between, rather than having the wrapper div holding it away. As far as I can see, I was doing it the same way as that second link example.

Hi. So, I wanted to be clear on a few things, so here's some questions I'm hoping you guys can answer: 1) If I want to do a website that is HTML5, am I right in thinking that it's a matter of both declaring it as such in the DOCTYPE, and being sure that my coding is HTML5 compatible? So, in other words, if I've been good about my coding, it would simply be a matter of me changing the DOCTYPE? 2) Is there currently any disadvantage to having a site HTML5? Do all browsers/platforms currently support it fully? Is there a disadvantage to staying at 4.01, aside from not being able to use some of the newer HTML5-based tags/features? 3) I've been trying to find a good solution for a multi-file mp3 player to put on my site so people can listen to some of my music (selecting songs from a list, as opposed to them just mercilessly playing when one enters the page). I found one player that is supposedly compatible on iOS (unlike the regular flash-based ones), but it seems to be implying that it is HTML5. What would I need to be sure of on my site in order to be allowed to use it? Anything? 4) If flash-based mp3 players won't work on iOS, what is the compatible alternate? Javascript-based? Jquery? HTML auto tag?

DewPlayer is cool, but I can't seem to get it to play more than one song, even though I seemingly have it coded properly to play multiple files (and I'm using the 'multiple' version). It only seems to see the first file. argh...

So close... The two divisions are working, but I'm still getting the text that follows that split sneaking in between them. Do I need to so some sort of a float:clear or something to the content that follows the split columns content? Also, when I create a <div> that contains the two left and right <div>'s, it always seems to just end up being a 1 pixel line above the two other <div>'s... not sure why it's not containing them. Basically, I hav it set up like this (<p></p> at start and end represents text before and after the split section): <p></p> <div style="container"> <div style="left"> <img> </div> <div style="right"> <p></p> <p></p> <p></p> </div> </div> <p></p> ...and what happens is that last <p></p> ense up positioning between the image and right text. [Additional note] From what I can see, I think something in the code on the rest of the page is interfering. I've pulled just the split section out of the page, and put it in a clean, blank page, and it works there.. so, something outside is interfering... I'll have to check for unclosed tags or something. Looked clean before, but maybe I missed something. [Later] I checked things out... No unclosed tags. Just can't get it to work. Editor is showing it fine, but Firefox has the main container not containing the two halves. Just a single pixel line across the top, the two halves (positioned properly) underneath, and the text that follows after the split starting between the two halves, as opposed to starting clean underneath the split. Seems the coding is all there (since it works in the editor), but obviously something gets messed up in Firefox. Any theories?

I found the 'DewPlayer', which seems pretty clean and simple. I think I'll use that. Anyone have any opinions on it?

So, one <div> after another, but have the first one set to float left, and the other to float right? I'm just not sure which is the proper way to position those, since there's several positioning methods available in CSS... position:absolute, float, etc. @DarkxPunk: Thanks, I'll look into that. The first one gave me an error (needs java, although all I am blocking is google-analytics), then another error. The second one works, though. I popped the hood and checked the code. Ya, seems that's how they were doing it... floats. Not sure why mine didn't work before. I'll have to play around some more, and see what I screwed up. Thanks guys.

Anyone else? I'm not sure if I should use my current jukebox or risk trying some other one I might find on the web. The current one seems to be javascript based, but also uses a swf file. I'm not a coder, at least in this sort of sense, so I can't really follow it fully. Seems to be creating a bunch of variables, the first involves SWFObject, and the others are playback parameters. Not sure if this one I'm using will continue to be compatible over time, or what. All I need is a jukebox type thing on my site, where it shows a list of 6-8 songs store on the webspace, and you click on them to play them. Alternatively, it could have transport controls to play and to jump to the next song.

Reason to stay with 4.01? Because I don't know any better, I guess. I'm not sure of how fully supported HTML5 is... nor really how I would update to it in the first place. Is it just the DOCTYPE declaration, and the use of HTML5 specific tags/attributes? Transitional is technically probably the most accurate description of my coding, anyway... Still shedding the last few bad habits (tables for formatting... occassionaly using <br /> to add spaces between things, etc). Today, I've been recoding my site to use the CSS alternative to <center>, as well as getting rid of most of the <br /> tags. I've been good with most of the other things... I'm using style sheets, and trying to do everything so it's html5 friendly. Really, at this point, it's just the occassional use of tables for formatting... and not having a full understanding of the more advanced methods available.

Hello again, guys. Okay, on the subject of using <div> rather than <table> for formatting, could you give me the proper CSS coding for the following example: On one part of the page, I want a photo on the left side, and some paragraphs of text on the right. Done normally (no tables, and no special <div> formatting), it works until the paragraph is longer than the height of the photo, and then you get this ugly text wrap over, underneath the photo.... fine if there's a lot more text following, but pretty gross if you just have a line or two. So, ideally, you'd want the text to stay within the right half of the screen, even after it (vertically) passes the photo. Done with a table, you just do a simple 2 cell table. Done... but, ya, not 'proper'. I've been trying it with <div>, but am still battling it a bit. I've defined an overall wrapper (containging both halves), then I have the photo as a <div> within that (although I'm not sure if that's redundant) floating left, and then I have another <div> containing all the paragraphs, floating right. As I expected, it breaks... Right now, the text AFTER that all (which should be below all this) ends up being placed first, so I really messed something up. I'm sure i's an incorrect use of float, or the <div> nesting. Could someone outline the proper coding for this sort of thing? Again, basically this block of the page is divided in two... Photo on the left, text on the right (with the left edge of it never going further left than the right edge of the photo). Should be really straightforward, but I never really fully grasped proper control of float (...assuming that's what I'm screwing up here).

So far, I've set the left and right element styles to float:left and float:right respectively. That seems to work... or, at least, doesn't seem to be causing anything to break. In both IE and Firefox, the text frame I did (header part of my above sample) seems to be working so far.... although I'm not sure if it's break-proof, or if it's done the ideal way. Here's what I have so far: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Untitled</title> <style> .body {margin:0; padding:0} .topframe {display:block; width:960px;} .left {display:block; float:left;} .right {display:block; float:right;} </style> </head> <body> <div class="topframe"> <img src="images/top.jpg" width="960" height="20" border="0" class="top" /> <img src="images/side.jpg" width="20" height="100" border="0" class="left" /> <img src="images/side.jpg" width="20" height="100" border="0" class="right" /> <img src="images/bottom.jpg" width="960" height="20" border="0" class="bottom" /> </div> </body></html> Is this 'proper' so far? How would I go about doing the second part, where the frame is vertically flexible (and the side frame image repeats vertically as needed)?

Hi. I've been trying to shed some of my past bad HTML habits, and have been successful to a point, but am still clinging to a few things because I can't seem to get the proper CSS methods to work. One of the final bad habits I've been clinging to has been the beloved 'using tables for formatting', and now I've been trying to replace that with proper CSS... but am (once again) not fully successful. I've read quite a bit of literature on it, but I still get things like gaps and slight misalignments... plus, what I'm trying to do has elements that might not be present in standard tutorials. So, I'm hoping someone here could give me a sample of the proper, current coding method for this simple structural sample. Here's what I'm trying to set up (without tables!): The interface consists of two 'frames' (not in the HTML sense)... One frame surrounds the header, the other surrounds the main content, and is vertically flexible. So, the individual graphic elements (in order) are: Fixed size top horizontal bar (960x20) Fixed size left vertical bar (20x200) Fixed size header image (920x200) Fixed size right vertical bar (20x200) ...then, directly underneath (attached) to that: Vertically flexible sized left vertical bar (20x?) Vertically flexible sized content (920x?) Vertically flexible sized right vertical bar (20x?) Fixed size horizontal bottom bar (960x20) All of this is horizontally centered to the monitor. Up to now, I built it with a table for the first part (header frame), and a table for the second part (with the two side bar images being repeated background images, rather than regular 'cell content' elements, to allow for the image to repeat as much as necessary, as the whole frame gets vertically stretched as needed). I'm now trying again to make it with pure CSS. I've defined a style for each element (headertop, headerleft, etc), and have each of the <img> elements sitting (in order) in the main body, within a <div>, and defined a style for that, as well as setting the border/padding of the body to 0. I figure you'd use float or something like that to push the side bars to the sides? Or, is it best to use the CSS positioning attributes? This is where I'm lost. Can anyone help out? (Sorry, I know you probably get positioning questions a lot... but I haven't noticed anything that also has vertically flexible sections)

Damn, I'm still not getting it to work. Here's my latest test code. Now Firefox is displaying it fine, but IE is not centering it. What am I doing wrong here? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>Untitled</title> <style> .center { display:block; margin:0 auto; width:960px; text-align:center; } </style> </head> <body style="margin:0; padding=0;"> <div class="center"> <table summary="" border="1" width="960"> <tr> <td align="center">CELL CONTENT</td> </tr> </table> </div> </body></html> @dsonesuk: Are you saying the width has to be 960px or 95%... or can it be any width, as long as it is defined? [Additional note: One thing it may be is that my version of IE is not up to date, since I don't use it. Could that be why?] [A little while later...] I managed to try out a newer version of IE, and it DOES center in that one. So, I guess the support for the CSS was a bit late coming. Okay, so I just want to verify with you guys... The coding I showed above is all fine, right?

Ya, I'm sure it's got to be some simple thing either missing or conflicting. I'll tinker with it today and see if it's still giving me grief. Thanks.

Hi, guys. Yep, I had been trying to do it with the margin:0 method on a simple test page (where all there is, is a single cell table for now). Seems like Firefox doesn't center it, but IE does. I had also tried applying that sort of thing to the body tag, figuring maybe I could just get it as a global thing that way. I'll experiment some more. I must be missing something (although IE is doing it fine).