On Sat, 28 May 2005 18:45:11 -0700, Siri Amrit Kaur
<
tigerflag@tigerflag.com> wrote:
> "Integrated HTML and CSS: A Smarter, Faster Way to Learn"
> http://www.bookpool.com/sm/0782143784
>
> It seems like a sane way for me to learn CSS.
>
> Siri Amrit
<pre>
I started out with the standard O'reilly books. They were a great
starter, but at a point very misleading. It's almost as if they
deliberatly chose tutorial language that makes you write CSS-compliant
code which only works on CSS-compliant browsers, and hardens your brain so
you can't learn how to write CSS-compliant code for all browsers!
Specifically:
When learning padding, border, and margins. It tells you the W3C
compliant way in-depth. Then there's a small note at the bottom of the
chapter saying IE calculates them differently. If you declare a width, it
is taken as width with padding, and margin is ignored, while in CSS the
real "width" of the box is the sum of all, width, padding, and margin.
Also, position is calculated differently in different browsers, if you set
it away from defaults.
Later on in the book, it gives you tricks to "hide" stuff from IE.
body > div {
#Style rules IE won't see
}
So I'm coding along trying to do all these highly complicated calculations
and re-definitions for all the browsers, and in the end it is of course
still not rendered the same, and it's hell to debug.
REAL SOLUTION:
div {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border-width: 0px 0px 0px 0px;
}
DONE!!
IGNORE POSITION COMPLETELY! Keep it at default.
When defining "layout" structure, only use width, float, and clear to
control where you want stuff. Then, for the elements INSIDE these layout
boxes, define margin and padding. For some designs, that means you'll
need two divs, one nested right inside another, to get your desired
result. So mote it be. This is much easier than the alternatives.
For example, in the image directory thingie I have,
http://newclient.ahtechllc.com/Products/ , you'll see that each line is
wrapped in a <div class="line"></div> . Everything works fine without
these line-divs on all browsers except IE6 on Mac. It seems to be doing
Japanese, going top-bottom first then left-right to determine the location
of the next left-to-right line element. So the uneven paragraphs made the
positioning unpredectable. It was also unpredictable when the image
height was not the same for all images in other browsers. So the wrapper
div was the solution. Moderate-heavy glitch, easy fix.
</pre>
--
--Alexander
---------------------------------------------------
PLUG-discuss mailing list -
PLUG-discuss@lists.plug.phoenix.az.us
To subscribe, unsubscribe, or to change you mail settings:
http://lists.PLUG.phoenix.az.us/mailman/listinfo/plug-discuss
(text/plain)