Topic: Something Old (Page 1 of 1)

I was tweaking this page to make it easier to read. Any suggestions? I don't want to post it to site reviews because it isn't a new page or a new site . I am concerned with the design but mainly the text: size, color, layout in different browsers. Any suggestions about any part of the page are welcome but how does it read? Is it too spaced or not enough white space?
http://www.skyetyger.com/adverb.html

-your menu images could be saved as a gif, that way they don't have artifacts that jpeg's produce. (It doesn't look like they need more than 256 colors, if they do, you can use a png with full transparency (ie doesn't like alpha transparancy ) and IE will be okay with it

-Using the same browser (mozilla firebird) in linux and windows, the linux text was smaller (could be I don't have the verdana font, or, that you don't define font-size in the body{} style)

-You could define your fonts and font family as the following: (source :FAQ: )

body {

/* your other style here */

font-family: verdana, arial, helvetica, sans-serif;

font-size:12px;

}

At a minimum I would use "font-family: yourChoiceFontHere, sans-serif/YourChoiceFamilyHere" and "font-size: 12px;"

AFAIK: defining font-size using pixels (px) and defining a font the user has(like the faq does), is the best cross platform and browser font-size you can get.

edit: *sigh* maybe monkeys can't type

[This message has been edited by ninmonkey (edited 12-13-2003).]

I added exactly what you suggested to the font family. The font size in the body is set as an unspecified 100%. I increased the percentage in the p.b class of the main paragraph 10%. Is it still too small or too big. I have very high resolution and at lower resolution, it may be too big.
Graphics.. I may use CSS for navigation and not use graphics at all but I will resave the ones on the page as gifs in 256 colors to see if it improves them. A floating navigation might be a solution on long page.

[This message has been edited by skyetyger (edited 12-13-2003).]

I changed the gif..it is Beautiful! And I increased the percentage of font in p.b. I had to change colors as I have a floating menus that I cannot find how to change the text color..so I changed the color of the background and font in the main paragrpah but it all looks very nice. NOW tell me, how does it work cross browser and can you read it?

The text looks the same size now.

But what happened to the image navigation on the left side? I see the image "skyetyger" but no images under it. (using mozilla firebird) using opera, I saw some text-link that highlight wierdly. (almost like it's delayed, but not quite)

I would change the red color links in the content(it's okay on the very bottom on the darker background). It's playing tricks with my eyes :P

The a:hover link color is even easier to read. Maybe you could use yellow, then on hover change it either darker or a brighter yellow.

All right. I think the java script menu is outdated. It may not work in new browsers. I will change the links and the script is bigger. It may not be inheriting properly. That is in Mozilla? I wonder how your browser interprets inherited percentages. I might have to set it to pixels. Your help is invaluable. I have a page in this series, slightly different that will have the same navigation problem for now but the script may look larger. The yellow links will be a nicer color with the dark. I have to refresh my AOL/IE browser manually to get the latest changes to the page.
http://www.skyetyger.com/xindex.html

I updated the floating menu. It may work in all browsers. I changed the link colors and I finished the sister page. Now there are two to analyse, but they are basically identical.
http://www.skyetyger.com/adverb.html http://www.skyetyger.com/xindex.html

Now the floating menu works in mozilla firebird and opera(That's all I tried).

I like the new link colors

On http://www.skyetyger.com/xindex.html the menu overlaps text, while on http://www.skyetyger.com/adverb.html there is a margin on the left side of the page that prevents this. (I'm mentioning this because I wasn't sure if you wanted it to do that or not.)

I found the problem. The percentage of a div was set different on Xindex. CSS is easy to correct. It should be all right now.

I HAVE SPENT COUNTLESS HOURS TRYING TO MAKE http://www.skyetyger.com/next.html work in Opera 6.?. It never worked! I drove myself mad rewriting the code and finally left the page unfinished, abandoned because the code was "bad." Then a year later, I made http://www.skyetyger.com/xindex.html. It worked fine in Opera 6.?. The new page I am working on http://www.skyetyger.com/autumn.html looked great. Last night, I UPGRADED TO Opera VERSION 7...Now..xindex is crowding the right margin, even though it should be identical to adverb..the page "next" is working FINE and on the page "autumn" the graphics are destroyed. I have spent hours chasing the holy grail of "cross-browser" compatible. On the new version of Opera 7, Doc Ozones graphics look worse than mine..I give up. I am designing for IE..and sparing myself the grief..If it is my code that made "next" scatter all over the page, why did a BROWSER UPGRADE solve the problem?

quote:

---

I am designing for IE..and sparing myself the grief..

---

if you are going to design under one browser, don't use IE. Use something like Mozilla or Firebird. IE, let's you get by with too much. If it works in Mozilla or FB, then you can bet that it will work just fine in IE too.

Opera is just a weird browser. I'll take a gander at your code and see if I can spot anything.

As a side note, i did get turned onto a very useful site Position is everything
Read through some of this stuff. VERY helpful in explaining how things work in CSS (and in very easy terms)

Later,

C:\


~Binary is best~

[This message has been edited by CPrompt (edited 12-19-2003).]

I THINK..I solved the margin problem in the Opera Browser when it was not holding the right margin on the page http://www.skyetyger.com/xindex.html Opera collapses empty boxes. I added a small Spacer Gif..width 20 height 1..to hold the B div. The spacer gif is the same color as the background of the page. That is important as the html spacer I always used is white..and it looks bad in CSS. The margin and padding is not a good solution as the percentages are too difficult to determine and as the browser window is resized..the spacer gif seems to be a better solution than "hard" margins and padding. This is a hack, I know but does anyone else have a solution? The problem with graphics is not so acute as I assume most Opera Users turn the graphics off

[This message has been edited by skyetyger (edited 12-19-2003).]

I DID IT..Opera, IE, and Firebird..it all works..that little spacer gif was the trick..AND the DOC Type ..if that is incorrect, the java script will work in Opera, but not in IE or Firebird..Thank you C:Prompt..I am looking at that page.. Thank you for mentioning FireBird...I downloaded it and it is a handy browser, very much like IE but simpler!