Markup/css oddity

[SIZE=1][FONT=Arial][SIZE=1][SIZE=4][SIZE=3][FONT=Verdana]Hi all,

Usually I just lurk and learn, but I am totally stumped by an oddity I’ve encountered. I humbly ask the advice of readers and experts here.

I’ve been designing a two-page site for a friend of mine. It is online here:

josephdiamo.com

For a few days I’ve been fine-tuning it. I’m trying to add button to each page, to take users back and forth more easily.

I made a nice little navigating button to do that, using the instructions found here:

I changed the CSS for size and styling, but basically used the above.

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.

Any insights or help would be greatly appreciated.
[/FONT][/SIZE][/SIZE][/SIZE][/FONT][/SIZE]

Hi John. You have some errors in your style sheet, as listed here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fjosephdiamo.com%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en

Around line 71 you’ve got some lines commented out, but the commenting is broken, and that’s wiping out your .button styles.

Comments inside of comments don’t fare so well


/* .next {
	font-family: arial, verdana, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: white;
	/* background: #d8c0d8 36px; */
	/* background: #eee8aa; */
	a:active:url(images/next_2.jpg);
	padding-right: 10px;
	padding: 8px;
	margin-top: 30px;
	border: solid black 0px;
} */

Thanks for these two answers; they made all the difference! I didn’t know that about comments within comments.

Looks great! I can see I need to get away from coding script a bit more and revisit CSS yet again

johnkelin,

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.

The <doctype> is changed to HTML4.01 strict instead of loose.

The header image is now in an <h1> tag over some appropriate text. If the image cannot be found, the text will be visible. Google likes <h1> tags so it can identify the subject of the page.

The <hr> tags were replaced by assigning a class “hr” to the preceeding paragraph which draws a border-bottom beneath its box.

I do not know anything about the iframe, embed, or bgsound tags, so those remain pretty much as you coded them except that I added <div> tags around the embed tags.

I deleted stuff from the HTML and CSS that were not related. I’m sure you can put it back if needed. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="joediamo.css">
    <title>Joe Diamo</title>
</head>
<body>

<div id="outer">
    <h1><span>Joe Diamo - Percussionist, Vocalist</span><img src="images/top.jpg" width="1000" height="260" alt=""></h1>
    <div class="content">
        <div class="tcell left-column">
            <p class="head_1">Welcome to my web site!</p>
            <p class="hr">Below and at right are a few short samples of my work. This site will be frequently updated to demonstrate a broader selection of styles. I hope you enjoy the music!</p>
            <p class="hr fontsmall ">"Joe Diamo is a highly accomplished drummer/ percussionist, pianist and vocalist. He works regularly as a solo artist; in duos with many fine musicians (as drummer and pianist/vocalist); and in quartet and sextet settings as a drummer with the legendary pianist Joe Bonner."</p>
            <p class="head_1">Contact information</p>
            <p><b>Phone:</b> (720) 890-7208</p>
            <p class="hr">Or, <a href="mailto:josephdiamo@comcast.net">send an e-mail</a>.</p>
            <p class="head_1">Audio Samples</p>
            <p class="about">Joe at the piano.</p>
            <p class="title">Night and Day</p>
            <div><embed src="audio/night_day.mp3" width="" height="40" autostart="false" loop="false"></div>
            <bgsound src="audio/night_day.mpg" loop="1">
            <p class="title">The Lady is a Tramp</p>
            <div><embed src="audio/lady_tramp.mp3" width="" height="40" autostart="false" loop="false"></div>
            <bgsound src="audio/lady_tramp.mpg" loop="1">
        </div>
        <div class="tcell right-column">
            <p class="head_2">Video Samples</p>
            <div class="vid">
                <iframe width="420" height="315" src="http://www.youtube.com/embed/KjPmZ-BDT5Y" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="vid">
                <iframe width="500" height="281" src="http://player.vimeo.com/video/83000158?title=0&amp;byline=0&amp;portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div>
            <p>See <a href="http://vimeo.com/channels/joediamo">Joe's video channel</a> from <a href="http://vimeo.com/freudmp">Freud Media Productions</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
            <div class="button"><a href="http://www.josephdiamo.com/page_02.html">NEXT PAGE</a></div>
        </div>
    </div>
