PDA

View Full Version : css size not right -- should be easy fix



djr33
04-11-2006, 07:38 PM
hey, guys. my friend wrote up some css for a page on our site, and it worked fine. It was supposed to mimic that of another page... and it did. i'm using php to totally automate the entire section of the site, so I need the css to autoformat, instead of the manual stuff we had before.
So... i'm also using it on another page, a search page. for some reason, the size is just off.

http://thebrb.com/stockpile/search.php
^should be fixed here.

http://www.thebrb.com/stockpile/tutorials/effects/compositing/muzzleflashes/
^should look like this. this isn't using the css though.



...<style type="text/css">
a {color: #FF0000;
font-size:10pt;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0px;
text-decoration: underline;}
body {
color: #3A4F6C;
font-size:7.5pt;
font-weight:bold;
font-family:Verdana, Arial, Helvetica, sans-serif;
letter-spacing:0px;
}
</style>...

this is just in the page, not a seperate file, but I will seperate later.


Anyway.... what's with the size being off? I just need to be able to have csss automatically make the text look like the blue-green text on the second page. I also need to be able to have the headers and such set easily (<h1>text</hi> or whatever).

I'm sure this is obvious to someone who knows css... i just don't. Sorry for asking a stupid question :)

Twey
04-11-2006, 07:48 PM
"just" off? The text on the first page is about twice the size of the text on the second page, at the resolution I have on this laptop. It's very noticeable, because the text on the second page is nigh on unreadable if I don't increase the text size.

Anyway... on the first page, you're using pt (points); on the second one, you're using px (pixels). There's a big difference, but neither should be used for text size. Pixels can't be (or shouldn't be able to be, technically if not practically [the one time IE does things properly, it makes things harder for users... gah]) resized, whereas points are meant for printable media and have highly variable sizes onscreen (I think; search for the post in question, it was one of Mike's and I don't remember it too clearly [not to criticize your writing ability, Mike]).

Wow, I've used far too many brackets in this post.

djr33
04-11-2006, 07:55 PM
just as in simply. Yeah, it's way off.

Hmm... alright.

I'll look into that then.

Again, I didn't write it... maybe I should just try my own version.... we'll see.

thanks.

mwinter
04-11-2006, 10:05 PM
whereas points are meant for printable media and have highly variable sizes onscreenThe point unit is defined in inches (1/72th), and heralds from print media. Look at your word processor; what's its unit for font sizes? It'll either be points (pt) or picas (pc), and there are 12pt to 1pc.

Though it's possible to convert an absolute unit, like millimeters, inches, or points, to something more meaningful for a monitor, systems aren't usually calibrated properly (or so I'm led to believe).

When it comes to pixels, there's a similar problem. The resolution of a particular monitor might be very high. For example, laptops with 15 inch displays can have pixel densities as high as 133ppi. This 17 inch monitor has a pixel density of only 84ppi at its current resolution. The difference means that something 12px in length will be about 3.5mm here, but on that high-resolution display, it will be less than 2.25mm. That's approximately 60% of the size, and equivalent to 7px. If this something was text, it would be quite unreadable.


not to criticize your writing ability, Mike:p


Wow, I've used far too many brackets in this post.Yes. Yes, you have. :)

Mike

djr33
04-13-2006, 07:24 AM
Hmm.... I just was playing around with the page for another thing, error testing and such... I ended up outputting some text before the layout of the page, and it was sized correctly.

I'm guessing this means that since the layout is all in tables.... that the text is doing something different than the code tells it to because its not body text, but rather that of a table.

Am I on to something?

Twey
04-13-2006, 10:55 AM
I've given you the answer.

djr33
04-13-2006, 08:43 PM
I've heard your answer... and I will figure that out.
But... when this is applied to my pages, it works if the text isn't in a table, and doesn't work if it is in one.
Isn't there some special thing in CSS that is for text within tables?

Twey
04-13-2006, 08:51 PM
Well, your test page doesn't work any more.
But no, there's no reason a text size applied to a parent element won't work in a child, unless the property is overridden somewhere down the document tree.

djr33
04-13-2006, 09:04 PM
Hmm.... ok.

I'll try a new test page then. I'm reworking that... trying to get it perfected... big project.

Anyway... let's see...

http://thebrb.com/stockpile/fix/index.php?act=test

There... same code for each... nothing special, I don't think...

It's generated by php, but the browser doesn't care about that.... so.... yeah.

Twey
04-13-2006, 10:00 PM
Looks correctly-sized to me.

djr33
04-13-2006, 10:48 PM
Compare the text in the table and that below... two different sizes.... no variations on the code for each... just that one is in the table...

maybe you missed the one at the bottom 'cause it's tiny... look right under the bottom of the red navbar.

Twey
04-13-2006, 11:05 PM
As an ideal test of whether this is indeed the problem, try replacing:
<table width="100%" cellpadding="5"><tr><td>This text is inside a table, ...</td></tr></table></td>
</tr></table><div width="779">... this text is not...</div>with:
<table width="100%" cellpadding="5"><tr><td>This text is inside a table, ...</td></tr></table><div width="779">... this text is not...</div></td>
</tr></table>You might also want to try validating and neatening your markup.

djr33
04-14-2006, 01:29 AM
It's not "neat" because it's php generated, so the linebreaks are near-impossible to make look pretty while keeping the php code itself neat.

Also, what you did would just move the text at the bottom inside the table too... I mean... it wouldn't change much... just put the text in there and, inevitably, make it big as well...

You just moved the </td> down, yeah?

Twey
04-14-2006, 12:21 PM
The main point is that you've removed it from two tables, while one of those tables may be the only problem.
It's not "neat" because it's php generated, so the linebreaks are near-impossible to make look pretty while keeping the php code itself neat.But not impossible :)

djr33
04-15-2006, 03:51 AM
Oh. Sure, then. I can setup a page that will check that... I'll do one line in two tables, one in one and one in none... busy.... will do later tonight.

As for neatness.... I can work on that... but it's a bit of a pain... so much of the layout is variables... and since they change, what might be pretty for one might not be pretty for another... we'll see :)



