RE: New design
"Anton van Straaten" <[email protected]>
| Newsgroups | gmane.lisp.scheme.plt.schematics |
|---|---|
| Message-ID | <[email protected]> |
Brent Fulghum wrote:
> I like it. It looks pretty good under Firefox, but
> the lambda is not properly displayed (Sclematics!)
> Both Firefox (Mozilla) and IE 6.0 show the rendering
> as only taking up about half the screen (I suppose
> this is on purpose).
>
> I enjoyed the ad copy quite a bit as well! Now, off
> to writing more verveless software in my 10-hour
> day... ;-)
I realized that with the laundry list of HTML/CSS nitpicks I gave
previously, I forgot to say that I did like the overall look and tone of the
page. (If I hadn't, I would have offered nitpicks on the text too! ;)
Too many hours in that oppressive programming sweatshop, I guess...
As penance, I tested fixes for the items I mentioned, in Mozilla, Firebird,
and IE6:
* As MJR said, adding the 'px' unit specifier to the border widths for
.textarea and h1 fixes those issues.
* Changing the a.navlink padding to 0.2em fixes the layout and underlines of
the links.
* The main heading's lambda works if changed to something like this:
<h1>sc<span class="hdgcolor">λ</span>ematics</h1>
* Eliminated the .symbol class and added a .hdgcolor class just to specify
the color for the lambda
* Adding "Verdana", "Arial", "Helvetica", sans-serif to all font-family
entries to give alternatives to "Arial Rounded MT Bold"
* Removed the width specification on the .main class, reduced the
margin-left to 30, and added a margin-right of 30. This centers the blue
box, which otherwise was appearing shifted to the right in varying degrees,
depending on the browser.
* Reduced the letter-spacing on the h1 element to 0.15em, so that the whole
of the 'schematics' heading fits within the .textarea. This is not a
particularly satisfactory solution, but it works in my browsers. The
problem is that the necessary spacing is dependent on the font, so if a user
doesn't have "Arial Rounded MT Bold", it may not display correctly. I'm not
sure what the right solution is here.
I've appended the resulting CSS. This gives a fairly consistent look across
the browsers I tested, with no obvious glitches.
Anton
body {
font-family: "Verdana", "Arial", "Helvetica", sans-serif;
font-size: 80%;
background-color: #80b4df;
}
.textarea {
background-color: #fdfdfd;
position: absolute;
width: 600;
top: 5;
left: 75;
padding: 30;
padding-top: 5;
padding-bottom: 100;
border: 1px solid #2D427B
}
h1 {
/*position:absolute;*/
font-family: "Arial Rounded MT Bold", "Verdana", "Arial", "Helvetica",
sans-serif;
font-style: italic;
font-size: 48pt;
color: #80b4df;
/*padding: 5;
padding-left: 90;
z-index: 2; */
border-bottom: 2px solid #f0b005;
letter-spacing: 0.15em;
text-align: right;
/*top: 18;
left: 20;*/
}
h2 {
font-family: "Arial Rounded MT Bold", "Verdana", "Arial", "Helvetica",
sans-serif;
font-weight: bold;
font-size: 12pt;
color: #2D427B;
}
.hdgcolor {
color: #f0b005;
}
.main {
padding: 30;
padding-top: 50;
padding-bottom: 50;
margin-left: 30;
margin-right: 30;
/*margin-top: 100;*/
background-color: #c7dfee;
/*width: 450;*/
}
.navbar {
font-size: 11pt;
font-family: "Arial Rounded MT Bold", "Verdana", "Arial", "Helvetica",
sans-serif;
font-weight: bold;
/*position: absolute;
top: 130;
left: 50;*/
margin-top: -10px;
text-align: right;
letter-spacing: 0.1em;
color: #f0b005;
}
a.navlink {
color: #f0b005;
padding: 0.2em;
}
a {
text-decoration: none;
color: #2d427b;
}
a:active {
border-bottom: 1px dashed;
}
a:visited {
border-bottom: 1px dotted;
}
-------------------------------------------------------
This SF.Net email is sponsored by: IBM Linux Tutorials
Free Linux tutorial presented by Daniel Robbins, President and CEO of
GenToo technologies. Learn everything from fundamentals to system
administration.http://ads.osdn.com/?ad_id=1470&alloc_id=3638&op=click