Why is Vista showing this website so screwy?

[Alley Cat Smith]

My client loves the website I designed for her- at home.
At work she is running Vista with MicroSoft Outlook and she says it looks
crazy. Screwy spacing, out of alignment, letters too big and adding extra
lines. The weird thing is that she printed the pages and they are fine!

Now I checked this website this morning on Mozilla, Safari, Internet
Explorer, Netscape on two computers - both Macs--and they all looked great.

She says "Home page has a big gap (3 inches) between quote on top and second
paragraph."

http://www.barnlivin.com/

And on Services page - last words of bulleted sentences she says are aligned
way on the left.

http://www.barnlivin.com/services.html

I'm not seeing any of this. Is it her work computer? Or how do I fix this
for her?

Opinions cheerfully accepted,
Alley Cat

 

[Mark L. Ferguson]

IE has a number of user settings that might do that, up to, and including
accessibility settings, and custom .css 'stylesheets'.
IE, View menu, "Text Size" set to 'fixed' or whatever.
Rightclick a page and set 'Encoding' to something unusual.
IE, Tools menu, Options. General tab, "Accessibility" button.

--
Was this helpful? Then click the Ratings button. Voting helps the web
interface.
http://www.microsoft.com/wn3/locales/help/help_en-us.htm#RateAPostAsAnswer
Mark L. Ferguson
..

 

[Adam Albright]

On Wed, 16 Apr 2008 07:49:02 -0700, Alley Cat Smith <Alley Cat

My client loves the website I designed for her- at home.
At work she is running Vista with MicroSoft Outlook and she says it looks
crazy. Screwy spacing, out of alignment, letters too big and adding extra
lines. The weird thing is that she printed the pages and they are fine!

Now I checked this website this morning on Mozilla, Safari, Internet
Explorer, Netscape on two computers - both Macs--and they all looked great.

She says "Home page has a big gap (3 inches) between quote on top and second
paragraph."

http://www.barnlivin.com/

And on Services page - last words of bulleted sentences she says are aligned
way on the left.

http://www.barnlivin.com/services.html

I'm not seeing any of this. Is it her work computer? Or how do I fix this
for her?

Opinions cheerfully accepted,
Alley Cat

I see the same thing your client does using IE7. Why? Well I looked at
the source of the web page that shows how the HTML was encoded. To be
frank, a bewildering mass of quivering spaghetti gobbledygook. Not
your design, rather the underlying code that created it. THAT is the
problem.

The short answer is you using non standard markup. More correctly the
editor you've picked is. When you do all bets off, different browsers
on different platforms will show web pages differently, ESPECIALLY
when you assign height values in tables. Since you seem to be using
forced height values in your tables THAT will for sure give different
results and can depending on many things (user resolution for example)
really mess up spacing. I see the same huge gaps your client does.
This happens with tables, more so if you use nested tables.

It looks "fine" to you since you are viewing it at your preferred
resolution and favorite browser and your system is set to display
pages CORRECTLY with GoLive. That may or may not generate good results
at lessor or greater resolutions or for others because of a host of
variables.

What's really wrong? You apparently don't understand the underlying
principles behind HTML markup and are using some "fancy" HTML editor
to generate the markup for you. In your case Adobe GoLive.

What your client sees is sadly typical of code generated by such
"fancy" HTML editors. Oh the web site is readable enough and I guess
it works, and it doesn't look that bad, but for some, including your
client it looks butt ugly because in places doing HTML markup this way
can add huge gaps in the text, often between paragraphs or between
body text and headings.

What else looks rather cheesy is the added space both above and below
the images in the left column. Again the reason is the height values
and also the text formatting of the CSS in some paragraphs. Extra
space is getting added (forced) in the table column holding the images
to make up for added space in the text column to show the text, which
is probably way different in some browsers that what you're seeing.
The saddest thing of all is you probably weren't aware this can
happen.

Word to the wise... if you're going to author web sites for others for
MONEY be SURE you first understand the basics of HTML and never rely
exclusively on some fancy editor to generate the code for you or the
results can be pretty bad and make you look amateurish.

