Text-Align, IE but not FF (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets



Message

ou812 -> Text-Align, IE but not FF (11/13/2005 23:51:47)

I have some code(a page itself) that allows the user to create their own HTML page, which allows them to create an announcement type page. Not being knowledgeable enough in CSS I'm not sure what to do - In IE the code I created works fine, but in FF it doesn't. As usual, I'm guessing IE is letting me get away with something.

Here's an example of what I'm creating: 

<span style="WIDTH: 100%; TEXT-ALIGN: center; FONT-SIZE: 14pt; FONT-FAMILY: arial">
My Test1<br>
</span>
<span style="WIDTH: 100%; TEXT-ALIGN: right; FONT-SIZE: 12pt; COLOR: blue; FONT-FAMILY: arial">
My Test2<br>
</span>


I let the user type in text and then choose a bunch of attributes for the text. But I'm not able to get the TEXT-ALIGN working in FireFox. I need the lines to only have a <br> between them too.

Any ideas? I would love to get this working for FF too.



Tailslide -> RE: Text-Align, IE but not FF (11/14/2005 3:07:17)

Hi

If you do this: 

<style  type="text/css">
<!--
.center {text-align: center; font-size: 14pt; font-family: arial;margin-bottom:5px;}
.right {text-align: right; font-size: 12pt; color: blue; font-family: arial;}
-->
    </style>
</head>
<body>
<p class="center">My Test1</p>
<p class="right">My Test2</p>

</body>


It works.

You could also include the styles inline in the <p> tags - it's just more flexible not to.

I think the problem is that when you try applying positioning on the item it must become block rather than inline and so span won't work (just a guess). If you try the same thing using <div> instead of <span> then it works too.

I know you wanted a single line break between the items but you can just fiddle with the margins top and bottom to get the separation you want.

BTW- don't use pts for the font-size - try using %s or keywords instead - pts are really a print thing.



Kitka -> RE: Text-Align, IE but not FF (11/14/2005 3:42:54)

quote:

try using %s or keywords instead


What is a "keyword" when applied to font-size? Is it related to ems?



Tailslide -> RE: Text-Align, IE but not FF (11/14/2005 6:50:40)

<ramble>
Keywords are more akin to %s or the old "font-size=3" as they are related to the defaults set on the users' browsers (FAIK). The Medium keyword will be whatever you've got set as a default - so it's much like setting 100% as a font-size. One of the good things about keywords is that they're not effected by child/parent sizing. Small within x-small is still small (not teeny!).

As most designers tend to think smaller text looks "prettier" the tendency is to set the font at small or x-small (which works out at about 14px and 12px respectively taking IE's default 16px).

Problem is of course that other browsers may not use the same default font-size - I think Moz browsers tend to be 14px which doesn't make a huge difference from IE using Keywords. The real killer is that Mac's default font-size is much much lower - off hand I think it's 12px so setting small as the base font size means that Mac users get somewhere around 8-10px font-size. Of course very old browsers hate keywords but I frankly don't care much about NN4 or IE4 anymore and just feed them a plain page.

I did read an article (can't find it in my bookmarks) which says that xx-small is the same across all browsers so in theory you could set xx-small as your base font and then scale up. Haven't tried this yet myself.

One of these days I'm going to play around with the different methods and figure out what I actually prefer (Yeah I've read the Noodle Incident but there's frankly TOO MUCH INFORMATION on there). Until then I tend to stick at around 76% for a base font.
</ramble>



ou812 -> RE: Text-Align, IE but not FF (11/14/2005 9:47:42)

Thanks for the reply. I can't really do what you suggest because of coding/logic difficulities. It would become a nightmare to have it work this way (for me), although I agree it is cleaner. To give an idea, the user is allowed to created as many lines and as much text with as many different variables (font, color, size, style) as needed. Then, this is all written to a DB for displaying on another page. There could be 10's or 100's of different tags. This is why I was going with the inline formatting - mostly for ease of coding/storing.

Anyway, what does seem to work is changing my <span>s to <div>s, which I didn't even think of. Well, it works as a quick test at least for me. I'll have to change coding around and try out the quite a few variations. So thank you! Saved me more hours of confusion trying to get it to work.

And, thanks for the size info too. Will take care of that too!



jaybee -> RE: Text-Align, IE but not FF (11/14/2005 10:30:12)

quote:

Cost-effective, Scalable Data Warehousing Solutions


Well they will be when the font issue is sorted! [:D]



ou812 -> RE: Text-Align, IE but not FF (11/14/2005 11:47:06)

LOL. Webiste, I don't know, but definitely very scalable data warehousing. Altogether different company though [;)]



Kitka -> RE: Text-Align, IE but not FF (11/14/2005 15:59:59)

Many thanks for the explanation Tailslide. I was aware of small & medium etc being used for font-size but had no idea the collective name is "keywords".

Thats why I love this place - I learn a lot. [:)]



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875