Firefox loading a table awkwardly on myspace

[djkasmira]

So, I have a problem on my myspace for my music account (myspace.com/djkasmira)

There seems to be a 2 or 3 pixel black line through my table on the banner (or marquee) at the top of the page. The black line appears between my 2 table rows.

Now I'm not having this issue on any other browsers, and I'm not sure what firefox could be interpreting differently than the other two. I've tried a few different options but not getting anywhere.

Also, when i load just the table on an html document on my website, everything seems fine.
http://rsquaredelectric.net/djkasmira/marquee/marquee.html

The size of the image/table is 250px in height and on myspace you can select how high you want it and I selected 250px, and also tried larger as well but, no help there either.

I might just map the links on the image itself if i cannot get this to work, but moreso I'm just curious

[Kieran Y5]

I don't see anything wrong with it in Firefox. Why are you using a table anyway?

[JRM]

There's no doctype. This may produce unexpected results.
I agree that the table is unnecessary.

[JRM]

Just re-read your post.
If you are using this Within another CMS like myspace, then you don't need the doctype, html,head or body tags, as they are produced by the CMS. Take a look at the source code for the actual site. The bacground wrapper must be done with divs.
As it is, the html did not fill my monitor all the way to the right, so I suspect you are using absolute sizes rather that percentages.

The banner image may be loading slowly due to it being oversized. For best results scale the image down to only the max possible requirement to reduce load time.

I don't know that much about how myspace works, but i wonder how you can specify a CSS file? Do they have provisions for that?

[djkasmira]

What else can I use other than a table? an image map wont work.

<DIV>
<MAP NAME="Marquee">
<AREA
   HREF="http://www.facebook.com/djkasmira" ALT="Facebook" TITLE="Facebook"
   SHAPE=RECT COORDS="210,218,347,249">
<AREA
   HREF="http://www.twitter.com/djkasmira" ALT="Twitter" TITLE="Twitter"
   SHAPE=RECT COORDS="349,218,486,249">
<AREA
   HREF="http://www.soundcloud.com/djkasmira" ALT="Soundcloud" TITLE="Soundcloud"
   SHAPE=RECT COORDS="488,218,625,249">
<AREA
   HREF="http://www.djkasmira.com/" ALT="djkasmira(dot)com" TITLE="djkasmira(dot)com"
   SHAPE=RECT COORDS="627,218,764,249">
</MAP>

<IMG SRC="http://www.rsquaredelectric.net/djkasmira/marquee.jpg" ALT="Marquee" BORDER=0 USEMAP="Marquee">
</DIV>

Thats what I tried but every map coordinate just shows up as ".."

Is there another way this can be done?

Edit: by the way, i just have the image up now with no links or table so it looks better, however, i do have the code i tried above and also, the table code is on that website posted on the first post.

[JRM]

Another way to do it is chop your one large image into the smaller functional parts.
1) make the logo a background in the wrapper div.
then take the snipped out tab pieces and position them with individual width percentage anchor tags with the images as buttons. You can play with the margins to land them where they need to be.

That way there is no need for an image map.Each piece functions on it's own

I'm not 100% certain that you could not find a suitable CSS font to use for the tabs instead of the image, but that's a matter better left to your design preferences!

[djkasmira]

Well, I originally chopped the image up like you said into a table, but that didn't work like I wanted it to..
How would I go about positioning the images if I used just the logo as the background?
Also, what would I insert into the DIV tag to use a background for the div? I tried it a few ways to no avail..

Thanks for all the help so far, you guys have been very helpful

[JRM]

Look the CSS attributes such as background-image, width,height,margin, and display.
CSS attributes like the above will work on most elements.

All you need is the background image to be the in the wrapper div and the various anchor tags with appropriate CSS within. You can position everything with just what I have described above.
Hint: use display:inline-block on the tab items to gain full positioning control.
Give it a try and post the attempt.

[packetpirate]

Well there's your problem... you're using MySpace.

[djkasmira]

I dont think myspace likes CSS. Just tried the DIV in css multiple ways, it turned it into ".." every time I saved it :/

Honestly, I've never used CSS so I may be doing it wrong, although I copied a code straight from a website..trying to read up on it now but i feel it may be pointless in myspace. And talk all the crap you want about myspace, people still listen to songs on it :P

[JRM]

Honestly, I've never used CSS so I may be doing it wrong, although I copied a code straight from a website..trying to read up on it now but i feel it may be pointless in myspace

In my second post I queried on how a CSS file is created in MYSPACE. It has to be in the head tags which you have no access to unless they make provisions for it to appear there.
Use "inline" CSS if you can't create an use a proper CSS file. like:

<div style="background-image:url('my_banner.png');width:100%">

[djkasmira]

<div style="background-image:url('my_banner.png');width:100%">Insert pics here</div>

As soon as I save said code, Myspace turns it into

<div>Insert pics here</div>

Thats one of the ways I tried to do it the other night aswell. I'm pretty sure myspace will ONLY let you do it in HTML :/