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

link removed

I've checked on Mac FF, Opera, and Safari, and all looks as it should. IE5.2 displays very small text, but I won't worry unless the Windows IEs do!

Code and CSS validate.

Question can someone remind me how to fix the page jitters when opening new pages?

Thanks very much for your help!

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 2 years 30 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Site check, please -- PC folks?

Looks good to me at first glance with FF
Might want to fix this in your css
/* *fonts* */

The bottom of your footer has some little white specs running across the bottom that looks a little strange... "nitpicky comment"

Another nitpicky comment.. I think your menu could use a sharper or more brilliant green

Links page doesn't contain any links?

Other than that.. very nice job

gleddy
gleddy's picture
Offline
Leader
sydney, australia
Last seen: 13 years 1 week ago
sydney, australia
Timezone: GMT+10
Joined: 2004-09-21
Posts: 596
Points: 0

Site check, please -- PC folks?

looks fine if FF, but in IE your left nav is down at the bottom of the page and the links look small.

the rest looks o.k., except the text is smaller in IE but not a big deal

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

Site check, please -- PC folks?

Sorry...I should have posted the css address
http//www.birchhillaccommodations.com/BHA_styles.css

OK, big question why are the side links so small/so low on the page/how to fix?? Little white specks are a mystery (don't show on my system...)?? Ideas?

About the font size in IE, could you tell me which IE you're using? Also, is it too small as in "unreadable" or just on the small side?

Can you zoom your text? If so, does everything hold together?

You're right about the green on the links...this site is for some fairly conservative people, but maybe it's too low-key -- will consider, for sure.

Thanks very much for your help!

P.S. No, no links on the Links page just yet. I'm beat!

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Site check, please -- PC folks?

CSS Validation error:
Line: 15 Context : * html body
Parse Error - f/ont-size: small

I see the "speckles" at the bottom in FF. Looks like they're part of the photo. Like the bottom of the white trunks of the trees.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

fatfreddy
fatfreddy's picture
Offline
Enthusiast
Deep down under
Last seen: 13 years 42 weeks ago
Deep down under
Timezone: GMT+8
Joined: 2005-03-25
Posts: 390
Points: 0

Site check, please -- PC folks?

Wendy
Just a thought from an SEO point of view
The bold text in the content is just crying out to be turned into links

"exceptional homes for rent (in South Woodstock)"

"Our luxurious family-friendly houses"

"South Woodstock offers a wide array of activities year-round "

"excellent restaurants in South Woodstock"

They could still all be in bold black font and as some of the bolded text may not be suitable for a link, leave it in that style and just underline the ones that are links. People will understand it quickly and the spiders will love you for it!

Freddy

The only reason for time is so that everything doesn't happen at once
--Albert Einstein

Accessible webdesign Australia - webechodesigns

GatorSr
Offline
Regular
Last seen: 15 years 39 weeks ago
Timezone: GMT-5
Joined: 2005-08-06
Posts: 42
Points: 0

Site check, please -- PC folks?

Your site looks very nice in IE 6.0 in Windows XP. Congratulations on a very professional set of pages.

About the text size, if you want to control the visitor's experience you will need to specify the font-size precisely in the CSS in px or em versus the percentage. You cannot control your visitor's browser settings which may explain the previous reply and comment about "small link text".

While viewing in IE, select VIEW from the top menu and then TEXT SIZE. There are 5 options in IE 6.0, and if you go through each and view your site, you may be surprised.

Designing for accessibility means allowing visitors options to change the text size (ie to "largest") if they are vision impaired. Using percentage in your CSS simplifies their viewing experience.

Again, gorgeous site!!

GatorSr
Be Nice to Everyone
Read Hebrews 132

n8gz4ez
n8gz4ez's picture
Offline
Leader
Last seen: 12 years 15 weeks ago
Timezone: GMT-6
Joined: 2005-06-13
Posts: 802
Points: 0

Site check, please -- PC folks?

drhowarddrfine wrote:
I see the "speckles" at the bottom in FF. Looks like they're part of the photo. Like the bottom of the white trunks of the trees.

That is the top of the image repeating itself. To #foot add:

background-repeat: no-repeat;

Looks nice.

This is my big chance . . . yep, I blew it . . .

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

Site check, please -- PC folks?

Thank you, everybody, for all your help, and for your positive & constructive comments!

Freddy, brilliant idea re bold text. Will give it a try (without looking too "shouty", if you know what I mean).

n8gz4ez, thanks very much for solving my speckling problem. Things always seem so obvious when someone else explains them )

