Thread: Files on their way
I've sent the files on their way to Andreas. I'm not foreseeing any
huge problems, but there are some things I'm concerned about and would
like to address. But perhaps a brief description of what I did will
make things a little clearer.
The great benefit of separating the presentation and content is that
you can use the XHTML file to define the document structure and the CSS
to dress it up, very much along the lines of using SGML and DSSSL. So I
looked at the page structure to think of a way to describe it.
There's the banner, consisting of the PostgreSQL masthead between two
ads. The masthead includes two images (PostgreSQL and the logo) and a
group of links arranged horizontally, and a background image to give
the striping.
There are two sidebars bracketing the page content. Each sidebar
includes a number of sections, such as the User Survey, Current
Versions, the Language selector.
In the most recent test*.htms, two boxes highlighting Latest News and
Upcoming Events have been placed at the top of the content section.
Though there are other ways to do this, I thought the most
straightforward was to use a very simple table structure to structure
the whole page. There were two primary reasons I choose the table: it
helps maintain the two sidebar columns perfectly below the ads, and it
provides an easy way to provide the gray background (using margins and
setting the body background color to gray). (As we'll see, this wasn't
the best choice, but one that we have a variety of ways of working
around.)
So I chose a three-row table consisting of four columns. The first row
is the banner. Each ad is in it's own cell, the PostgreSQL masthead and
the link bar are in another (with the links in their own div,
id="bannerlinks", and the logo is in it's own cell.
The second row is pretty straightforward: left side in a cell, content
spans the next two, and the right side in the final cell. The third row
is the blue link bar on the bottom. The first cell includes "top", and
the other links are in a 3-cell span.
That's it for the tables. The "cells" in the sidebars are divs. Each is
id'd so they can be specifically selected via CSS, but I only used that
in a two cases: survey and gborg, because (in this version: Andreas'
latest examples don't include this) I wanted to tweak the <form> and
<ul> presentation in ways that may not be appropriate elsewhere.
The Latest News and Upcoming Events boxes are also divs set to float
left and right, respectively. This might cause some problems, as some
earlier browsers might not handle float well, but I wanted to get some
feedback first.
(Similarly, Netscape 4 in particular might —okay, probably will—royally
screw up this page. Netscape 4.x was released before CSS really got
going, but late enough that it tried to implement it. However there's a
way to keep the CSS Netscape 4.x chokes on beyond it's reach, while
making sure later browsers that can handle it can read it. I haven't
done this yet, as I haven't tested it in Netscape. But it's something
definitely doable and worth doing. Just haven't done it yet.)
I think that pretty much covers it. I did rewrite some of the other
markup using your standard <p> and <h#> tags, and I used lists, both
<ul> and <dl> where I thought appropriate. Recently I've started using
<dl> more because it has the semantic meaning of holding the <dt> with
the <dd>. For example, I used them in the International and Websites
sections, as the blurb under each headline can be viewed an explanation
or description of the subsection. If you disagree, not a big deal. The
same presentation can be accomplished using <h#> and <p> (or any other
tags, for that matter). And I think I need to zero out the left margin
and left padding on the <dl>s in these sections, as the <dd>s don't
look properly centered. And another place I used a <dl> and need to fix
is in the points outlining the benefits of using PostgreSQL: a
straightforward <ul> would have given me the bullets (list-style: disc)
by default. Another way to fix this is in the CSS, by adding a rule
along the lines of
#content dl { list-style:disc }
Besides removing a bunch of nested tables and presentation markup, I
also got rid of a lot of <br /> tags, as the CSS gives us much more
control over things like paragraph spacing and headline margins.
Two things that jump out at me and need to be fixed/resolved:
1. Switching to German caused the right sidebar to gain some
not-so-nice width because longer German words wouldn't break and caused
the cell to widen beyond the 120px I defined it. (Of course this isn't
German's fault. Just a failing of the design in handling long words.)
Looking at the corresponding test*.htm, the current site isn't strict
about keeping the side columns exactly below the ads. One solution
would be to break the design into two tables: one for the banner (one
row, four columns), and one for the rest (two rows, three columns). A
few small modifications to the CSS, and we're good to go. Drawback:
lose the nice continuity along the sides. Practically, not really a
drawback.
2. When the browser window is narrower, the bannerlinks flows into a
second line. The result is white space under the ads (changeable to
another color, of course—blue might make this less obvious), and an
interesting background image effect. I haven't played with this enough
to find a solution. One of course is to just absolutely define the
width. My personal preference is to let the site flow as much as
possible, trying to find a solution that doesn't cause the image-repeat
problem. With an absolute width there might be problems with narrower
browser windows.
There are some smaller style things that I'd want to change as well,
but it's just personal preference and easily changed in the CSS.
What do you think? Any serious breakage problems?
Michael
Michael, > What do you think? Any serious breakage problems? Give us a URL when it's up, and I'll test multiple browsers. -- Josh Berkus Aglio Database Solutions San Francisco
On Wednesday, November 12, 2003, at 03:04 AM, Josh Berkus wrote: > Michael, > >> What do you think? Any serious breakage problems? > > Give us a URL when it's up, and I'll test multiple browsers. Thanks. Andreas had me send them to him via email. I'm sure he'll let us know when when and where they're available. Michael
Well, I have uploaded it, it's just not really working ;) http://wwwdevel2.postgresql.org/en/index.htm Didn't you get the (private) mail I sent you some hours ago about this? Not sure if it's my fault or a problem with the files you sent me, but I got the following files: page.php (0.07KB) page.php (16.97KB) basic.bottom.php (0.07KB) basic.bottom.php (0.97KB) basic.left.php (0.07KB) basic.left.php (3.94KB) basic.right.php (0.07KB) basic.right.php (2.53KB) basic.top.php (0.07KB) basic.top.php (2.07KB) postgresql.css (0.07KB) postgresql.css (4.99KB) index.html (0.07KB) index.html (2.49KB) I kicked the ones with 0.07 KB (there was only some garbage in them, might be a problem with my email program) and uploadedthe others, the result is what you see online now... Could you maybe send me the files as a zip/rar/tar/tgz file, this may help avoid corruptions... Mit freundlichen Grüßen Andreas Grabmüller ----- Original-Nachricht ----- Von: "Michael Glaesemann" <grzm@myrealbox.com> An: Josh Berkus <josh@agliodbs.com> CC: pgsql-www@postgresql.org Datum: Tuesday, November 11, 2003 07:24 PM Betreff: [pgsql-www] Files on their way > On Wednesday, November 12, 2003, at 03:04 AM, Josh Berkus wrote: > > > Michael, > > > >> What do you think? Any serious breakage problems? > > > > Give us a URL when it's up, and I'll test multiple browsers. > > Thanks. Andreas had me send them to him via email. I'm sure he'll let > us know when when and where they're available. > > Michael > > > ---------------------------(end of broadcast)--------------------------- > TIP 2: you can get off all lists at once with the unregister command > (send "unregister YourEmailAddressHere" to majordomo@postgresql.org) -- LetzPlay.de | Freemail: http://www.letzplay.de/mail | Forenhosting: http://www.letzplay.de/foren
-On [20031111 20:42], Andreas Grabmüller (webmaster@letzplay.de) wrote: >Well, I have uploaded it, it's just not really working ;) >http://wwwdevel2.postgresql.org/en/index.htm The CSS is messed up for Opera. You have additional white pixels in the sidebars. Also the center column is shifted by about another column's breadth to the right. Advice, make hefty use of explicit: padding: 0px margin: 0px or whatever offset you need. Not every browser treats missing/omitted padding and/or margin as 0. -- Jeroen Ruigrok van der Werven <asmodai(at)wxs.nl> / asmodai / kita no mono PGP fingerprint: 2D92 980E 45FE 2C28 9DB7 9D88 97E6 839B 2EAC 625B http://www.tendra.org/ | http://www.in-nomine.org/~asmodai/diary/ Here's to your health. May you live long and prosper...
On Wednesday, November 12, 2003, at 04:43 AM, Andreas Grabmüller wrote: > Well, I have uploaded it, it's just not really working ;) > http://wwwdevel2.postgresql.org/en/index.htm > > Didn't you get the (private) mail I sent you some hours ago about this? It was in my inbox when I woke up this morning. Sorry I didn't get back to you sooner. I live in Tokyo, and am usually active on the web between midnight and 2am local time. > Not sure if it's my fault or a problem with the files you sent me, but > I got the following files: <snip/> > I kicked the ones with 0.07 KB (there was only some garbage in them, > might be a problem with my email program) and uploaded the others, the > result is what you see online now... As I mentioned in the email I sent with the tgz package, I don't think there's anything crucial in the small extra files. Annoying, though, and I'll try to eliminate them in the future. Michael
On Wednesday, November 12, 2003, at 04:48 AM, Jeroen Ruigrok/asmodai wrote: > -On [20031111 20:42], Andreas Grabmüller (webmaster@letzplay.de) wrote: >> Well, I have uploaded it, it's just not really working ;) >> http://wwwdevel2.postgresql.org/en/index.htm I'd say it's not working at all! :) Hopefully some of this will be fixed in in the files I resent. > The CSS is messed up for Opera. What version are you running? > You have additional white pixels in the sidebars. > > Also the center column is shifted by about another column's breadth to > the right. There's also some buggy behavior in Mac IE5.2—it adds an extra blank column width on the right. > Advice, make hefty use of explicit: > > padding: 0px > margin: 0px <snip/> > Not every browser treats missing/omitted padding and/or margin as 0. Good advice. I added a quick body { padding:0; margin:0 } and for the other non-id'd or unclassified tags as well. That should bring everything down to 0 unless explicitly declared elsewhere, though there might be inheritance issues that need to be addressed directly. Michael
On Wednesday, November 12, 2003, at 04:48 AM, Jeroen Ruigrok/asmodai wrote: > -On [20031111 20:42], Andreas Grabmüller (webmaster@letzplay.de) wrote: >> Well, I have uploaded it, it's just not really working ;) >> http://wwwdevel2.postgresql.org/en/index.htm > > The CSS is messed up for Opera. Also, I believe (at least earlier versions) of Opera share a CSS parsing bug with MSIE4/5. This bug is exploited to compensate for MSIE's different interpretation of the CSS box model, and I may have to massage the CSS a bit for Opera in this case. I don't know if this particular behavior is responsible for what your seeing. On a better note, the version I'm seeing at http://wwwdevel2.postgresql.org/en/index.htm matches what I'm seeing locally. May have been a cache issue on my end, as I don't know if Andreas has had time to put up the files I sent. I'll do some testing in Opera tonight after work. Michael
-On [20031112 04:22], Michael Glaesemann (grzm@myrealbox.com) wrote: [Opera] >What version are you running? 7.2x -- Jeroen Ruigrok van der Werven <asmodai(at)wxs.nl> / asmodai / kita no mono PGP fingerprint: 2D92 980E 45FE 2C28 9DB7 9D88 97E6 839B 2EAC 625B http://www.tendra.org/ | http://www.in-nomine.org/~asmodai/diary/ Honesty is the first chapter of the book of wisdom...
Folks, Report back: (all of the below are on Linux): Konqueror 3.0.3: bad. There is a broad white space in the center, with all center elements shoved to the right, as if we have a 2-column table and all content is in the right column. This is probably a CSS bug in Konqueror, but bodes poorly for Safari. Mozilla 1.0.1: Good, even when I shrink the browser. Only problem is that "grey box" text is too small (it's not too small on Konqueror) -- it appears about 7pt. Galeon 1.2.5: Identical in appearance to Mozilla 1.0.1 Right Side Bar, all browsers: The link/headers for each item do not center with the descriptive text; they are about 2 characters to the left. Survery, all browsers: The survey radio buttons do not line up, instead forming a zig-zag. Will try on later versions of the same browsers, above, later today. -- Josh Berkus Aglio Database Solutions San Francisco
On Thursday, November 13, 2003, at 02:39 AM, Josh Berkus wrote: > Folks, > > Report back: Josh, thanks for taking the time to view these on the different browsers. > (all of the below are on Linux): > Konqueror 3.0.3: bad. There is a broad white space in the center, > with all > center elements shoved to the right, as if we have a 2-column table > and all > content is in the right column. There was a problem with the GBorg section on the left causing the GBorg text to push the center column to the right. Does that look like what you're seeing? I've fixed it (there was a misplaced </div>, if I recall correctly.) > This is probably a CSS bug in Konqueror, > but bodes poorly for Safari. Actually, Safari handles it quite well. (Though see notes below.) I generally design initially using Safari and Mozilla. Am now using Opera quite a bit more as I see Opera is handling the table quite differently than Mozilla and Safari. There were large gaps between the columns: seems like there's an extra half-column between the left sidebar and the center, the center and right sidebar abut (which is good), and there's an extra column width after the right sidebar but before the border. Got this pretty much fixed. There's still a 3px extra space between the right sidebar and the black table border, but I'll get to the bottom of that as well. > Mozilla 1.0.1: Good, even when I shrink the browser. Only problem is > that > "grey box" text is too small (it's not too small on Konqueror) -- it > appears > about 7pt. Too small text is a problem. The Latest News and Upcoming Events boxes (those the ones you mean?) are set to "x-small". I've bumped them up to small. > Galeon 1.2.5: Identical in appearance to Mozilla 1.0.1 > > Right Side Bar, all browsers: The link/headers for each item do not > center > with the descriptive text; they are about 2 characters to the left. I'm assuming your speaking of the Websites section. I saw that in Opera (among others) and fixed it by zeroing out the padding and margin on the <dl> > Survery, all browsers: The survey radio buttons do not line up, > instead > forming a zig-zag. Fixed. They were centered with some left margin/padding. The padding/margin has been zeroed and left-aligned. > Will try on later versions of the same browsers, above, later today. Unless Andreas wants me to send the files again, I'm going to work on them locally. I should have a host where I can post the files as I work on them. Also, unless the Latest News and Upcoming Events are exactly balanced in terms of text length, you'll notice that one box may have a greater height than the other. What do people think of this? I'd like to eliminate it if I can. Thanks again for the details, especially Konqueror. MIchael