I used to author web sites in the mid to late 90's and I made a
fortune, but I had to stop, the pressure was getting to me and I was
working 18-20 hours 7 days a week.

Best thing you can do, learn the RIGHT way. Start here:

http://www.w3.org/

 

[Alley Cat Smith]

I tested it first thing this morning and the report says

http://validator.w3.org/check?uri=http://www.barnlivin.com

They say no errors, GoLive says no errors.

 

[Synapse Syndrome]

I see the same thing your client does using IE7. Why? Well I looked at
the source of the web page that shows how the HTML was encoded. To be
frank, a bewildering mass of quivering spaghetti gobbledygook. Not
your design, rather the underlying code that created it. THAT is the
problem.

The short answer is you using non standard markup. More correctly the
editor you've picked is. When you do all bets off, different browsers
on different platforms will show web pages differently, ESPECIALLY
when you assign height values in tables. Since you seem to be using
forced height values in your tables THAT will for sure give different
results and can depending on many things (user resolution for example)
really mess up spacing. I see the same huge gaps your client does.
This happens with tables, more so if you use nested tables.

It looks "fine" to you since you are viewing it at your preferred
resolution and favorite browser and your system is set to display
pages CORRECTLY with GoLive. That may or may not generate good results
at lessor or greater resolutions or for others because of a host of
variables.

What's really wrong? You apparently don't understand the underlying
principles behind HTML markup and are using some "fancy" HTML editor
to generate the markup for you. In your case Adobe GoLive.

What your client sees is sadly typical of code generated by such
"fancy" HTML editors. Oh the web site is readable enough and I guess
it works, and it doesn't look that bad, but for some, including your
client it looks butt ugly because in places doing HTML markup this way
can add huge gaps in the text, often between paragraphs or between
body text and headings.

What else looks rather cheesy is the added space both above and below
the images in the left column. Again the reason is the height values
and also the text formatting of the CSS in some paragraphs. Extra
space is getting added (forced) in the table column holding the images
to make up for added space in the text column to show the text, which
is probably way different in some browsers that what you're seeing.
The saddest thing of all is you probably weren't aware this can
happen.

Word to the wise... if you're going to author web sites for others for
MONEY be SURE you first understand the basics of HTML and never rely
exclusively on some fancy editor to generate the code for you or the
results can be pretty bad and make you look amateurish.

I used to author web sites in the mid to late 90's and I made a
fortune, but I had to stop, the pressure was getting to me and I was
working 18-20 hours 7 days a week.

Best thing you can do, learn the RIGHT way. Start here:

http://www.w3.org/

There is nothing wrong with GoLive!. Do you really think that GoLive! and
Dreamweaver are not used for professional sites, and that they are all
hand-coded? They are not just WYSIWYG editors, like FrontPage.

This problem with the large space appears on XP with IE7 as well. It is
obviously a IE7 issue (probably IE6 as well, although the OP says that it
was checked in 'IE')

The page validates perfectly, and Dreamweaver's Browser Compatibility Check
doesn't reveal any issues. There is no non-standard formatting. I am now
sure what you meant by that. The code is pretty messy though, in my
opinion.

There seems to be two overlapping tables where this space is appearing in
IE7. I have never used tables for formatting, as CSS was already around
when I learnt some web-design, so I cannot see why this problem with IE7
appears. I'd suggest stop using the old tables kludge and move onto CSS for
formatting, with divs and floats, although that would mean redoing the whole
site and working in an entirely new way.

ss.

 

[Adam Albright]

I tested it first thing this morning and the report says

http://validator.w3.org/check?uri=http://www.barnlivin.com

They say no errors, GoLive says no errors.

We're not talking mechanical errors rather appearance which validators
don't care about. I see the same thing you client does. Huge gaps
between paragraphs. As I said before it is the software you're using
to generate the HTML that is messing things up. If you don't
understand HTML you're going to have a devil of a time fixing it since
looking briefly at the markup there are all kinds of excessive height
statements, divisions and other garbage code that's causing the
problem.

The point is while the markup may be valid and pass a validator it is
written in a very clumsy way (common for hand holding HTML editors)
and because of it especially when also using style sheets the results
for SOME may be rather ugly.