</div>

</body>
</html>


/* joediamo.css */

body {
    padding:0;
    margin:0;
}
#outer {
    width:1080px;
    margin:0 auto;
}
h1 {
    position:relative;
    height:260px;
    background-color:#000;
    color:#fff;
    text-align:center;
    padding:0;
    margin:0;
}
h1:after {
    content:"";
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
h1 span {
    display:inline-block;
    vertical-align:middle;
    margin:0;
}
h1 img {
    position:absolute;
    top:0;
    left:0;
}
.content {
    display:table;
    table-layout:fixed;
    width:100%;
    border-collapse:collapse;
    margin:0 auto;
}
.tcell {
    display:table-cell;
    vertical-align:top;
}
.left-column {
    width:313px;
    border-right:3px double black;
    background-image: url(images/bg_paper.jpg);
    padding:0 20px;
}
.right-column {
    text-align:center;
    background-image:url('images/022c.jpg');
    padding-bottom:30px;
}
.hr {
    border-bottom:1px solid #999;
    padding-bottom:1em;
}
.head_1 {
    font-family: arial, verdana, sans-serif;
    font-size: 16px;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}
.fontsmall {
    font-family: arial, verdana, sans-serif;
    font-size: 14px;
    font-style: italic;
    color: black;
}
.head_2 {
    font-family: arial, verdana, sans-serif;
    font-size: 24px;
    font-weight: bold;
    text-decoration: underline;
    color: black;
}
.about {
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    font-weight: ;
    color: black;
}
.title {
    display:inline-block;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: black;
    background: #eee8aa;
    padding-left: 5px;
    padding-right: 10px;
    margin-bottom:0;
}
.vid {
    font-size:14px;
    font-family:arial, erdana,sans-serif;
    margin-top:40px;
    margin-bottom:40px;
}
.button {
    text-align:center;
}
.button a {
    display:inline-block;
    background:#ff3333;
    border:1px solid black;
    /* color: rgba(0, 0, 0, 0.55); */
    color:white;
    font: bold 15px "helvetica neue", arial, helvetica, geneva, sans-serif;
    text-decoration:none;
    text-shadow: 0 2px 2px rgba(255,255,255,0.2);
    background: -webkit-linear-gradient:(top, #34696f, #2f5f63);
    background: -moz-linear-gradient:(top, #34696f, #2f5f63);
    background: -o-linear-gradient(top, #34696f, #2f5f63);
    background: -ms-linear-gradient(top, #34696f, #2f5f63);
    background: linear-gradient(top, #34696f, #2f5f63);
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    -ms-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 8px 0 #1b383b;
    -moz-box-shadow: 0 8px 0 #1b383b;
    box-shadow: 0 2px 0 #1b383b;
    padding:2px 24px;
}
.button a:hover {
    background: #ff6666;
    background: -webkit-linear-gradient(top, #ffcccc, #ff6666);
    background: -moz-linear-gradient(top, #ffcccc, #ff6666);
    background: -o-linear-gradient(top, #ffcccc, #ff6666);
    background: -ms-linear-gradient(top, #ffcccc, #ff6666);
    background: linear-gradient(top, #ffcccc, #ff6666);
}
.button a:active {
    color: yellow;
    background: #3333ff;
}

You can also download these files from
https://www.dropbox.com/sh/qbd3nxuku8td0tf/WunZqzOIju

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.

Anyway, thanks again; I appreciate you doing this.

A follow-up.

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. :slight_smile:

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. :slight_smile:

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. :slight_smile:
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.

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.

Off Topic:

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.

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. :slight_smile:

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. :slight_smile:

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. :slight_smile: