Previous Message
Next Message

Re: [css-d] golden rules

Sent by Aaron Mehl on 12 December 2002 16:04


--On Thursday, December 12, 2002 09:31:01 AM -0500 Joe Howley 
[EMAIL-REMOVED]> wrote:

> Aaron Mehl wrote:
>
>> What am looking for is a set of Golden Rules that I can start from for
>> all times. I am not talking about a book to buy or an article to read
>> but something along a chart, maybe more than a page. Too much is said
>> on each browser and confuses me and I end up having a page that works
>> in none.
>
> Well, I can't give you any specific rules at the moment - but I think I
> can help you along in the general Golden (or at least Shiny) Rule
> department.  The trick here is that XHTML is what you use to structure
> and describe your information.  Mark up and describe your content
> faithfully and accurately (and validly).  Then we come to the wonderful
> world of CSS (struggling to keep this on topic).  The trouble is, it's
> hard to define Shiny Rule for CSS aside from "make it validate."  The CSS
> should, ideally, present your marked-up information in a helpful and
> aesthetically pleasing manner.


>
> Browser compatibility, I'm afraid, is all you.  If you know your audience
> (eg an intranet running IE5.5), design for that, but on the greater web,
> there's just no way to be sure what people will be using.  Thus we come
> back to the importance of your markup - all the css in the world won't
> help a non-graphical browser, so don't sacrifice your markup for the sake
> of pretty appearance.
>
>> I. Xhtml or HTML
>
> Whatever works for you.  XHTML is, of course, more forward-compatible,
> but maybe HTML has something you need.

Will every browser load xhtml?? do I mark the page index.html or 
index.xhtml??

>
>> II. Strict or Transitional -quircks
>
> See above.
>
>> III. Structural design Divs spans, is there a difference between class
>> and id
>>      Should the html tags be used for structure?
>
> Class v ID is easy, a class is a _type_ ("flavor") of an element that can
> be used throughout a document (if you declare div.chocolate, you can have
> any number of  <div class="chocolate"></div>s in your document).  An ID
> is like a name for one specifice element (declaring div#george, you can
> only have one <div id="george"></div>).
>
> DIVs are, theoretically, for DIVisions of content.  A SPAN simply SPANS a
> set of content.  One difference is in their structural role - a DIV is
> block-level, getting its own box in the page layout, while a SPAN is
> inline.  Think of the difference of drawing a square around a paragraph
> of text and highlighting a few sentences (if that helps....).

---------------------------------------------------------------------------
-----------

Aaron --- Not exactly my question or the rule I want to derive.
A page contains a Header section, a content section(s), a footer section, 
somesort of navigation area etc.
How can I make sure that this is implemented cleanly and will generally 
work cross browser???

If the browers are mutually exclusive then why should I bother, they must 
have things in common and things that differ.
A general rule will permit the writing of html/css combinations that will 
generally work. I could use a combination of divs and tables just as easily 
as any other way. But I would like to keep it simple and I see no advantage 
of nested divs over tables. (I know standard compliant)

The problem is that divs appear to have a dual purpose, as a structural 
element and as a container for formatting. If a div has a background color, 
a border etc. it is much more than a division of a page.....

I made a navigation bar using divs the I swithced to ul li but then I used 
ul and li not as a list but as a design element. I find this nitemarish 
because then I need a seperate ul for a real list, and a seperate ul for a 
list with a square or image or a hundred id='s for every seperate 
situation??? The code gets bloated quickly and now instead of a mess of 
nested tables I have a new mess.

>--------------------------------------------------------------------------
-------------------------

>> IV. Units of Measure what to use and where ems pxs etc
>
> This is one of those Holy Wars which we try to avoid (because it'll all
> end in tears), but the general idea is that ems are relative to each
> other and thus most friendly onscreen in terms of letting the user resize
> teh text in his or her browser.  Px are absolute pixels measurements and
> thus fixed onscreen.  We're edging onto the browser compatibilty fracas
> here because some browsers (Moz, Op) will let you resize text no matter
> what the unit, while some more widely used browsers (IE) are fixed in px
> terms and only resize ems and %s. And then some folks argue that you
> should use pts on print stylesheets and print sheets only, because
> they're designed as a print sizing technique.
> 
---------------------------------------------------------------------------
---