Dr. Fine, I tried to make the text as scalable as possible, using keywords for body and then percentages to spec. certain font sizes. I completely agree that it's necessary to do so, but I was kicking and screaming when I let go of my 11px <p> specs!!

Does anybody know why the left menu drops down so low in IE?? The top padding is 5ems, and I can't see why it would create such a distance. Will try changing to maybe 20px, but still -- would like to know!!

Again, MANY thanks!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 37 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Site check, please -- PC folks?

Quote:
Does anybody know why the left menu drops down so low in IE??

Hi, Wendy

div#navside at 175px is just a bit too wide for IE6/Win because of the 2x2px left/right padding on #navside ul li a. It doesn't have room to fit in beside the content area (which is first in the source) and gets pushed down below the bottom of the content.
Choice of solutions, both of which have only a very slight effect on the display in Firefox 1.0.6/Win

Quote:
div#navside {width:171px}
or
#navside ul li a {padding: 2px 0;}

IN IE6, I find the medium(middle) font-size to be uncomfortably small, most particularly on the menu.
This could be because of the way IE renders fonts that are sized by name and/or the parse error that drhowarddrfine pointed out earlier.

Quote:
<absolute-size>
An <absolute-size> keyword refers to an entry in a table of font sizes computed and kept by the user agent. Possible values are:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]

On a computer screen a scaling factor of 1.2 is suggested between adjacent indexes; if the 'medium' font is 12pt, the 'large' font could be 14.4pt. Different media may need different scaling factors. Also, the user agent should take the quality and availability of fonts into account when computing the table. The table may be different from one font family to another.

Note. In CSS1, the suggested scaling factor between adjacent indexes was 1.5 which user experience proved to be too large.
http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props

GatorSr wrote:
Designing for accessibility means allowing visitors options to change the text size (ie to "largest") if they are vision impaired. Using percentage in your CSS simplifies their viewing experience.

I agree with Gator and it's good to see you have made your fonts scalable in IE. It's just that the start/default size is so small that a user has to take up one of the two text size increases before it reaches the same size as the Firefox start/default size.

Still this is a bit pernickity of me because your site is one of the best I have seen for some time in terms of understated elegance. Extremely well done. =D>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Site check, please -- PC folks?

Hi, a very nice site you have there.

You may want to add some meta links to make the site more search friendly. If you just haven't got that far yet, ignore the following. Smile

The following four are probably the most important.

<meta name="title" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="index,follow" />

The title should probably be pretty similar to the title element on the home page, except I would drop the "Welcome to" and add "South Woodstock".

For keywords, use those words you would like the search engine to index your page on, especially if those words don't appear in the page itself, e.g. "South Woodstock, Vermont, Birch Hill Accommodations, Home Rental, Holidays, Self catering".

Description is often used by search engines as the snippet of text they display to tell the searcher about the page. This is where you entice the searcher to your site. The first para on your home page would do fine here with perhaps a little extra information on convenient for golf, horseriding, snow sports, etc.

The last one robots (added to a robots.txt file on the site itself) tells the robots to index this page and follow the links, so hopefully they will index your other pages too.

EOBeav
EOBeav's picture
Offline
Regular
Pendleton, Oregon
Last seen: 14 years 31 weeks ago
Pendleton, Oregon
Timezone: GMT-7
Joined: 2004-08-06
Posts: 49
Points: 0

Site check, please -- PC folks?

Nice simple, straight-forward design. I like your menu hover effects. A couple of things:

Just out of curiosity, how would the edges of the page look if you removed the solid black border and just used the shadow border that's already there?

When I resize to 800x600 in FF, a horizontal scrollbar appears at the bottom. Not a huge deal, but it takes away from an otherwise attractive site.

Thanks for validating. I haven't heard of "HTML Tidy". Does it produce good code that validates, or did you have to go in and fix some of it? Is it also available for Windows?

I like this design. Not busy, but it gets your client's information across in an attractive way that's easy on the eyes. Great job!

Get Thunderbird!

drhowarddrfine
Offline
Leader
Last seen: 11 years 23 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Site check, please -- PC folks?

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 13 years 1 week ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Site check, please -- PC folks?

Mmmm. Elegant, simple, lovely!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

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

Site check, please -- PC folks?

Thank you, everyone, for all the great comments, and for all your trouble (and please forgive my tardy reply)!

EOBeav, strange about the scrollbar...the width of the background "shadow" is somewhere around 730. I used the black border to give the pages a kind of "birchy" look, and to define the page area, since everything's so, um, white!

Quote:
When I resize to 800x600 in FF, a horizontal scrollbar appears at the bottom. Not a huge deal, but it takes away from an otherwise attractive site.

