Another way to get the HTML side down (at least it has workd for me) is
the W3C validator. I use the Firefox Extension 'Checky'. After a couple
of site builds with errors, complient code becomes second nature.
CSS is great but different browsers do display differently with IE being
the most PITA.
I code on Linux and use Firefox/Mozilla for most tests. Opera and
FF/Moz is pretty much the same across all OS'es. Konqurer displays
pretty much like Safari (althoug I do have a Mac and test with Safari)
I have a hard time testing against IE so I have to visit the in-laws to
do that.
I do have access to a Win2K server but IE6 on Win2K renders different
that IE6 on WinXP. I wish MS would sell the $50 lite windows version
here in the states.
I use this in most of my CSS (tables, rarely-used, are used for
corporate data)
body { margin: 0px;}
img { border: 0px;} /* for images that are links */
table, td {padding: 0px;border-spacing: 0px;border-collapse:collapse;}
/* If tables are used */
Alexander Henry wrote:
> 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>
>
---------------------------------------------------
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)