Since the web page in question is very simple in nature all that's
really required if you're going to use tables is have a two column
one. All the images would go in the first, all you text in the second.
There is no need to add height or width attributes. In fact they often
hurt rather than help.

A better way would be to write it using only CSS rules.

 

[LesleyO]

I'm using IE7 with Vista Home Premium and both pages you've linked to look
absolutely fine here! No unusual gaps or spaces at all. I don't know what to
say.

LesleyO

 

[Carey Frisch [MVP]]

That web page is displayed best if you have a wide-screen monitor.
Windows Vista is optimized for use with wide-screen monitors.

Example:
http://www.newegg.com/Product/Product.aspx?Item=N82E16824001236


--
Carey Frisch
Microsoft MVP
Windows Desktop Experience -
Windows System & Performance

---------------------------------------------------------------

:

I tested it first thing this morning and the report says

http://validator.w3.org/check?uri=http://www.barnlivin.com

They say no errors, GoLive says no errors.

 

[Synapse Syndrome]

I'm using IE7 with Vista Home Premium and both pages you've linked to look
absolutely fine here! No unusual gaps or spaces at all. I don't know what
to say.

That's because he has fixed the issue with the tables since I posted.

ss.

 

[Synapse Syndrome]

That web page is displayed best if you have a wide-screen monitor.
Windows Vista is optimized for use with wide-screen monitors.

Example:
http://www.newegg.com/Product/Product.aspx?Item=N82E16824001236

What the hell are you talking about Carey?

ss.

 

[Alley Cat Smith]

Thanks everybody.

Alley Cat

 

[Adam Albright]

What the hell are you talking about Carey?

ss.

Carey just babbles mindlessly on every topic. This clown is really a
world class idiot that could give Frank a run for his money in stupid
totally unsupported things said in this newsgroup.

I NEVER heard anybody ever claim some sites look better in a wide
screen monitor. That total defies what's behind HTML.

I never heard Microsoft claim that Vista is optimized for wide screen
monitors either. Got a cite Mr. MVP?

 

[Adam Albright]

Thanks everybody.

Alley Cat

See you fixed it. Now it looks much better. Still a little bit much
empty space at the bottom, but the main content now appears more
balanced.

Two minor suggestions. Above the images where it says "Click Images to
Enlarge" is currently set to align left. Should be aligned center.

You would further tighten up the look if the last paragraph was
outside the table where the other text is so it spans the entire width
of the page created more of a wrap around look you probably want the
text to have.

 

[Carey Frisch [MVP]]

Software manufacturers are starting to take notice of the preference for larger screens.
"Widows Vista is the first operating system to be optimized for widescreens, and will be
another factor to help drive adoption by corporate users," Willey says. Microsoft Vista
offers a few widescreen/dual screen optimized features that weren't in Windows XP.
The Windows Sidebar on the main desktop is a vertical collection of customizable
"Gadgets" (similar to Mac Widgets) that sits on the left-hand side of the screen,
perfect for 16:9 presentations. Windows Media Center is also optimized for widescreen
and HD, with new layouts of photos, music, and videos, the company says that users
"can see up to three times more content on a widescreen display compared to previous versions."

Ref: http://technology.inc.com/hardware/articles/200711/monitor.html

The widescreen format also takes advantage of Windows Vista Premium's Aero Flip,
allowing users to save time by easily navigating between multiple windows open at one time.

10 Reasons to Get a Widescreen Monitor
http://www.associatedcontent.com/article/245187/10_reasons_to_get_a_widescreen_monitor.html

--
Carey Frisch
Microsoft MVP
Windows Desktop Experience -
Windows System & Performance

---------------------------------------------------------------

:

I NEVER heard anybody ever claim some sites look better in a wide
screen monitor. That total defies what's behind HTML.

I never heard Microsoft claim that Vista is optimized for wide screen
monitors either. Got a cite Mr. MVP?

 

[Synapse Syndrome]