HTML Tidy is something I wouldn't do without. It corrects faulty code and makes everything, well...tidy. Don't know if there is a Windows version, I'm afraid, but hope you have checked the link DrHowarddrfine gave you.

Quote:
You may want to add some meta links to make the site more search friendly. If you just haven't got that far yet, ignore the following.

Chris..S. -- thanks for the suggestions. You're right, I hadn't gotten that far yet, but will do, for sure.

Lorraine -- thank you so much for solving the problem with the links dropping down (which I should have seen...ack!). And thank you for explaining a murky subject so clearly.

As to the font sizing, I just got Dan Cederholm's new book, and thought I would give his scheme a whirl, as he mentioned that it worked well for him. I guess it didn't work well for me. I dug out all my books and found another scheme (Christopher Schmitt, I think) that sizes the body font at 67%!! (also "worked well for him"). Don't think I'll go there, either. When I can get back to this, I'll give the body font: 100.01%/all the rest sized in ems a try and see how that flies.

I hope I might repost and ask everyone's opinion.

Again, I greatly appreciate your efforts on my behalf, and your positive and helpful attitudes!!

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

Site check...again, please?!

http//www.birchhillaccommodations.com/

1. I'd be grateful for your opinion on the font sizing now. Base font is set at 100.01%. Looks good in all my browsers (mac) *except* Opera, where the font is huge (and ugly, but I don't like huge fonts).

2. Also, a couple of peculiar things. I saw this on a friend's iMac using IE something (I thought I had the last Mac version, but maybe not), and there was a 6px(?) white space below the footer. Is the #footer coding not right? I also noticed a bit of truncation heighth-wise of the background graphic, but why would the background be crunched?

2. Lastly, something weird was going on with the <p>line-height. It doubled between the first and second lines of the <p>, but was fine thereafter.

Hope this isn't too much too ask, and thanks very much in advance! Just when you think you're starting to know something, you realize you don't. If you know what I mean!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 1 day ago
Joined: 2004-06-30
Posts: 9674
Points: 810

Site check, please -- PC folks?

The dotted border is a bit of an issue. View it in firefox, some of the borders are missing until you increase/decrease the text size.

Try using dashed instead, see if it works.

Verschwindende wrote:
  • CSS doesn't make pies

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

Site check, please -- PC folks?

Thanks....not sure what dotted borders you mean -- the only dotted borders specified are in the left nav. I don't see anything on FF/Opera/Safari/IE5.2 mac?? Maybe the footer bg hadn't loaded?

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 37 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Site check, please -- PC folks?

1) Font-sizing (and re-sizing) all OK in IE6/Win, FF1.0.6/Win, Opera8/Win. For earlier versions of Opera, you could try a derivation of Tantek's "be nice to Opera" hack html>body .content {width:300px;} http://www.tantek.com/CSS/Examples/boxmodelhack.html.
That is, try html>body {font-size:100.01%}

2) I noticed a white space below the footer in Opera8/Win and #footer p {margin-bottom: 0} seemed to fix it for me locally - would it also work for Mac/IE? I don't know but it may be worth a try.

3) <p> line-height is OK in Win/browsers. Regret I don't have access to Mac stuff.

I did notice in FF1.0.6/Win that the dotted underlines did not show up under every navigation menu item in default text size and they were a bit intermittent on text increases/decreases. A local test using div#navside {line-height: 215%} seemed to sort that out.

Hope you can get something out of foregoing.

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

Site check, please -- PC folks?

Re dotted lines...
Thank you, Lorraine and ThePineappleHead -- oddly enough, I changed the line height on div#navside to 215% as you suggested, and now I see what the problem is (in FF only -- all others are fine). Hm! Odd that it displayed fine at 200% for me and not you, but now not for me in FF. And odd that there is plenty of spacing now. What else could be interfering?

Thanks for the solution to the footer, Lorraine -- did the job!

Also added the Opera hack. Didn't change much in my display (I'll go and check my default settings now, which I didn't think to do) but maybe it helps otherwise. Can't hurt, I guess.

Again -- thank you!

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

Site check, please -- PC folks?

Not to dwell on this, but I just increased the line-height in div#navside to 220%, and now all the dotted lines appear as they should in FF. (maybe it didn't like odd numbers?!)

OK in the Win versions?

Thx!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 37 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Site check, please -- PC folks?

Wendy
It's a conspiracy, I tell you!

HellsBells wrote:
fonts in Firefox on the Mac come out really small - much smaller than Safari.

But, best to read in context http://www.csscreator.com/css-forum/ftopic11886-15.html