Aaron ---- But I need to know if I place my logo at the top of the page a 
bit indented.it will remain there.Is the more likely to happen with the use 
of percentages or pixels or ems. I know this is a rough question but a have 
wondered if an absoultely positioned item would be less likely to break (or 
run away if I had used percentages or ems instead of px??

---------------------------------------------------------------------------
------
> Ultimately, see I.
>
>> V.  Colors to use are we still stuck with web safe or not? Hex names
>> or color names?
>
> See I.  Sorry, it depends.  Personally I think that if you have to have a
> color match an image exactly you've already lost the battle.  Here's the
> dirty secret - you have no control - _none_ - over the platform your
> webpage will be viewed on.  Browser, operating system, color settings,
> monitors - all out of your control.  For this reason, I don't believe
> there's any such thing as "websafe," and I say to hell with it and use
> whatever hex code I want.  Images are transparent if they need to blend
> in.  This is, however, my opinion.

>--------------------------------------------------------------------------
--------

Aaron ------- Of course the same holds true for fonts-I guess I forgot we 
need a font rule. see below
But what about color names. Sometimes no named color fits the need ok but 
black, white red etc.??? Why shouldn't I use them??

---------------------------------------------------------------------------
------
>>
 VI.  Centering
>
> Text?  You can use text-align: center.  Elements?  Well, give it a width
> and declare both margin-left and margin-right to be auto, or else just
> declare both margins to the same width, but there's compatability and
> behavior issues both ways.

-----------------------------------------------------

Aaron ---------- "there's compatability and
> behavior issues both ways." This is quite annoying when in plain old html 
you can center. The funny part is I don't remember this not working.
Ther must have been a reason this wasn't included in the CSS specs. But it 
has only given me problems.

A Rule would tell me how to center not how to not center something or how 
to almost sometimes center something. Images, text, divs. tables etc all 
need the ability to be centered??????????????

---------------------------------------------------
>
>> VII. Positioning Divs pictures uls ols etc. which it the best way?
>
> See I.  it's all about the context you're trying to do this in.
> ---------------------------------------------------------
Aaron --- Well if there are no rules then I can give up before I begin. My 
experience is that things do work with css it is just my own confusion that 
gets in the way. IE Mozzilla and opera tell me that the standards are not 
adhered to by the browsers and we are back to the old work arounds. That 
being the case it seems to me that the must be some method to the maddness 
and this could be stated as a rule???
( I could be wrong but this is for arguments sake) I am trying to come up 
with a generic way to write a style sheet.

>> VIII. muliple style sheet
>
> Well, for different media, it's a good idea.  In terms of modularization
> throughout a site, again, see I.  (Boy do I feel like a jerk saying that).
---------------------------------------------------------------------------
------------

And what do multiple style sheets do for mutiple browsers?? lets say a IE 
style sheet, a Mozilla sty sheet, Opera, Lynxs etc. Is this a way to solve 
the problem or just more confusion added????

---------------------------------------------------------------------------
--------------





>> IX.   inheritance Cascading
---------------------------------------------------------
X. Fonts How do I get those fancy logos without graphics unless I use fancy 
fonts, but can I use fancy fonts?? Are the generic fonts that exist 
everywhere that can be used this way.
>
> ?
>

Thanks so far you are right this is quite wiki but is there a wiki already 
for this?? If so I will gladly join in.

I would like to here others opinions as well

Aaron

> Wow, I'm sorry, I wrote way more than I intended to, and wasn't as
> helpful as I would have liked.  Maybe we can clarify this list into the
> basic issues of css application that new users will need to understand,
> and then come up with brief summaries of each of the options and how they
> can be used.  Sounds like wiki material to me.
>
> Hope this helps, please ask again for further clarification of anything,
> ===
> joe howley
> http://joe.sameperson.net/
>
> ______________________________________________________________________
> css-discuss [EMAIL-REMOVED]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>



AM in the AM (PM)
Previous Message
Next Message

Message thread: