It works fine on local pages on my computer. When I upload it though, the buttons only partly work! Most styling is gone; the word "Next" or "Previous" appears, but without the styled borders and colors. For some reason the right colors appear when I hover and actually click. But when idle, there's no styling.

The CSS is here: josephdiamo.com/joe2.css

The class is ".button"

I'm looking at it through Safari on a Mac. I haven't had a chance to look at it through other platforms or browsers yet.

Your page has a number of opportunities for improvement in the way it is laid out. With that in mind, I put together a different approach for you to consider.

[Etc.]

Hi, and thanks for taking the time to do this. I get the impression that "your page has a number of opportunities for improvement..." reveals you are something of a diplomat.

I copied out your markup and CSS and it looks great -- exactly as it did before, in fact. Am I correct in guessing that your version is more up-to-date, standards-compliant, best practices, or what have you? My markup tends to be a mess. I always wind up with extraneous matter, like comments-within-comments and other stuff I should delete.

Will your markup work more efficiently? It certainly is a lot cleaner.

Most of what I know about web design I learned from a couple of Sitepoint books, the Sitepoint and similar sites, and this forum. Also trial-and-error, which opens the door to all kinds of muck.

In my post, I said "...opportunities for improvement in the way it is laid out." I should have said, "...in the way it is coded." The "look" is yours. I was referring to the code, not the "look". Poor choice of words.

I encourage you to add comments to your CSS file. My personal files are peppered with comments, yet a year later I never fail to wish I had written even clearer and more detailed comments.

The code that I wrote is very different from yours in that the page is structured differently. I hope you will take some time and try to understand what I did and why... how the pages behave differently.

I have uploaded a slightly revised copy of the HTML and CSS files to the dropbox folder.The changes are:(1) Changes the doctype to HTML5 as it provides better multimedia support than HTML 4.01. I have no useful experience coding for multimedia so I spent much of today reading about it. Live and learn.(2) Puts all 4 videos on one page. I did this just to demonstrate how easy it is to add content to this layout (code) and to show that the column heights and their background images adjust to the same height when content is added or removed. You can delete the vids you do not want on the page or add more :).(3) Comments out the "Next Page" button. It can be restored by deleting the comment marks.(4) Adds 3 lines to the CSS file to support a style change to the vids that gives them a border, a box-shadow, and rounded corners. Delete or modify those CSS properties if you don't care for the "look". This is the only change to the CSS file.(5) Deletes invalid "attributes" from the <iframe> tags.(6) Deletes the <bgsound> tags. On your page, the <bgsound> src attribute pointed to files with an .mpg suffix. There are no .mpg files. The sound files are .mp3, so the <bgsound> tags were doing nothing except triggering validation errors. FYI: The <bgsound> tag is a non-standard element that has been declared obsolete in HTML5. People hate being surprised by loud audio on a page especially when there was no obvious way to turn it off. That tag really should never be used. http://www.w3.org/TR/html5/obsolete.html#obsolete(7) Increased the height of the <embed> tag from 40 to 72. It looks tall in FireFox but seems to be necessary in Chrome. Weird tag.(8) The code flags no validation errors.

There are still things that can be improved. For example, your text sizes are in pixels; better would be ems. Do not take that to mean that all dimensions, including padding and margins should use ems, too. Text yes; margins and padding require discretion. We can talk about ems and pixels if you would like or you can search our threads. There are several discussions about units of measure for fonts.

If you have questions about the way any part of this page is coded, please don't hesitate to ask. Hopefully, someone else will jump in who has multimedia experience.

In my post, I said "...opportunities for improvement in the way it is laid out." I should have said, "...in the way it is coded." The "look" is yours. I was referring to the code, not the "look". Poor choice of words.

[snip]

No, I absolutely understood you were referring to the code and not the look. Incidentally, is it markup or code? Is that merely semantics?

I do intend to study your code closely, because I see this as a means of improving my own limited skills. I tend to learn one way of doing something and then stick with it -- functionally illiterate, as it were. I need to get out of HTML 4. (Won't be much study today because I'm so busy. Tomorrow is Super Bowl Sunday and I live near Denver...this place is out of its mind with SB hysteria.)

Your revised page is a big improvement in terms of appearance, with the rounded corners, drop shadows, and so on. I like it a lot. Joe, the guy whose site it is, had asked for a second page, which I just added not even a week ago. That's why I was messing with buttons. But I'm sure he will like this version.

You point out that even with all 4 vids on one page -- or even with adding or subtracting material -- column height and associated background images will adjust. Very useful, obviously. It wasn't that way before -- one of the other things I've been fiddling with.

Interesting that the page now validates. And interesting that you tinkered with the <iframe> tag. I had merely copied it all out of the embed function on YouTube and Vimeo. That code is what prevented my original markup from validating, but I didn't want to mess with it on the assumption I would break it.

I don't remember where I got the snippet of code for the sound files -- that's what you mean with the <bgsound> src attribute, right? Wherever I got it, it was the same as with the embed code. I found it, it worked, and I didn't want to mess with it. You have demonstrated that armed with the proper knowledge, such fears are groundless. Live and learn, as you said.

As to pixels and ems...this surprises me, since pixels are such tinier increments. Seems that would be best for fonts. When I do use ems it is usually for wide margins.

In any case, you have given me a lot to consider, and I truly appreciate you taking the time to delve into this humble page in such detail, to the point where you spent "...much of today reading" about related matters. Thanks much.

I think of markup as stuff like HTML tags that wrap around content. For example, placing <p> tags around some text is 'marking it up' as a pararaph. I think of code as something like a JavaScript etc. I guess markup is a subset of code.[/ot]

HTML, CSS, JavaScript, PHP, etc, are specific terms. I think of "code" as a genericized term that encompasses all of them, and "markup" as Ralph described.

Depends.... Whether to use pixels or ems or percents for widths, padding, and margins depends on the context in which the choice appears. Through learning and experience, those decisions become easier to make. However, the rule of thumb is that there is more than one way to skin the cat, so there is usually no "right" or "wrong" choice. Some techniques work better than others, though.

I tend to use ems for top and bottom padding and margins, and pixels or percents for widths and left and right padding and margins, but not always. Buttons with text contents are usually padded with pixels and/or ems. Depends.

I'm probably overlooking something, so I'll stop trying to sound smart, but this should give the idea.

Make test pages... test in different browsers and in the case of IE, in different versions... change font sizes to see how it affects the layout... test creatively. Try to find the limits of your design.