Topic: Golden-ratio.net

At last, I've managed to finish a web page! I've been working on and off this site for a while now, and at last I've deemed it worthy of posting here. I'm looking for crits and comments on design/usability and the code, don't bother commenting on the content. Most of it 'Lorem Ipsum' and the rest is still unfinished.

The page should work perfectly in Mozilla and Opera, but there some problems in IE. When you hover over a menu item in IE the content are shrinks so it's total height is about the same as the linkbar. The other problem is that both top and left margin seems to dissappear from the linkbar-elements when you hover over them in IE. I've been trying to find a solution, but the only one I've found so far is creating a separate stylesheet for IE and using that each time I detect an IE browser...

Except from that it isn't much to say about the page. Valid XHTML1.1, no tables (except for one in the vim tutorial), php stylesheet switcher using cookies... For those interested the php code I'm using is available at http://www.golden-ratio.net/src/index.phps and http://www.golden-ratio.net/src/archive.phps. I'll appriciate any comments on the php code as well, since there is probably something there that can be improved as well.

link: The Golden Ratio

[edit] fixing links [/edit]
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

[This message has been edited by Veneficuz (edited 10-03-2003).]

After I've clicked on your style buttons in IE 6 they look like this:



I don't know if that was part of your link issues but I thought I'd throw it in there.

I'm also getting a HSOD in IE 6 on every page. Looks like about 50px of extra space causing it?

As far as my first impression of it, it's nice and clean but it's kind of lacking something. The typography is kind of plain, there's no images to break up the page, and the top left is just empty.

:::11oh1:::

Thanks for the response

Yes, that style thing is another issue with IE that I forgot to mention. Haven't had problems with HSoD before, I'll have to look into that later on.

Been thinking of putting some simplistic graphic up in the left corner, but none of the things I've tried looked good But I'll try a couple of other things and see if I can come up with anything...

The typography is kind of plain, but what more can I do with it while still having an easy-to-read text?



_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Veneficuz: As you are my personal #1 what belongs to css, i certainly had to check your personal homepage: And I only can say that you have a masterpiece of work here. You are great, and did an excellent job on this page. The CSS design works so smooth, also the stylesheet selector. I specially like theses 3 floating boxes, which look so.....independent from each other.
All i can say is that you really should keep sharing your knowledge, since people can learn a lot from you
thumbs up for golden ratio!

A few issues in IE5/Mac: There's no padding in the content area at all, so the text is pretty much touching the left border. Ugly.

Also, the stylesheet switcher doesn't show up. At all. [EDIT: OK, it does show up, but the links are about 3 pixels wide.]

I'm not sure whay else may be messed up, as I haven't checked it on my PC yet, but I'll let you know when I do.


[EDIT 2: Okay. I can now confirm that your site is incredibly screwed up in IE5/Mac. Pretty much everything isn't where it's supposed to be. I'll snap a screenshot if I can.]



[This message has been edited by ozphactor (edited 10-03-2003).]

[This message has been edited by ozphactor (edited 10-04-2003).]

Thanks for all the replies so far

I think I've managed to find a solution to some of the IE problems, but I had to reformat my PC a couple of days ago and I've got a couple of unexpected projects that needs finishing so it might take a while until there are any changes. Hopefully I'll have time to make some changes within the weekend...

ozphactor: I would like to see some screenshots from IE/Mac to see if there are any new bugs there, or if they are the same as the ones I've found in IE/Win...

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

I'm getting all sorts of nasty problems with IE 6 on WinXP. The problems seem to originate with the links.

When the page first loads things start in one position. However their positions don't really relate to each other very well. Site upon loading The objects snap to different erroneous positions when links are moused over.

When I mouse over the right hand links menu, the orginally centered links become left-aligned. SS #2 The hover effect remains centered however. The style links move up and to the left so that the "styles" text is actually partially hidden by the edge of the box. Also, the actual links to the different styles both became cyan after I clicked on them. This persisted even after refreshing. Finally, once all the links have been moused over the right border moves to the left just slightly.SS #3

The problem with the nav menu is weirder. When any of the links are moused over most of the bottom of the content disapears (SS #4) and will only reappear when a link in the right hand menu is touched.

The little links at the end of the paragraphs cause a shift to the left of the bottom two lines of that paragraph.SS #5

I didn't post these problems originally because I assumed they were happening only on my home computer. However, I'm on the computers at school now and the exact same things are happening.

I'll wait to say anything about the design until I can see it how you meant it to be seen. I'll try loading it up in Mozilla when I get home.

Cheers!


It's pronounced "Spikes!"

The 'site upon loading' image looks as it is supposed to. Only thing is that the titles are supposed to expand a pixel or two outside the content area, but that is only a minor issue.

I know of the other problems you mentioned, and I've been trying to fix them for some time now. I might have found a solution to some of them, but due to time restraints I have to wait until the weekend to try them out.

The paragraph-link error was a new one, hadn't noticed that before.

If you have any idea why those things are happening I would love to be enlightened

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

Well, I have to ask a question because I don't really know CSS inside and out.
What is this

@import './base.css';

and how do i get to it?

Edit: nm, found it. ^_^;;

[This message has been edited by SPyX (edited 10-08-2003).]

Veneficuz: I wish I could get you a screenshot of this in IE5/Mac, but unfortunately, I can't seem to operate a Mac well enough to do so So I'll try my best to describe it.

From what I've been able to gather, IE5/Mac is only reading about half of your styles, and ignoring the other half. Picture your page with styles disabled, then apply the colors and borders, but none of the positioning/padding/margins. That's what it looks like. It's in a linearized view, so that the menu is at the top (with bullets showing and plain text links), the content in the middle, and the style switcher (which isn't really showing up) and other links at the bottom.

I have no idea what's going on, but it looks very odd...

quote:

---

From what I've been able to gather, IE5/Mac is only reading about half of your styles, and ignoring the other half. Picture your page with styles disabled, then apply the colors and borders, but none of the positioning/padding/margins. That's what it looks like. It's in a linearized view, so that the menu is at the top (with bullets showing and plain text links), the content in the middle, and the style switcher (which isn't really showing up) and other links at the bottom.

---

That is probably because it only loads part of the style sheet. The part specifying the margins, padding etc are placed in another css file (base.css) which the 'normal' css file imports. So IE5/Mac doesn't seem to support the import rule I think that some of the problems caused in IE6/Win are related to the same thing as well, so I'll load everything into a single style sheet per color scheme as soon as I get the time to see if that helps.

SPyX: The file path ('./base.css') is just another way of saying 'base.css'. The ./ in front just tells the browser to look in the same directory as the current file.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -

quote:

---

So IE5/Mac doesn't seem to support the import rule

---

Hmmmm. I've never had a problem with IE5/Mac not reading imported style sheets. IE5/Mac is one of the most standards-compliant browsers on the market, so I can't believe that it has trouble with something as simple as @import. Oh well. Put everything into one sheet, and let us know how it goes.

Finally I've found time to work on the page again

Fixed most of the bugs, except those mentioned in the thread I started in the CSS section.

Changed the link color to a blueish tone which fits better with the rest of the style. Moved the dates up a bit and increased their font size to 100%. Also removed the small-caps from the menu.

I tried changing the width and/or alignment of the menu container, but it didn't look right so I kept it the way it was. I also tried out a couple of other variants of having the satic-link, but the only one that I liked (except the one I now use) was highlighting the first couple of words. But that is the usual (and boring ) way of doing it so I'm sticking with this one for awhile at least.

_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio -