Element Sizing

px or %

[typomaniac]

I've recently began to get an education concerning css and my problem deals with sizing of elements. Using straight html and a table tag I was able to specify a width in terms of percentages. Everything I see in css calls for using px. The problem is different resolutions on user browsers. If I make a <div id="container"> tag and I only want container to cover the top center portion (say 50%)of the browser how do I accomplish this? Reason I'm asking is because css don't seem to appreciate the percentage sign. I mean like 400px will cover different percentages of the screen at different resolutions.

[typomaniac]

ooooops. I apologize for the senseless post. Perhaps a little more experimenting/searching in the future and I can avoid such dumb questions. Actually the post in its entirety should be removed.

[lucy24]

Actually I'm glad you did post because as a user it drives me bonkers when a site stretches to way beyond my browser width and when I snoop into the code I find that every single element is hard-coded in pixels-- even when it doesn't have to be. If you're going to do this, you also have to detour into javascript or php and generate different sites depending on what the user has to work with, and most of the time you could perfectly well have used percentages in the first place.

Yes, css is perfectly happy with % measurements ;) Also ems, which can be very useful in giving text areas the desired "shape".

[typomaniac]

Another thing I've noticed... been digging deep on the use of styles and it seems that there is always some kind of a hack needed for IE. A good reference page regarding "sizing things up" can be found at [w3schools.com...] I've found lots of good info regarding the use of css at this site.....with the exception of font sizes and things like that I will join css in being perfectly happy with percentages. They have never let me down yet.

[alt131]

Hi typomaniac, and welcome to css :),

I second Lucy's comments because your posts highlight that it is unnecessary (and often quite destructive) to over-engineer and over-control code.

It is also fantastic that you figured this out yourself ;) However, I do urge you to consider where you are getting your information. w3chools, for example, is outdated, and in some cases just wrong.

Second, I appreciate it is fashionable to claim it is impossible to code for ie without hacks, but it is also quite untrue. Currently no browser confirms to the recommendations 100% - to me it is unbalanced to only complain about one of them.

Despite that, good on you for "digging deep" - and keep at it! ;)

[rocknbil]

I gave up on trying to educate designers and customers about the importance of fluid layouts using em's and percentages long ago. Every designer I've seen (at least, in recent years) always generates a pixel-perfect layout that has zero consideration for variable content or device compatibility and their customers slurp it up like a kitty at the milk saucer, and trying to educate them is received with nothing but arguments. "I'm the designer, that's your problem."

Sometimes you just have no choice if you want to eat.

Some day I'm just going to output a web site made of 1200 X 900 pixel images. Because we all know, everyone who's anyone has a 1200 pixel monitor.

it is fashionable to claim it is impossible to code for ie without hacks, but it is also quite untrue.

Amen to that . . . as far back as I can remember, I have **one** web site with a **single** IE conditional with **one** line of CSS in it. It's probably something I'm doing wrong (or was forced to do, see rant. :-P )

[typomaniac]

I know what you mean, much of the information I've dug up at different sites offering "methods" of how to do this and that often bring disappointment. Regardless of where I get the info I always test it to make sure its the real deal. One thing is for sure though....if you find it at this site I've always found it to be good. I don't know what I would have done many times without rocknbil for perl issues.

[alt131]

Some day I'm just going to output a web site made of 1200 X 900 pixel images. Because we all know, everyone who's anyone has a 1200 pixel monitor.

I would have thought 1600 minimum, and 10-mile-wide-band. To avoid inconveniencing those with even wider displays don't those images need to be a very minimum of super-high-quality unoptimised 2048 x 1600? ;)

I'm not going to argue about what needs to happen to meet contractual obligations, but I would emphasise there is a difference between what coders sometimes do, and best practise code. I think aiming for best practise doesn't mean living in an ideal world that doesn't understand the constraints of "wanting to live". It means recognising the difference between the two - and preferably choosing to use best practices whenever possible.

as far back as I can remember, I have **one** web site with a **single** IE conditional with **one** line of CSS in it.

Then is it you? :)
I remember a post from maybe 2004-2006 when someone said "I never hack for ie" (or similar). I'd always remembered it was Dr Doc - but have never been able to find the thread again. I've had a mental note for some time to ask if you could recall the discussion (and had a link), but maybe it was you who made the comment instead?

[rocknbil]

1) I was being facetious(guessing you too), check your sarcaso-meter 2) Yeah. Guilty as charged. :-P

Probably so. I've forgotten more stuff than many people will know. :-( sounds like something I'd say . . .