On 20 Aug 2004 09:48:38 -0700, TAM <gr*******@canada.com> wrote:
Hi,
I have redesigned one html page by removing all the tables. You can
see this test page at http://www.ngrain.com/css/home1.htm. Only
home1.htm has been redesigned without tables. Rest of the site uses
tables for layout.
I would appreciate if you can take a look at this page and CSS and
comment on the coding.
The page looks fine in IE but when I open up the page in Dreamweaver
or FrontPage, I see that all the div's are everywhere. Is it common or
something is wrong with the code?
This page looks fine in IE 6 but for some reason some parts of the
page are messed up in NN, Opera, Mozilla and FireFox. Do I need to
create a separate style sheet for NN, Opera, Mozilla and FireFox
browsers?
Basically, I think it looks spiffy in Opera. A nice overall look.
Thanks in advance and I look forward to your comments.
TM
Wow, this turned out long...
The scrollbar styles are not "valid" CSS. Be aware they will not function
in all CSS browsers. DOn't have to actually remove them, I don't think
they do any harm, just don't claim valid CSS.
The most important goal in web design is making the text readable. When
you size fonts in points, IE users cannot resize the text. There is no way
of determining how many points or pixels are too small for your many
users, so this unit is not useful for the WWW.
Instead, use 100% which is based on the default font-size of the UA, which
has either been customized by the user or works well enough that the user
has seen no need to adjust it. Use 90% at minimum for non-critical content
like legal stuff. Serve any content you want every user to read at
font-size: 100% or higher.
When you use Verdana with its large x-height (it's like 7 or 8) it's
natural to make it small, as the x-height makes it legible at smaller
sizes. Now, if we could guarantee that each user had Verdana, it wouldn't
be so bad. But since we know some users don't have it, what will they see?
Arial or Helvetica, or their default sans-serif, all of which will have an
x-height of about 5. Smaller x-height = harder to read. Therefore, those
users will have difficulty accessing the content. Unless you make the
font-size such that Verdana looks stupidly big, the backup fonts will not
be legible. Solution: only use fonts in web pages whose x-heights are
about 5, or serve large x-height fonts conservatively large.
Be sure you set styles which apply to many elements higher up the tree. If
all (or most of) the text on your page is sans-serif or 100% or green, set
that in body and change it where needed. If many selectors will get almost
the same style, do it once:
..one, .two {font: italic 105% serif; border: 1px solid red; color: green;
background: white;}
and then make a small change to one.
..two {font-size: 110%;}
What we see in your CSS is typical generated output. The tool is dumb, you
be the brains.
Be cautious when setting widths as absolutes (pixels). As the goal is to
make the font-size right for the user, in some renderings there may be
overflow. Wisest to stick to ems for widths. Or, use % to make use of the
whole canvas - pixel-based widths inevitably end up shoved way over, or
centered with wide blank space either side, in say 25% of UAs, and in
another 25% it's wider than the viewport and invokes the user-unfriendly
horizontal scrollbar. That's what happens with your site, too.
A lot of web designers make the error of designing the website as if it
was an 8 1/2 x 11 sheet of paper. The paper's size is an unknown in web
design, and the best designers work with that rather than attempt to
eliminate it, as if it were a bug of browsers that they can be resized! If
you could make this flex to the user's viewport width, that would be an
improvement. It would be a little complicated, but doable.
A:link.topNav {color:#465465;text-decoration:none}
How do I know it's a link? Underlining on the WWW is universally
understood to mean "this is a link". Unless you have made absolutely clear
in some other way, leave in the underline.
Develop the habit of always specifying color and background together. If
the user has a custom stylesheet it may overrule your style, and make it
illegible. Although user stylesheet writers should be careful to avoid it
on their end, this is simple enough. Set color as inherit, or background
as transparent.
padding-top: 10px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
Use shorthand here. And no need for units on 0.
padding: 10px 0 5px;
Finally, I notice you have two divs nested in the HTML.
<div id="contain" class="container">
<!-- container begins -->
<div id="MainBody" class="body">
<!-- MainBody begins -->
....
</div><!-- MainBody ends -->
</div><!-- container ends -->
These divs are not used in the stylesheet. Why have this?
