8 replies [Last post]
wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 13 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

I would like to know of any font-sizing problems (and, of course, anything else that's off!).

XHTML & CSS validate. Looks good on my system in FF1.0.1, NS7 (altho the fontsize is a bit on the large size), IE5.2, and Opera7.54, all Mac OS 10.3.

http//www.horseink.com/ngt2/divtest.html

Thanks for your help!

technossomy
technossomy's picture
Offline
Enthusiast
Last seen: 1 year 8 weeks ago
Timezone: GMT+2
Joined: 2004-06-09
Posts: 260
Points: 8

PC check, please, all browsers, but esp IE

Hi Wendy

In IE6.0 some of the buttons wrap; for instance "Narrow Gate Trekking" will show up as if it said "Narrow Gate<br>Trekking". Possibly this is due to the 20px on the padding attribute in #button.

Font resizing works well, tested in IE6.0 and FF1.0.2.

It is not quite clear why you have a textcol definition in your CSS, let alone why you are repeating it in your HTML. You may want to find out if you can do without it, although it currently does not lead to errors.

From a design perspective, you may want to apply colors to the h1, h2 etc styles.

Otherwise an ok site.

Hope this helps

Tech

red58
Offline
Regular
Canada
Last seen: 15 years 38 weeks ago
Canada
Joined: 2005-03-21
Posts: 38
Points: 0

PC check, please, all browsers, but esp IE

what technossomy said - both 'Narrow Gate....' buttons wrap in IEwin - looks good in Opera7.54win and FFx1.01win

Bill

transformer617
Offline
newbie
Portland, Oregon
Last seen: 17 years 35 weeks ago
Portland, Oregon
Joined: 2005-03-28
Posts: 8
Points: 0

site check

Hi wendy,

I'm not certain of this, but I think that in terms of sermantics your <h1> should be the largest on your page, followed by your <h2>, etc.

I really like the effect you've achieved on your leftcol menu by alternating the border style and color on the normal and hover state.

I couldn't put my finger on some unease I felt viewing at first but, after looking awhile, finally decided that your BG gradient would work better for me if it were dark to light rather than the way it is now. Just seemed a little 'unnatural', if that makes any sense.

Overall, I think you're on to something here. Hope this helps.

Bill

tripleshift
Offline
Enthusiast
Last seen: 16 years 16 weeks ago
Timezone: GMT+2
Joined: 2005-03-22
Posts: 70
Points: 0

PC check, please, all browsers, but esp IE

the overall look of your page is great.
nice rollover on buttons with the right border open to lead to contents.

I would enhance contrast for the footer info.
black background often makes things hard to read on monitors not so perfectly bright.

the font size is generally fine, I would try to make the links a little bit bolder (only because of the not uniform background).

what I noticed increasing the font size, is the #notice content:

Quote:
Information/updates on products, new pages, new additions, specials, reminders, goes here. (optional)

doesn't stay aligned with the left side menu and, going in the content area, pushes the contents aside narrowing them.
if you can make the notice id to stay in the left side menu when increasing font size, degrading would be nicer.

anyway good job.

bye
tripleshift

...

I left my good sign in the other pants

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 13 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

PC check, please, all browsers, but esp IE

Tnaks you all very much for your help! I greatly appreciate your comments - I have made a few changes, and I have a couple of questions (will they ever end?!)

I have made two versions of this page, one with font-sizing by keywords, and one with font-sizing by percentages. I would be greatly interested to know which works/looks best on the PC platform, any or all browsers. (Boy, do I hate this font stuff....once I figure out which works the best, that's what I'm sticking with. I look forward to your suggestions.)

Using keywords
http//www.horseink.com/ngt3/index_keywords.html
[css http//www.horseink.com/ngt3/ngtnew_keywords.css]
Screenshots keywords
http//www.horseink.com/ngt3/ngt3_ie5.2macOS10.3key.jpg
http//www.horseink.com/ngt3/ngt3_opera_macOS10.3key.jpg

Using percentages
http//www.horseink.com/ngt3/index_percent_ems.html
[css http//www.horseink.com/ngt3/ngtnew_percent_ems.css]
[screenshots percent
http//www.horseink.com/ngt3/ngt3_ie5.2_macOS10.3pct.jpg]
http//www.horseink.com/ngt3/ngt3_opera7_macOS10.3pct.jpg]

IE looks just about the way I'd like it to (Firefox, too, so I didn't bother with screenshots). Opera looks UGLY. Is the text that large on the PC? If so, what can I do about it??

And is the body text as you first see it (prior to any adjustments) a good size, or too large, or too small?

Next question is the "wrapping" of the button text did this happen when text was zoomed, or before zoom? If the former, if the text were enlarged, wouldn't it have to wrap? I mean, isn't this normal, or was this some weird wrapping? I'd like to keep the 20px left padding so that the buttons are grouped to the left side of the column, but I suppose I could decrease the padding if you think that would help.

Next is the "notice" section - I added a width, which hopefully will limit its horizontal spread; I *think* it should just spread downward, when text is zoomed.

I changed the button text to black, and the bottom links to white, so they should stand out more.

The gradient on the side, I'm afraid, has to stay that way, because I ran out of photo, and had to "gradient" it into some background color to cover the column's expanding downward. Some of the pages on the site will be long. I could add a border-right, if so urged!

I removed the various divs within the ".item" div in the content. The only change is that the underline (actually border-bottom) now runs under the photo, which I guess doesn't look that bad. You're right, it's a smarter way to do it.

Well, I think that's all Wink - I'd greatly appreciate your observations on which of the two font-sizing versions is better, and any other problems you might see. I've got to finish this darned thing sometime!!

Thanks a lot!
Wendy

red58
Offline
Regular
Canada
Last seen: 15 years 38 weeks ago
Canada
Joined: 2005-03-21
Posts: 38
Points: 0

PC check, please, all browsers, but esp IE

Wendy - I put a couple scrnshots up for ya - IE on the keywords link
http://mars.ark.com/~squeeze/stuff/iekey.jpg
and Opera on the same
http://mars.ark.com/~squeeze/stuff/oprkey.jpg

the only real diff I see in the 2 is on the 'keywords' one in IE the 2 Newgate... links wrap as before, and on the '%' one it wraps the 'Contact Info' one as well - in Opera the keywords one is slightly shorter, [all in the empty space just above the footer I think]

yes that's the size on the pc - your shots seem to be about what Opera shows at 90% zoom, and zooming to 200% doesn't trigger the word wrap [Opera's very good at true zooming] and downsizing the browser window doesn't either - same w/ IE, but to eliminate the wrap I have to set the text size to 'smaller', 'medium' being default

don't know if that helps any, but the pics may

Bill

wendy
wendy's picture
Offline
Enthusiast
Boston, MA
Last seen: 13 years 3 weeks ago
Boston, MA
Timezone: GMT-5
Joined: 2005-01-31
Posts: 174
Points: 0

PC check, please, all browsers, but esp IE

Thanks very much, Bill.

This is going to be a dumb question and I may not be understanding, but are all the fonts on this page larger than what you'd see on random pages on the web, or are they typical? (sounds like you're saying this size is what you typically see? Yuck, they're huge!)

I am still not quite getting the font-sizing thing. I'm trying my best to make it all relative, but I really hate oversized fonts. It's the design person in me, and I must say that pixels are starting to look good to me again...

Anyway, I would appreciate suggestions as to how to deal with this. I specified a body base-font of 100% at the urging of someone on another list (when I had originally specified along NoodleIncident lines 76%, then all other fonts at ems) and it was suggested that I was still dictating font sizes to people who might want them larger.

But can't they still zoom, and make them larger? I mean, is it crazy to think that I can make things look good on my system/browsers, and then Windows people can zoom to make themselves happy??

And lastly, *do* I worry about this wrapping thing in the buttons - or is that normal, too?? If I do worry, how do I make it better?

(You can see I don't have a clue about the Windows world!)

Thank you again. I've got my teeth gritted, and I'm going to get this, but it's got to be soon. Ack!!!

Wendy

red58
Offline
Regular
Canada
Last seen: 15 years 38 weeks ago
Canada
Joined: 2005-03-21
Posts: 38
Points: 0

PC check, please, all browsers, but esp IE

Wendy - not sure what to say, but anything I've done so far I don't specify a base font size as I think no matter what you do, it's all relative to a boatload of stuff on the billions of other machines out there - your page fonts are fine relative to the fact that the overall page just fills my screen - making the fonts smaller just makes the content smaller, which makes the div areas smaller, for more 'wasted' viewport - why have a 6" square of content on a 17" square of real estate?

to me the 'relative' part is to relate the various snips of the page to each other so the 'feel' is what you want, and set things up so no matter what the default is on the viewers machine, everything 'works' close to the way you want without breaking anything

my 'designers eye' thinks the page is very nice, and if I'm in the market for what you're selling than the information is quickly and easily comprehended - if you're just 'painting a picture' for folks to admire and move on, then you can do that as you see fit, but you're flogging products and services aren't you!? ease of comprehension is important to me and most other surfers - sure I can zoom in if things are too small [although w/ IE it's not as easy as Opera, and doesn't work as well], but I can't be bothered to start adjusting my browser or screen settings to comfortably decipher what you have to offer! life is too short
Laughing out loud next page please!

the only thing I see that could be smaller font is the footer, where I'd just use a class that made it say, 64% - currently the nav text is quite wrapped [the copyright too], partly because there's more info than necessary included - after all you've got the nav buttons above - I'd be inclined to make it:

Home | Products | Puffa Wear | Woollens | Mohair Socks | Hungarian Tack
The Lipizzan Shop | Stockists | Trekking | Sponsorships | Contact Info

using line br's so the wrap isn't necessary for closer resolutions rather than one long string that might break any old place

I think the philosophy of accessibility and viewer accommodation is equally as important as artistic design on the web - hope this helps!!

Bill