New feature: view your songs quickly.

[LPChip]

Span works better in this case, were it not that Firefox messes up the spans badly because they're not in-line elements.

err.... <span> is indeed an inline element here, where <div> is not. you can change any tag to inline or block by applying the css attribute display:block; or display:inline;

I know, but its the in-line element that screws up the layout. They make it two lines etc...

But I'll see what I can do to make it better. Maybe today, maybe tomorrow, but I'll check it out.

[LPChip]

I'm currently trying to set it using a span, but I just can't get Firefox to change the width of the span element.

Does anyone know how I can change this? If not then I can't really support firefox for this.

For those of you who want to help, this is the current way that I process the code. Note that, the red text can't be changed.

<table><tr><td>{possible not read icon}<a href=topic>

<span style="width:200px;text-align:center;border:1px solid #BBF;background-color:#EEF;">\\1</span>\\2

</a>{possible <br> + more pages}</td></tr></table>

Note that the \\1 and \\2 are part of a regex. \\1 = the style, \\2 is the rest.

[Saga Musix]

if i were you, i would leave out the width and the centering and just leave the colors and teh border...

[LPChip]

if i were you, i would leave out the width and the centering and just leave the colors and teh border...

Lol, its the width that I want to add, because it makes it so much more easier on the eyes. Firefox doesn't support this properly so FF shows what you'll get without.

But I think I'm going to leave it like this.

[bvanoudtshoorn]

Do this:

Use something like this:

Code Select Expand

<div class="genre">--</div>

--------8<-------8<--------8<--------

div.genre {
 float: left;
 width: 200px;
 height: 80%;
 text-align: center;
 margin-top: 10%;
 margin-bottom: 10%;
 vertical-align: middle;
 border-style: solid; /* etc for formatting */
}


Alternatively (and this is probably better), instead of using % for the height, define the entire row's height to be something like 4.5ex (the height of 4.5 "x" characters in the current font). Then use

Code Select Expand

 height: 3.5ex;
 margin-top: 1ex;
 margin-bottom: 1ex;

which should fit in much better.

The big trick here is floating the div. You might also want to include the rest of the content in another, similarly left-floated div with the same height, so that it doesn't flow around funnily.

I haven't tested this specifically, but this is the guts of my normal work-around for issues like this (normally in navigation bars, but hey!).

Hope this helps!

[Saga Musix]

i was thinking again about this problem tonight and came to the same result as bvanoudtshoorn (using float:left), so i was a bit too late

[LPChip]

I actually had the float:left with 2 divs, one for the style and one for the name, but it was that one that made everythign get out of proportions. A div just has line breaks before and after the tag, which I cannot control, so it will always move it down regardless of how I position it. It just makes the table cell bigger.

Nice try, but it didn't work.

[bvanoudtshoorn]

A div shouldn't have any line breaks before and after the tags. For example, see the page http://test.pbc.wa.edu.au/index.php?section=25. This demonstrates what I was talking about. =D

[LPChip]

Yes, this was exactly as I had it.

And it works great until you start to put something in front of the DIV!

I had this:

<table stuff><a><div style=...>style</div><div style=...>songname</div></a></table stuff>

Which worked good enough, but then a new post was made and phpBB added the icon:

<table stuff><a><image><div style=...>style</div><div style=...>songname</div></a></table stuff>

The output is as follows:

[bvanoudtshoorn]

Oh, I see. So the problem is that phpBB is throwing in code. How annoying! Does that image have a specific class? 'Cos then you could float it, too... =D Alternatively, as that'll probably be the only image in the TD, you could have something like

Code Select Expand

table.tableClass td.tdClass img { float: left; }
Maybe that'd work...

[LPChip]

I'm not sure, but as I've done it now, with the SPAN option, it works. Just not in FireFox. Well, FireFox does show the SPAN, but not using my predefined width.

Also, the usage of the DIV makes the hyperlink behind it appear wrong in IE. As you already can see with the style now, the icon changes to an I beam. I can ofcource fix this, but with the DIV, the hoovering doesn't work properly. I'm not really prepared to look at it further until I see a new option presented that I haven't already tried.

For now, DIV and any other inline elements are ruled out, but appearantly Firefox demands that you can only change the width of inline elements.

[Saga Musix]

I'm not sure, but as I've done it now, with the SPAN option, it works. Just not in FireFox. Well, FireFox does show the SPAN, but not using my predefined width.

did you probably forget to use display:block for the <span>?

[LPChip]

I'm not sure, but as I've done it now, with the SPAN option, it works. Just not in FireFox. Well, FireFox does show the SPAN, but not using my predefined width.

did you probably forget to use display:block for the <span>?

No I didn't, but firefox just doesn't see that as a reason to suddenly support the width, unless I make it inline, but then it also adds the linebreaks in front and after..

[Sam_Zen]

I use FireFox, but I don't have much of a problem with the shown variable width.

[Saga Musix]

This user haven't posted any songs in the Free Music Downloads forum.

ut-oh, baaaad grammar mistake here! :lol: He have? They has?