Software manufacturers are starting to take notice of the preference for
larger screens.
"Widows Vista is the first operating system to be optimized for
widescreens, and will be
another factor to help drive adoption by corporate users," Willey says.
Microsoft Vista
offers a few widescreen/dual screen optimized features that weren't in
Windows XP.
The Windows Sidebar on the main desktop is a vertical collection of
customizable
"Gadgets" (similar to Mac Widgets) that sits on the left-hand side of the
screen,
perfect for 16:9 presentations. Windows Media Center is also optimized for
widescreen
and HD, with new layouts of photos, music, and videos, the company says
that users
"can see up to three times more content on a widescreen display compared
to previous versions."

Ref: http://technology.inc.com/hardware/articles/200711/monitor.html

The widescreen format also takes advantage of Windows Vista Premium's Aero
Flip,
allowing users to save time by easily navigating between multiple windows
open at one time.

10 Reasons to Get a Widescreen Monitor
http://www.associatedcontent.com/article/245187/10_reasons_to_get_a_widescreen_monitor.html

Hey, dumbass. This has no relevance to how a web-page is coded.

I see you seem to be posting 'widescreen' on Usenet now, heh. 76 characters
is what you use on Usenet.

ss.

 

[Synapse Syndrome]

Carey just babbles mindlessly on every topic. This clown is really a
world class idiot that could give Frank a run for his money in stupid
totally unsupported things said in this newsgroup.

He does seem to be totally clueless on anything other than Windows
Activation, but at least he is not as obnoxious at the same time as being
clueless, like he was a couple of years ago.

ss.

 

[Carey Frisch [MVP]]

Did I say anything about how the page was coded?

My comment was simply:

"That web page is displayed best if you have a wide-screen monitor."

--
Carey Frisch
Microsoft MVP
Windows Desktop Experience -
Windows System & Performance

---------------------------------------------------------------

:

Hey, dumbass. This has no relevance to how a web-page is coded.

I see you seem to be posting 'widescreen' on Usenet now, heh. 76 characters
is what you use on Usenet.

ss.

 

[Adam Albright]

Software manufacturers are starting to take notice of the preference for larger screens.
"Widows Vista is the first operating system to be optimized for widescreens, and will be
another factor to help drive adoption by corporate users," Willey says. Microsoft Vista
offers a few widescreen/dual screen optimized features that weren't in Windows XP.
The Windows Sidebar on the main desktop is a vertical collection of customizable
"Gadgets" (similar to Mac Widgets) that sits on the left-hand side of the screen,
perfect for 16:9 presentations. Windows Media Center is also optimized for widescreen
and HD, with new layouts of photos, music, and videos, the company says that users
"can see up to three times more content on a widescreen display compared to previous versions."

Ref: http://technology.inc.com/hardware/articles/200711/monitor.html

Now we can add marketing hype to the things Frisch falls for.

From the link above ===> "Willey, director of product marketing for
desktop displays at ViewSonic Corp."

Of course none of the above has a damn thing to do with Carey's
comments; WEB PAGES look better on a wide screen.


ROTFLMAO!

 

[Adam Albright]

Did I say anything about how the page was coded?

My comment was simply:

"That web page is displayed best if you have a wide-screen monitor."

For the utterly clueless, especially Carey. HOW a web page is "coded"
ie the underlying HTML markup (click view source on your browser to
see any web page's HTML) determines what you see on your monitor.

To wrongly suggest a web page is displayed "best" on wide-screen
monitors only confirms Carey doesn't have a clue what he's talking
about.

A web page has no preset ratio or format HOW it appears is determined
by how the browser understand the markup AND by the size of the window
the browser appears in plus to a lessor degree your system's
resolution and the platform.

Example: Any given web page even if viewed by the same brand of
browser will appear somewhat different when viewed on a Windows system
verses a Mac system or on a UNIX system, etc.. How different depends
on many factors.

Prove you can also how the text flows by viewing a web page first in
your browser set to full screen, then view again in a browser window
shrunk down in a smaller size. Did you see the web page content adjust
to the size of the window? Now reduce the size of the window by
dragging on a corner of the window moving in or out and watch as the
page resets itself as you make the windows larger or smaller.

 

[Adam Albright]

He does seem to be totally clueless on anything other than Windows
Activation, but at least he is not as obnoxious at the same time as being
clueless, like he was a couple of years ago.

ss.

That's progress. ;-)