DescentBB

My band has a website that's pretty boring and unoriginal. So a friend of mine who's a Marine whipped up a little template for me and I would like to use it. The problem is he designed it on a Mac and when I try to view it in IE or Firefox it doesn't look right Since he's in Iraq and unable to work on fixing it, I was hoping someone here could point in the right direction. I have some HTML abilities, so if you talk slow and use small words I could probably understand

In the .zip file there's a picture called coldsuzy2.psd which is how the site is supposed to look for reference.

Here's the template.

Thanks in advance

Well, for starters there's something strange about the file "news.html". Looks like it contains both Mac and Windows style line breaks? Don't know how that happened, but a copy/paste and resave fixed it.

The HTML looks pretty good. Frames are teh evil, but ignoring that... The scrolling is disabled on the main content frame! That's bad. Changed NO to YES in index.html. Also, there's a bunch of extra spaces in some of the alignment tags in news.html. I removed those as well, and it fixed the alignment issues.

With those minor fixes, it now looks good to me:

Looks good in Mozilla too. I don't have an IE immediately available to test, but the code looks correct, so it should work.

I'm re-zipping the files and uploading it here. I can dig deeper if it still doesn't work, but see of that doesn't solve the problem first.

It's a very nice design, btw!

Thanks a ton! It looks great in Firefox, but IE is another story:



The navigation links are there, but you have to scroll to see them. Weird. What's the evil thing about frames?

Err.. Ok. I'll take another look at the code. Figures IE would find a way to screw it up. It has no respect for the web standards.

As for frames.. They're awkward when it comes to bookmarking pages, for one. Most browsers will only bookmark the frameset address, meaning anyone returning via a bookmark will always find themselves starting at the same page (whichever is defined in the frameset) instead of the page they were looking at when they bookmarked it. Furthermore, frames can make printing the proper pages difficult. Frames also make hyperlinks more complicated, because you have to keep track not only of the page url you're linking too, but also which frame you're targeting. It's a common mistake, for example, to link to another site without targeting the entire window, resulting in the new site being shown inside your frameset. Some browsers handle these issues better than others. But there is the potential for some confusion, especially among less-computer-savy web users (i.e. almost all of them ).

None of these issues are insurmountable, though. If you're careful and use frames properly, they're really not too bad. I confess, I've used frames in some of my designs in the past. But I try to avoid them whenever possible. And it's almost always possible.

Ok, the biggest issue mucking up your design in IE is that IE considers whitespace characters to have height. Many of the horizontal bars in that design are created with table cells containing a spacer image. Problem is, as IE sees it, those cells also contain a text character (spaces/newlines). To fix this, you must remove all the whitespace characters (spaces and newlines) from within the TD tags, such that this:
becomes this:
Yes, it's a PITA because it screws up the formatting of the code. But that's the way it's gotta be if you care about IE.

thx, I'm on it.

Also, in news.html, there are a number of <tr> tags that should be </tr> tags. These could confuse some browsers. Lines 85, 90, 95, 100, and 105 are wrong. (Those numbers are prior to removing the spaces and line breaks as I suggested previously.)

edit: this code block is what I'm looking at:

In nav.html:

This block Should either be surrounded by <p> or <div> tags, or incorporated into the Table. See, the <a> tags are inline elements, not block level. Technically according to the web specs (I think) text like this should never exist outside all block level elements. Alternately, I think you could fix the IE issues by simply putting a single <br> tag prior to the first <a>. I think that will fix it, but I don't think it will be "proper" html.

Wow! That was really easy. Thanks a lot, Scott.

Now, I just have to get the content from the site and plug it in.

edit: Just a quick question that you might know. Under the part where it says "Test Text" I want to put a player that will stream music. Similiar to the musicmyspace player. I see that's it's flash, but would it be difficult to put a player there?

http://musicplayer.sourceforge.net/

This one looks like it would work pretty cool. How do I stick on that page?

It's not unlike including an image with an <img> tag. Yes, the tag(s) are more complicated, but the principle is similar. Just stick a block of code like this:
in place of the Test Text.

I'm not sure if they intend you to use the swf file off their site, or upload it to your own but either way works, technically.

One problem however, the slim version looks most appropriate for your site, but it's 400 pixels wide. The bar on your site with the Test Text is only 300 pixels wide. It should be fairly trivial to modify the Flash movie to make it 300 pixels instead (they provide the FLA source file for download, nice of them) but it would require Flash to edit. I have Flash MX (Flash 6), but I'm not sure if that's new enough.

Edit: had to remove that big code block. Made the page much too wide. Anyway, I found this page with instructions and example code.

Awesome. It actually seems easier than I thought. I have some version of flash, so I'll give it a shot, but I'll let you know if I can't make it happen.

Thanks again scott.

http://coldsuzy.com/news.html

How do I get the text part to scroll instead of shooting down and making the page huge?

2 ways; First the simplest, since it doesn't require a separate document:

Inside your <td> tag, surround all the text with a <div> tag. Set it's style properties like so:
Set 300 to whatever height you want.

This is easy and probably the way the W3 would prefer you do it. It also has the advantage of failing gracefully if it's unsupported by the browser. The page would just behave as it does now. You may find though that this method doesn't work on as many browsers as..

Method 2: The IFrame. Insert into your <td> an <iframe>. Put the text in a seperate html document, and point the iframe to that. This will work with older browsers, but it has all the disadvantages of frames.

Although, in all honesty, I would choose to have the whole page scroll as it does now. Having a piece of the page scroll can be inconvenient, because you wind up having to scroll a page within a scrolling page if your browser isn't tall enough to fit the fixed height text field. This can get messy. It wouldn't be so bad if there was a way to make the scrollable text area size to the browser window height, but unfortunately, I don't know of a reliable cross-browser method to do that. I can sort of get the iframe to behaving like that in mozilla, but not konqueror. Then there's IE.. :/

I think the design works fine with the page as you have it now.

Actually, a better solution, if you really want to scroll just that text area, would probably be to replace the table layout with a more complicated frameset layout. Using a frameset, you could get the page to scale to fit the browser windows height, and allow the text to scroll within that.

Well, I say better.. but that's debateable. It would make better use of the browser window space, and avoid scroll within scroll problems.. but it has all the disadvantages of frames. And.. it'll be a PITA to code, since it would require many more separate html documents.

edit: Here's the problem I'm trying to describe:

I think what I'll do is just have a page with older news on it. I'll just have the last 4 or 5 updates on that part. Although I might run into this problem on other pages....

I see what you mean...hrm. I don't think I have the time to invest in creating all those pages

I do have another question though. The links on the nav.html aren't set up correctly. What I mean is when you have the site running and click from the news page to the band.html page it opens in another window and is missing the navigation bar. I figured out how to make it open on the instance of the browser, but it's really not how frames is supposed to work right?

http://www.coldsuzy.com/NewSite/index.html

see what I mean? the nav bar disappears when you go to the band page.

ya'll be doing pixies covers.
;-0

Yeah, we used to play Where Is My Mind all the damn time. It's a good song, granted, but my guitarist had a hard on for the ★■◆●ing little riff in there. He's like, "this is the best riff ever, and it's so damn easy"

NM, fixed.

Thx Dcrazy.

Okay, one more problem.

I'm using a cool little flash mp3 player on the home page: http://www.coldsuzy.com

It has the ability to have multiple playlists, but I haven't been able to figure out how to do that.

Here's the player I'm using:

http://www.jeroenwijering.com/?item=Flash+Mp3+Player

And here's what it says in the readme about mulitiple playlists:

readme wrote:VARIABLE

there is one variable you can set in html: the location of the playlist. this is
handy if you want to use multiple playlists for the mp3player. suppose you have a
file called "alternate.xml", the code will be this:

<object type="application/x-shockwave-flash" data="mp3player.swf?playlist=alternate.xml"
width="280" height="280" wmode="transparent">
<param name="movie" value="mp3player.swf?playlist=alternate.xml" />
<param name="wmode" value="transparent" />
</object>

From what I can see...

The player will load whatever playlist you define in the <object> tag. I wouldn't exactly call this "multiple playlists" myself. It's a single playlist, just defined by a variable in the HTML.

You can have multiple playlists by creating multiple HTML pages, each with a different list defined in the <object> tag.

Or, you can set up a script to select from a list of playlists and insert the chosen list in the <object> tag. This could be done with a client-side scripting languages like JavaScript or a server-side language like PHP, ASP, or Perl. I highly recommend the server-side approach, because it's browser-independent; It does depend however, on what your server supports. A PHP example is provided here.

Okay, but can I make the playlists linkable so that someone browsing the site could choose on their own what list of songs to play?

For instance, "Demos" would play unfinished songs, "Live" would play, duh, live songs. Etc.

Certainly. That's demonstrated in the PHP example I linked to above.

I'd recommend using PHP if your server supports it.

We're good now