On Tuesday 31 May 2005 01:16 pm, Alexander Henry wrote:
> <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>
OY VEY! I appreciate your time telling me all this. I'm saving it, but
it's all Greek to me now. I barely know HTML, and don't know any CSS
yet.
All I want to accomplish is a simple, pretty little webpage with some
info on non-toxic perfumes and contact info. It looks like I'm going
to have to spend ages learning complex programming (for me it's
incredibly complex and hard to learn) in order to do it, because I
can't afford to pay someone to do it for me. Either that, or spend
time learning a point-and-click page-building app, regardless of the
code clutter it may create.
Siri Amrit
---------------------------------------------------
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)