Re: Unwanted red line, margins, bottom page margin, em sizes bad, menu item grouping



On 2006-08-05, Edward wrote:
I created a simple CSS layout (code and example below) for
bloggin/writing but ran into five issues that I need help with:

Is this what you want:
<http://cfaj.freeshell.org/web/examples/layoutRightBoxes/>

View the source at:
<http://cfaj.freeshell.org/web/examples/layoutRightBoxes/index.txt>

1. How do I get rid of the right-margin red line on the last three
right-boxes in Internet Explorer?

Don't put them inside a div with a red background, and/or, specify
the proper width (or none at all).

2. How can I put a 4px margin BETWEEN the right-boxes, "border-top:
4px" didn't do it and if I put in a "margin-top: 4px;" it shows the red
underneath instead of the brown background graphic.

Don't put them inside a div with a red background, and "margin-top:
4px;" will work.

3. How can put a 10px margin on the BOTTOM of the main area so that it
isn't flush with the bottom of the browser so it looks more like a
piece of paper lying on a desk? "margin-bottom: 10px;" in #main doesn't
do it.

Add a div with "clear: both" at the bottom.

4. I always read to "use em for fonts" but when I change the font to em
in this main DIV, then the em fonts in my right-boxes change
accordingly, which is undesirable since I should be able to change the
size of one part of the page without having to go change all my other
font sizes.

Style the entire <body> as "font-size: 1em;". Adjust all others
relative to that. For example, the menu might be:
"font-size: .85em;". Always leave the main text at 1em.

So I don't use em font sizes but pt sizes so I can easily
determine what sizes the fonts are (especially if you have graphics
which don't change sizes) and in Firefox you can increase the size of
the pt fonts anyway and I'm sure its possible in Explorer too if you
search around enough.

Why do you insist on making life difficult for your viewers?

5. How can I get my menu items that are two lines to group together
closely to so that they are easier to read?

ul.menu li {
padding: .5em 0;
}

--
Chris F.A. Johnson <http://cfaj.freeshell.org>
===================================================================
Author:
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
.



Relevant Pages

  • Re: Is this impossible?
    ... I can do this on my machine, using my fonts and sizes. ... you perhaps put a "G" by itself into a DIV and measure it's offsetHeight. ...
    (comp.lang.javascript)
  • Re: [SLE] Menu font for Firefox (DPI & PT)
    ... >> before scalable fonts came into wide use for screen media, ... >> typically were available in limited sizes, commonly skipping odd sizes ...
    (SuSE)
  • Re: Cross-platform e-mail text size problems
    ... just don't know enough about text sizes or fonts to be useful. ... And this is why plain text is, in the final analysis, simply more ... HTML email is FINE (yes, ...
    (comp.sys.mac.apps)
  • Re: Cross-platform e-mail text size problems
    ... jamiekg@xxxxxxxxxxxxxxxxxx (Jamie Kahn Genet) wrote: ... just don't know enough about text sizes or fonts to be useful. ... HTML email is FINE (yes, ...
    (comp.sys.mac.apps)
  • Re: Wont hold Left justification
    ... > Unfortunately I need to have two fonts and two font sizes in that top box. ... Close the slide master view and add a new slide to your presentation. ... >> troy at tlc creative dot com ...
    (microsoft.public.powerpoint)