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