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">&lambda;</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
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.