EDIT: Nevermind on later.
Here:
http://ci-pro.com/misc/phptest/css.php
So... just as I thought... it's all about being in a table... what's up with that!?
That code is as simple as it gets... the table code is plain, only with a "border=1" to make it obvious where the tables are, but, just so you now that's not related, I tried at first without that, but figured you'd rather see it with the border, so its easy for figure out.
So...
thoughts?



I know you said this above, but I got kinda lost in some of the details...
which method is best for measuring text? Seemed like you said they all have downsides.... which is the least bad, I guess? :p
(I mean... which method should I use for the future/perfecting this?)



EDIT AGAIN:
Ok... just dove into this blind... and it worked. In the css, i changed "body {...." to "table {..." and that's it.
WEIRD!
http://ci-pro.com/misc/phptest/css.php <<without the new code
http://ci-pro.com/misc/phptest/css2.php <<with (and with the old too... that's formatting the text outside the table still)

Someone care to explain? I mean... I guess I get it... the stuff in the table is different than the rest... weird. More info?

Twey
04-15-2006, 12:03 PM
Since you're using exactly the same CSS, you can use commas:
body, table {
color: #3A4F6C;
font-size: 7.5pt;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 0;
}However... no. I'm afraid I've no idea why this happens. :) But I'm awful at CSS. Maybe John or Mike will know.
which method is best for measuring text? Seemed like you said they all have downsides.... which is the least bad, I guess? :pOn-screen, percentages are best. ems would be fine, but IE mucks them up. There's also an ex unit; I don't know what the ups and downs of using that are. Pixels are bad because they can't be resized (in theory). Real-world units such as points, centimetres, inches, &c. are fine for printable media, but will vary dramatically onscreen.

djr33
04-15-2006, 07:20 PM
Ah, sure... I'll add a comma. Thanks.

Yeah... I would like to know what's up with this... works now, but I'm still quite curious.

If percentages are best, then how does that work, exactly? I mean... 100% of... the window? What's it based on?

Twey
04-15-2006, 07:35 PM
I mean... 100% of... the window? What's it based on?The browser's default text size.

djr33
04-15-2006, 08:09 PM
Ah.

But doesn't that mess with formatting? I mean... it's nice to be able to have some control over what general size it is, even if a line of text ends up varying by a few characters in length.
I mean... you can't control the look very well, it seems.

Twey
04-15-2006, 09:16 PM
But doesn't that mess with formatting? I mean... it's nice to be able to have some control over what general size it is, even if a line of text ends up varying by a few characters in length.
I mean... you can't control the look very well, it seems.The idea of web design is not to try to change the user's browser preferences to suit the site, but to adjust the site to make provisions for the user's browser preferences. A well-designed site will look good no matter what the text size.

djr33
04-15-2006, 10:20 PM
I realize that.... however, I'd like to have some control over how it's presented... hmm... I guess it makes sense.



Real-world units such as points, centimetres, inches, &c. are fine for printable media, but will vary dramatically onscreen.But... you're saying to use something based on the user's default text setting? I mean... wow. Heh. Those will surely vary too. Right?

Twey
04-15-2006, 10:29 PM
Those will surely vary too. Right?Right, but they'll vary in accordance to a "known-good" value, and, more importantly, they'll vary in the same way as your site (if it's well-designed).

djr33
04-15-2006, 10:34 PM
Hmm... makes sense.

Seems like it will be hard to pick the "right" size... 'cause it depends on each browser.

Do the majority of non-sight-impared viewers have the same size? If someone can't see, then by all means, forget my design and change it so they can, but for those who can, i'd really like to be able to format it in a way that works really well.

Twey
04-15-2006, 10:40 PM
Do the majority of non-sight-impared viewers have the same size?Certainly not. Default size (in real-world terms) will depend on their browser, their monitor size, their browser window size, their resolution... the only thing we can be sure of is that it's a size they find acceptable.

djr33
04-15-2006, 10:53 PM
Generally, though, will it look the same on my computer as others? Those variables, if changed correctly, can cancel each other out... monitor size vs. text size vs. resolution... etc.

If not, I'd rather go with something that at least suggests a size for them to have.... though... there are downsides here.

mwinter
04-16-2006, 12:01 AM
In the css, i changed "body {...." to "table {..." and that's it.
WEIRD!
http://ci-pro.com/misc/phptest/css.php <<without the new code
http://ci-pro.com/misc/phptest/css2.php <<with (and with the old too... that's formatting the text outside the table still)

Someone care to explain? I mean... I guess I get it... the stuff in the table is different than the rest... weird. More info?A quirk in older browser versions cause tables to not inherit font properties, other than the family, from their ancestors. In quirks mode, which you invoke due to omitting a document type declaration entirely, more recent browsers will emulate this behaviour.

By the way, do you know just how difficult that text is to read without Verdana?

Mike

djr33
04-16-2006, 12:22 AM
By the way, do you know just how difficult that text is to read without Verdana?Huh? If you don't have the font, doesn't it revert back to the default... times? oh... wait... you mean the size is too small.... hmm.... weird.

Ok.. the table thing makes sense.

quirks mode? document type? how do I or should I fix ("fix"?) this?

mwinter
04-16-2006, 12:31 AM
Huh? If you don't have the font, doesn't it revert back to the default... times?If the user doesn't have Verdana, the browser would try Arial, then Helvetica, then a generic sans-serif type face. Times wouldn't get a look-in. :)


oh... wait... you mean the size is too small...In part, yes. I've mentioned why Verdana shouldn't (generally) be used several times in these forums, and others have discussed it all over the Web.


quirks mode? document type? how do I or should I fix ("fix"?) this?Google is your friend (http://www.google.com/search?q=quirks+mode), here. You might also want to look specifically at DOCTYPE switching (http://www.google.com/search?q=doctype+switching), as well.

Mike

djr33
04-16-2006, 12:48 AM
Thanks for the info... we'll see what happens :)

Twey
04-16-2006, 12:21 PM
If not, I'd rather go with something that at least suggests a size for them to have.... though... there are downsides here.That's what you're doing. You should be suggesting, say, 90% of the browser's default size (for small text) or 110% (for large text).

djr33
04-17-2006, 04:45 AM
But you say that varies, so my layout will be totally different for each person who sees it. That isn't a great thing... that's what I'm saying.

Twey
04-17-2006, 10:51 AM
Not totally different. Just different. It should still be the same basic layout; just that the widths and heights vary to match the users' needs.

djr33
04-17-2006, 07:55 PM
If the user is the typical person without vision problems, will it look close to identical, then?

If someone can't see well, then it obviously makes sense to let them have big text, but for everyone else, I'd like to know what it's gonna look like...

Twey
04-17-2006, 08:08 PM
If the user is the typical person without vision problems, will it look close to identical, then?Yes -- only the size will differ; the proportions should stay more-or-less the same.

djr33
04-17-2006, 08:12 PM
proportions should stay more-or-less the same.
I'm using images a lot in the layout, so they can't be scaled.
Oh, well... no big deal. It should work out ok.