Topic: <sup> css (Page 1 of 1)

simple question, can you change the appearance of superscript using css? seems like I should be able to, but am having no luck. also can find nothing online about this. as a side question, how widespread is browser support for <sup> tag?

probably won't be able to check back for a few days, but thanks in advance for any info.

bill

How are you trying to use css to modify the appearance of the superscript tag? It doesn't behave exactly the same way in IE, Firefox and Opera when you try to use a different font size for the superscript than the font size for the rest of the line.

Firefox positions the superscript based on the font size for the rest of the line of text, whereas IE bases it on the position it would have relative to the font size declared for the superscript. Opera behaves a bit differently also if I recall, but don't have it on this computer so can't check at the moment.

I probably explained this all badly.

1) yes, you can change the appearance. That doesn't necessarily mean that you will be able to make it do what you want, but since we don't know what you want, it's a little hard to say

2) to my knowledge, though I may be mistaken, browser support for the tag is more or less universal.

Keep in mind though that the tag exists for specific purposes,and should be used accordingly.

(Edited by DL-44 on 01-26-2005 23:16)

Hey,

thanks for the responses. I am just using it for footnotes, but when I tried to bold it to make it stand out a bit more nothing happened. then out of curiosity I tried to make the font really big and really small but nothing happened. looked basically the same in IE and firefox.

the rest of the css works and the sup looks like this:

sup {
font: bold;
}

in the app it looks like this (it is cold fusion):
<cfoutput query="qryFoot">
<cfif qryFoot.fieldname contains "vertmin">^{(#qryFoot.refletter#)}</cfif>
</cfoutput>

and this works, except I cannot seem to control the look.

would the doctype I use make a difference? I know when I went to xhtml transitional 1.0 I could no longer control the scroll bar appearance.

thanks

bill

needs to be font-weight, not jsut font. Validating your code would have caught that

also, is there a link attached? if so, make sure the css for the sup is listed *after* the css for the link.

I've played around here - http://in-dented.com/temp/sup.html and all modern browsers accept it just fine.

I had it in there also with a font size etc, but never changed it just to weight. however, changing it to font-weight does nothing. I am sure this is something very basic.

here is site:

http://161.55.120.152/ichweb/index.cfm

just choose taxa search from the top menu, then Alepisaurus ferox (4th species down) and choose the life history from the menu on the top right. you will see some footnotes near the bottom of the page.

do not fear the frame here, it seems to be best way to show drill down type data


I actually spent some time a while back validating and was grade A validated. have futzed a few things since so I need to check again.

thanks

bill

(Edited by wcr one on 02-03-2005 18:46)

In this case, it is an issue of the font simply not showing a distinction between bold/normal at that size. Such small fonts sizes often have that problem. (increase the font size and you'll see the effect)

Try perhaps setting a different font or a different size for the <sup>

font vs. font-weight does indeed make a difference!



(Edited by DL-44 on 02-03-2005 19:23)

I do not mean to say that is does not make a difference, but hat I tried it and nothing happened.

For some reaon it is ignoring that bit of css. If I increase the size or color nothing happens, though it seems to be reading the rest of the css fine.

as a side note, why could I not put all the attributes in one line for font like I would for any other text (e.g. font: bold 12pt helvetica, arial, sans-serif; )? then I would not have to use font-weight, font-size, etc, but rather just {font: ........}

bill

This is wierd. I looked at your code earlier and noticed that in your css file there wasn't any entry for sup...

Was about to post it when I looked at the page again and noticed that this time the superscripts were bold, looked at the css and there was an entry for sup now, figured you were working on it so didn't post.

Read your latest post, looked at it again and its not bold, and the sup entry is out of your css file.

Regarding using css shorthand for fonts, you can put it all there, however some browsers won't work if you leave part out, so just using font:bold; doesn't work.

yeah, I am futzing around with it a bit right now. did not realize I had to put it all in there.

I had thought perhaps the bold did not work because of size, so I changed size to bigger, but that did nothing to size or boldness. even if I have no entry for sup in teh css tho, it will still superscript it with default. In fact, that is how I first had it done. seemed to work fine, then wanted to make it a bit more eye catching and that has led me to this.

Could be a cache problem as I could see them as bold. Are you working on this from behind a proxy server? I know when i was working on pages at school I had a problem with my css file being cached on the server and I wasn't seeing changes I made. Got really frustrated until i figured that out.

so you see the footnotes on life history page as bold? look the same weight to me.

not sure about proxy, will have to ask around.

well, strike that, it seems to be working now. upped the size (big) and it took. seems to be using the full font suite (maybe), but had tried that before to no avail. glad but confused.

thanks all for the help.

for the record, I initially hit the 'increase text size' on my browser once, and it showed the text for the <sup> as bold.

as I said, try either a different font or simply increase the size for the footnotes. different fonts will all work differently as to what size is too small to stop showing a difference between bold and normal (it will also depend on the user's screen settings as to whether thy will notice the difference...). It is definately not ignoring the CSS (in part or in whole).

as to why you can't specify 'font' in shorthand...don't know. would nice if you could. but you can't



(Edited by DL-44 on 02-03-2005 21:05)

thanks to both of ya