Jason,
On Jun 6, 2005, at 10:27 PM, Jason Baker wrote:
Re: http://blunx.no-ip.com/jason/muchbetter/front.html
if you view the page in firefox you will see something very pretty,
but IE totally disregaurds my attempts to make the content contained
within a bounded div box.
Additionally IE doesnt wan't to render the bounding box for the same
general content area in full size, instead it just renders the box as
needed for a simple " " rendered within the box.
can someone help me figure out the problems listed and perhaps guide
me to a great starting resource for css? all i have at this point is
w3schools and the numerous examples shown on this mailing list's wiki,
hacking together the jumbled css i have thus far from examples is
obviously not helping me much :)
I'm now where I can check in ie/win, so I'm going to come at it from a
more general perspective. I too come from a programming background.
In some ways, the web is like more traditional programing. You write
code and it comes out in some fashion as a finished product. but the
resemblance ends there. In the web world, the user is king. He or she
may well be running a different browser on a different operating system
with different fonts installed and very different default settings.
Some users will have their own code that alters the look and layout of
your pages to suit their needs. Desktop app users don't have anywhere
near the control that web users do. In short, while you can
communicate a certain design, you cant expect everyone to see the same
thing, so build for flexibility. I'm looking at your page in four
browsers at the moment (there are more browsers, but my screen is only
so big :) ) and it looks fine, but not identical in three of them.
IE/mac is refusing to add the scroll bar to your content area, making
the page look odd.
Just like traditional programming, there are some best practices.
First, validate your code. Both the html [1] and css [2] have errors
that the validators will be happy to bring to your attention. If you
haven't yet installed the web developer tool bar for firefox, I
recommend it. It makes validation and debugging _much_ easier. I very
much like the 'edit styles' option that will let me edit the css 'on
the fly' and re-render the page to match in real-time.
Second, It is helpful to organize your stylesheet in a way that makes
sense to you (or your group if on a large project). I start with base
styles e.g. style the body, and basic link styles. This sets the
'tone' of the page. I then add each major section of the page with all
the style for that section grouped together. There's nothing great
about my organization except that I know where to find things.
Third, work hard at separating content from presentation. If you need
white space between two parts of the page, avoid sticking some <br> in
just to get the look you want. Stop a minute and think about why you
want the visual space because it often has something to do the the
information you are conveying. It would be better for that to be part
of the document structure.
Fourth, when you are going through the design process, code the the
spec as much as possible. Use a more standards-complant browser such
as firefox, safari/knoqueror or Opera. Don't worry too much about less
capable browsers 'til the design is done. It is usually more efficient
to tweak the css to help the less capable browsers once at the end
rather than as you go. It is kind of like trying to debug your c code
after you turned on code optimization in the compiler.
Fifth, when testing, do outlandish things. Resize your fonts, make
your window very wide and very narrow. Try your page in a text only
browser like lynx. Listen as your computer reads the page to you. Our
users do stranger things than we typically imagine.
Books: I found "CSS: The Definitive Guide" and "Designing with Web
Standards" most helpful. I learned a lot from "Eric Meyer on CSS" even
though I tend not to prefer 'recipe' books. (I needed it because I'm
graphically challenged :) ).
As in any new coding endeavor, read code and try using it/changing it.
The wiki is a great source of code and links. The list members here
are great about answering questions.
Your layout looks really cool, but it is somewhat ambitious for a first
project. It triggers a fair number of browser variances which may
impede the learning process. To be more specific, you are running into
some difficulties because your html and body elements are largely
unstyled, and child elements are sized in percents off the unstyled
root elements. You could start by doing something like this
html, body {
height: 100%;
}
I also notice that you are doing some nice things with translucency.
Unfortunately, ie/win has trouble with this.
[1]
<http://validator.w3.org/check?verbose=1&uri=http%3A//blunx.no-ip.com/
jason/muchbetter/front.html>
[2]
<http://jigsaw.w3.org/css-validator/validator?
profile=css2&warning=2&uri=http%3A//blunx.no-ip.com/jason/muchbetter/
front.html>
I hope this was useful, its a bit long...
Roger,
Roger Roelofs
Know what you value.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
