[thelist] why doth i hate css? let me count the ways.

Jeff Howden jeff at jeffhowden.com
Thu Oct 9 19:24:53 CDT 2003


chris,

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> From: Chris W. Parker
>
> Not just a rant, but a cry for help.
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

good, cause i think you hate css cause you don't understand how it works,
not because it doesn't work.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 1. Why is there 'font-family' and 'font-weight' but no
>   'font-color'?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

there is, it's called "color".

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 2. With the following html:
>
> <input class="submit" type="submit" value="Submit"/>
>
> Why doesn't the following css do what it SHOULD do? How
> should it work you ask? Well it should push the button
> over to the far right of it's container. What happens
> instead? Nothing. And what happens if I use text-align:
> right;? THE WORD SUBMIT IS ALIGNED RIGHT!! aarggh!
>
> input.submit {
> 	align: right;
> 	}
> ??
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

there is no "align" property.  the "text-align" property deals with content
*inside* the box, not the box itself.  the property you "need" is the
"float" property.  be careful using "float" though because if you don't
understand fully how it works it can quickly wreck your work.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 3. Why is it that when I specify 'width: 200px;
>    padding: 5px;' on a <div> I end up with a box that
>    is 210px wide and not 200px? (Technically I know why.
>    I just think it's a really stupid way to make things
>    work.)
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

ok, so you know why.  technically that's a rant and not a plea for help.

just in case you're open to having a handy reference sheet for how the
various things like height/width, margin, padding, and border play off of
each other, check these out:

http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measur
ing.asp
http://msdn.microsoft.com/workshop/samples/author/dhtml/overview/measure.htm

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 4. Why can't I easily and with one command center
>    anything vertically?  (The following code should work
>    like I would expect it to. Not because I'm demanding
>    or anything but because IT JUST MAKES SENSE!)
>
>    <div id="box">
>      <div id="vertical">hello</div>
>    </div>
>
>    div#box {
>      height: 100%;
>      border: 1px solid red;
>    }
>
>    div#vertical {
>      vertical-align: middle;
>    }
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

simple, a height of 100% is 100% of what?  the viewport?  the browser
window?  the body?  if it's the body, is the body 100% of the viewport or
less or more?

the "vertical-align" property only applies to table cells.

><><><><><><><><><><><><><><><><><><><><><><><><><><><><><
> 5. And along the lines of #4, why can't I make a box
>    stretch 100% vertically?
><><><><><><><><><><><><><><><><><><><><><><><><><><><><><

see above.

.jeff

------------------------------------------------------
Jeff Howden - Web Application Specialist
Resume - http://jeffhowden.com/about/resume/
Code Library - http://evolt.jeffhowden.com/jeff/code/



More information about the thelist mailing list