roytheboy wrote:
change your FF prefs base font size to 16px so that it matches IE's ridiculously large default fonts. As usual, IE is wrong (16px - I ask you ) and Apple are correct, but also as usual, IE has the monopoly so everyone works to their settings!

Yes, all OK in Win versions - all links thoroughly under-dotted (except IE of course which ain't got any dots, so it renders... under-dashed) Laughing out loud

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

Site check, please -- PC folks?

Lorraine,

Thanks for checking. The font thing is peculiar. I changed all my browsers to have default fonts of 16px (yuck!), but I thought [1] that since Macs display at 72ppi and PCs at 96ppi, 16px on a PC looked pretty much the same as 12px on a Mac.

So...16px PC = 12px Mac = 12pt viewing size = 100%font-size, and Bob's your uncle. And now I'm changing my browsers back to 12px, because that *should* result in the same font display as on a PC moniter (at 16px/96ppi). Right?

Anyway, I did find that increasing the font size caused those darned dotted (and dashed) lines to become erratic. Isn't the line-height a % of the font-size, so that if the latter increases, the former does, too? Or would the line-height be better in ems?

And one more question (I know, I'm pushin' it now!) my #content fonts are specified at .8ems. Is this too small on the PC, set at Medium...should I bump it up to .9ems?

Ho boy -- too much aspiring to perfection, too much coffee, and too much staring at this bloody thing!
Thanks!

[1] I copied and pasted this some time ago, from God knows where
"The default font size on IE, Firefox, and Opera is 16px. On a normal PC moniter that will render to about a 12pt. font due to the normal 96ppi [screen res of PC moniters]. Macs default to 12px fonts because the normal Mac moniter renders 72ppi which results in a 12px font.

"Because all (for practical purposes) browsers default to the same visual size, then using that default means all browsers will render pretty much the same unless the user has changed his base font size."

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 37 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Site check, please -- PC folks?

Wendy wrote:
So...16px PC = 12px Mac = 12pt viewing size = 100%font-size, and Bob's your uncle. And now I'm changing my browsers back to 12px, because that *should* result in the same font display as on a PC moniter (at 16px/96ppi). Right?

Wendy,
I can't fault your mathematics there, nor your bottom quote (from "God knows where"). Hopefully roytheboy will drop by and confirm or otherwise, 'cos I... couldn't possibly comment :roll:

I've been puzzling over the Firefox bottom borders conundrum and I don't think line-height is required at all. Now, bear with me here. In the IE & FF (Win) when text size is increased to cause a wrap-around on the menu text I get a double (+) line spacing on
the longer link text - it doesn't look right at all. How does it look on a Mac?

If I remove line height from div#navside, the text wraps much better. Then by applying appropriate top and bottom padding (I used 10px) to #navside ul li a, I get a rendering that looks much the same as the original and keeps the bottom borders in FF all the way from default to huge and tiny text. IE keeps the borders through *all* its five sizes.

I don't think there is much to choose between using % or ems for font-sizes. There may be some argument for using em widths on narrowish divs to ensure they remain wide enough for the number of characters/spaces they should contain, because % widths would not, necessarily, cater for that.

You're asking the wrong person for advice on min font sizes, however, because my main site is targetted at visually-impaired people. I'm obliged to stick to 1em/100% for that although I do go down to 0.75em for the footer stuff. However, I am currently (hobby) coding for a local business and I'm using 0.8em on content, which is a great departure for me and I rather like it. I guess font-size is bound to be subjective to site owner/developer. The important thing, in my view, is to take into consideration the font-family, the depth of the descending letters and whether there is sufficient line-height so that the lines of text are not squashed under each other.

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

Site check, please -- PC folks?

Lorraine,
You are *brilliant*!!! I changed the padding top & bottom as you suggested, and it works like a charm.

I suppose padding actually makes more sense...but maybe line-height was the old print designer in me kicking in. I do need to be less tunnel-minded, certainly.

I'm tickled to have this great solution! Thank you so much for your trouble!!

As to the font business, I've ended up using .8em for content, etc., and damn the torpedoes.

I must say it's a relief to be able to discuss it here without animosity or major opinions. I've not had such experiences on other lists/forums. It's amazing how much more you learn (and think) when you are part of a discussion, instead of a stern lecture about The Way Things Must Be. Wink

Cheers!

Lorraine
Lorraine's picture
Offline
Elder
UK
Last seen: 14 years 37 weeks ago
UK
Timezone: GMT+1
Joined: 2005-01-04
Posts: 1001
Points: 0

Site check, please -- PC folks?

Wendy
You're welcome and it was no trouble at all - it just took me a while to realize I'd already been there myself... some considerable time ago.
Anno domini 'n all that :whistle:
All the best
Lorraine